How to parse data submitted by FormData() in nodejs?

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"}

try multer middleware: expressjs.com/en/resources/middleware/multer.html — Marc Stroebel
– Marc Stroebel, Commented Nov 21, 2022 at 15:02

Tyler2P · Accepted Answer · 2022-11-23 16:16:39Z

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);
    }
  }
}

Heiko Theißen · Accepted Answer · 2022-11-23 16:44:44Z

0

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.

answered Nov 23, 2022 at 16:44

Heiko Theißen

18.2k2 gold badges14 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to parse data submitted by FormData() in nodejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest