SpringBoot cannot parse MultipartFile properly - spring

Question

Hello and thank you for your time in advance.
I have really simple code below for downloading/uploading files:
This is frontend:
function upload() {
let data = new FormData();
data.append("file", refs.inputFile.current.files[0]);
let config = {
headers: {
"Content-Type" : "multipart/form-data"
}
};
console.log(data);
axios.post("http://localhost:8080/upload",
data)
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err.message);
});
}
When i open request in Firefox i can see file content just fine, content in files is just fine on this side. But backend returns to me totally different thing.
So this is backend code:
Controller:
#PostMapping(path = "/upload")
public String upload(
#RequestParam("file") MultipartFile file) throws IOException {
if(repo.existsByFilename(file.getOriginalFilename())) {
return "File already exists.";
} else {
Model m = new Model(
file.getOriginalFilename(),
file.getBytes()
);
repo.save(m);
return "File named " + file.getOriginalFilename() + " is saved.";
}
Model entity:
#Entity
#Table(name = "test")
public class Model {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String filename;
#Lob
#Column(columnDefinition = "longblob")
private byte[] data;
public Model() {
super();
}
public Model(String filename, byte[] data) {
super();
this.filename = filename;
this.data = data;
}
public Model(Long id, String filename, byte[] data) {
super();
this.id = id;
this.filename = filename;
this.data = data;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getFilename() {
return filename;
}
public void setFilename(String filename) {
this.filename = filename;
}
public byte[] getData() {
return data;
}
public void setData(byte[] data) {
this.data = data;
}
}
I when i try to upload a simple text file named testtext.txt with "TESTTEXT" i can open request in firefox and i get this:
-----------------------------3431304631829148335501350923
Content-Disposition: form-data; name="file"; filename="testtext.txt"
Content-Type: text/plain
TESTTEXT
-----------------------------3431304631829148335501350923--
BUT when i access MySQL DB directly i have this content:
0x54455354544558540A
When you convert it to ASCII it doesn't make sense. Its the same when i try this code with images also. It always returns me more than i send it.
For almost two days i cannot get simple file up/down working and i don't understand where am i making mistake. This is just minimal and straightforward code, it should work...
Download function:
function download(filename) {
console.log(filename);
axios({
url: "http://localhost:8080/api/dataupdown/download",
method: "GET",
params: {
filename: filename
}
}).then((res) => {
const url = window.URL.createObjectURL(new Blob([res.data.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", res.data.filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}

Answer 1

Your lob is encoded in hexadecimal. if you convert it to string, you will find the result you are looking for 'TESTTEST' :
function hex2a(hexx) {
var hex = hexx.toString();//force conversion
var str = '';
for (var i = 0; i < hex.length; i += 2)
str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
return str;
}
console.log(hex2a('54455354544558540A')); // returns 'TESTTEST'
EDIT: response to second question added by edit about the download
You exposed the controller data encoded in base64. If you decoded, you will find back 'TESTTEXT'
var decoded = atob("VEVTVFRFWFQK");
console.log(decoded); //returns 'TESTTEXT'

Answer 2

Thank you very much Thomas for helping me. My problem is completely solved. I can now upload all files(images, videos, text, documents) and i can download them just exactly as they are originally.
So apparently after following tons of tutorials no one mentioned even once that data was encoded in Base64 scheme, and to be honest i didn't know anything about Base64 before... I used js-base64 lib because it has nice prebuilt stuff that should be(in my opinion) base in JS.
Summary:
Data you send to SQL is raw HEX/BINARY code.
When you GET/POST data from SQL, browser(or JS?) converts it to Base64 scheme.
After getting data you need to convert it raw binary format.
Convert Base64 data to Uint8Array if you are working with media,documents or anything else literally. Plain text files(ASCII) are fine without it.
So here is updated download code(i use node-js but there is js-base64 for plain JS also):
import {Base64} from "js-base64";
function download(filename) {
axios({
url: "http://192.168.0.149:8080/api/dataupdown/download",
method: "GET",
params: {
filename: filename
},
})
.then((res) => {
console.log(res.data);
const url = window.URL.createObjectURL(new Blob([Base64.toUint8Array(res.data.data)]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", res.data.filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}