CODEWITHSUNDEEP
javascriptnode.jsreactjsfetchmultipart
Hemant Yadav
Hemant Yadav

Reputation: 337

file upload using fetch API in javaScript

Hi I am trying to upload a tar file from so many days, but everytime I am failing. I am new to this JS, UI and https req/res domain. My environment is: nodeJS, JavaScript for backend. ReactJS for frontend. I need to upload tar file from my machine to remote server.

Here is my frontend code where I am making fetch request to upload a file.

export function postXCCDF () {
  let _headers = {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu'
  };

  var formData = new FormData();
  formData.append('type', 'file');
  formData.append('file', 'C:\\MyDrive\\rules.zip');

  let uri = '/rest/policy';

  const options = { method: 'POST', headers: _headers, body: formData };
  return fetch(`${_host}${urlPrefix}${uri}`, options)
    .then(processStatus)
    .then(response => response.json());

}

Here is my backend code , where I am expecting the tar file to receive.

router.post('/policy', function(req, res) {
    console.log('hey I reached here');
    console.log('hemant req',req.body.formData); // prints hemant req undefined
    // Dont know how to save it to some directory. ??? :(
});

My whole idea is to upload a tar file to a server located at remote location. I have tried lot many other ways, but nothing seems to help.

Upvotes: 1

Views: 2127

Answers (1)

Nikos Vita Topiko
Nikos Vita Topiko

Reputation: 551

The body-parser module only handles JSON and urlencoded form submissions, not multipart (which would be the case if you're uploading files).

For multipart, you'd need to use something like connect-busboy or multer or connect-multiparty (multiparty/formidable is what was originally used in the express bodyParser middleware).

Upvotes: 1

Related Questions