file upload using fetch API in javaScript

Question

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.

Please use stackoverflow.com/review/suggested-edits/15772861 to edit/update your answer to provide the text of any error messages you see in the browser devtools console and in the backend server logs. And look in the Network panel of devtools to see if the request is actually getting sent, and what the request headers are, and see what response is being received, and what the headers are — sideshowbarker
– sideshowbarker, Commented Apr 7, 2017 at 10:57

Nikos Vita Topiko · Accepted Answer · 2017-04-07 11:08:24Z

1

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).

answered Apr 7, 2017 at 11:08

Nikos Vita Topiko

5514 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

file upload using fetch API in javaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related