How do I POST with multipart form data using fetch?

by

You’re setting the Content-Type to be multipart/form-data, but then using JSON.stringify on the body data, which returns application/json. You have a content type mismatch.

You will need to encode your data as multipart/form-data instead of json. Usually multipart/form-data is used when uploading files, and is a bit more complicated than application/x-www-form-urlencoded (which is the default for HTML forms).

The specification for multipart/form-data can be found in RFC 1867.

For a guide on how to submit that kind of data via javascript, see here.

The basic idea is to use the FormData object (not supported in IE < 10):

async function sendData(url, data) {
  const formData  = new FormData();

  for(const name in data) {
    formData.append(name, data[name]);
  }

  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  // ...
}

Per this article make sure not to set the Content-Type header. The browser will set it for you, including the boundary parameter.

More Related Contents:

  1. Fetch: POST JSON data
  2. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  3. How do I upload a file with the JS fetch API?
  4. How can I download a file using window.fetch?
  5. What limitations apply to opaque responses?
  6. How can I fetch an array of URLs with Promise.all?
  7. Fetch: reject promise and catch the error if status is not OK?
  8. Internal API fetch with getServerSideProps? (Next.js)
  9. Getting “TypeError: Failed to fetch” when the request hasn’t actually failed
  10. What is difference between Axios and Fetch?
  11. JavaScript, make a POST with JSON data with fetch()
  12. try..catch not catching async/await errors
  13. Fetch API vs XMLHttpRequest
  14. React useEffect causing: Can’t perform a React state update on an unmounted component
  15. fetch gives an empty response body
  16. Chrome – Fetch API cannot load file. How to workaround?
  17. How to use FormData in react-native?
  18. redux fetch body is not use with no cors mode
  19. fetch() does not send headers?
  20. How to handle HTTP code 4xx responses in fetch api
  21. Basic authentication with fetch?
  22. Relative paths with fetch in Javascript
  23. How do I download a file from FastAPI backend using Fetch API in the frontend?
  24. React cannot read property map of undefined
  25. JavaScript fetch – Failed to execute ‘json’ on ‘Response’: body stream is locked
  26. How to make javascript fetch synchronous?
  27. set withCredentials to the new ES6 built-in HTTP request API : Fetch
  28. How to get the filename from a file downloaded using Javascript Fetch API?
  29. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  30. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend

Leave a Comment