How to POST with multipart/form-data header and FormData using fetch

rfc1484

This is a CURL example which works fine:

curl -X POST \
  <url> \
  -H 'authorization: Bearer <token>' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F [email protected] \
  -F userId=<userId>

I'm trying to reproduce this request using isomorphic-fetch.

I've tried the following code:

const formData = new FormData();
formData.append('file', file);
formData.append('userId', userId);

return fetch(`<url>`, {      
  method: 'POST',
  headers: {
    'Content-Length': file.length
    'Authorization: Bearer <authorization token>',
    'Content-Type': 'multipart/form-data'
  },
  body: formData
})`

I use fs.readFileSync in order to generate the file passed to FormData.

The previous example returns a 401 HTTP status code (unauthorized) with an error message saying that the userId embedded in the token (sent via header) does not match the userId passed from formData.

So my suspicion is that the FormData that arrives to the REST API is not adequately formed.

The problem may be related with the Content-Length header, but I didn't find a better way to calculate it (if I don't use the Content-Length header I get a 411 HTTP status code Content-Length header missing).

Could be the case that this is failing because of an incorrect value in the Content-Length header?

Any other suggestions on why this is failing or how to better debug it?

If further info is needed to clarify this problem, please just ask.

UPDATE

I've tried the form-data module in order to get the right Content-Length value using the method formData.getLengthSync()

However the problem remains the same (401 error HTTP status code response).

idbehold

If you open up your network inspector, run this code snippet, and submit the form you should see that the Content-Length is set correctly:

const foo = document.getElementById('foo')
foo.addEventListener('submit', (e) => {
  e.preventDefault()
  const formData = new FormData(foo)
  formData.append('userId', 123)
  fetch('//example.com', {
    method: 'POST',
    body: formData
  })
})
<form id="foo">
  <input id="file" type="file" name="file"/><br><br>
  <button type="submit">Submit</button>
</form>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to upload a variable amount of files using a single multipartform post header key

How to post multipart/formdata using fetch in react-native?

How can I send a binary data (blob) using fetch and FormData?

How to add header data in XMLHttpRequest when using formdata?

How to post body data using Fetch API?

How to make dynamic checkbox and post the data using fetch post?

jQuery POST data using FormData with PHP

POST data to NodeJS using fetch()

How to POST data on payload instead of formdata

415 on fetch POST with multipart FormData

How to post object using fetch with form-data in React?

How to Post data to database using Fetch API in React.js

How to send POST data to flask using Reactjs fetch

How to fetch data using http post request in Angular 7

How to send FormData In Http Post using Spray

How to POST with application/x-www-form-urlencoded header and URLSearchParams using isomorphic-fetch

FormData image is undefined in post request with Fetch

Fetch POST with formData is empty in Express JS route

How to perform a post request with axios on React and pass your data as FormData?

Data and files in one ajax - How to process post sended by JS FormData

how to fetch api(POST) with header in react native app

How to fetch data from post method in Swift?

How to use fetch to post some data

how to fetch data using this coding

How can I send a file using http POST request as a formData?

How to validate FormData object within Laravel 7 using AJAX post?

How to add an array of files duplicated from input.files to formData in fetch post request?

post data array with formData axios

Getting data using formdata?