How to parse data submitted by FormData() in nodejs? - node.js

Question

I'm submitting base64 image to server side via FormData(). Getting something like
{"------WebKitFormBoundaryjJtrF2zdTOFuHmYM\\r\\nContent-Disposition: form-data; name":"\\"image\\"\\r\\n\\r\\ndata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABiCAYAAADnRp6aAAAAAXNSR0IArs4c6QAAIABJREFUeF7tnQd0FFUXx/9vdtNDSC8kJCEJISEJgd7pz4GGfiqoqm5C1aNSPaqq9hYVVFW1VOXnqaCqoQ1VUKmgqmrXUUFVVUupoKq9pczuoIJKBVVVO5UKqqpaSgVV7S1ldof/A9VZZwflQmSiAAAAAElFTkSuQmCC\\r\\n------WebKitFormBoundaryjJtrF2zdTOFuHmYM--\\r\\n"}
How to parse this to get the image data seperatly.I'm using expressjs as backend.
I'm not submitting a normal image through html form tag. The code :
var src = document.getElementById('hdrimg').src;
var formData = new FormData()
formData.append("image",src);
let response = await fetch('http://localhost:3000/hdrimg', {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: formData
});
Manually submitting source of image with formdata constructor. I tried with multer , express-file-upload as we do for normal files. Is there any other way to retrive the data like this in backend.
{"------WebKitFormBoundaryjJtrF2zdTOFuHmYM\\r\\nContent-Disposition: form-data; name":"\\"image\\"\\r\\n\\r\\ndata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABiCAYAAADnRp6aAAAAAXNSR0IArs4c6QAAIABJREFUeF7tnQd0FFUXx/9vdtNDSC8kJCEJISEJgd7pz4GGfiqoqm5C1aNSPaqq9hYVVFW1VOXnqaCqoQ1VUKmgqmrXUUFVVUupoKq9pczuoIJKBVVVO5UKqqpaSgVV7S1ldof/A9VZZwflQmSiAAAAAElFTkSuQmCC\\r\\n------WebKitFormBoundaryjJtrF2zdTOFuHmYM--\\r\\n"}

Answer 1

You can try like it:
function upload_share_file() {
file = document.getElementById("share_file").files[0]
console.log(file["name"])
startUpload(file, "/srdata?type=file_upload&filename=" + file["name"],
function(response) {
uResponseAlert(JSON.parse(response))
// console.log(response)
file_table()
}
)
}
function startUpload(file, uploadUrl, callback)
{
var request = new XMLHttpRequest();
request.upload.addEventListener("progress", window.evt_upload_progress, false);
request.addEventListener("load", window.evt_upload_complete, false);
request.addEventListener("error", window.evt_upload_failed, false);
request.addEventListener("abort", window.evt_upload_cancel, false);
request.open("POST", uploadUrl);
request.send(file);
request.onreadystatechange = function() {
if (request.readyState === 4) { //run it when get response
console.log(request.response)
callback(request.response);
}
}
}

Answer 2

When using fetch with a FormData as body, do not set the Content-Type header, it will be set automatically to multipart/form-data. Then you can use multer to parse it on the server, as suggested by Marc Stroebel.