Fix uploading files using fetch and multipart/form-data
I had a form that accepted a file and some fields and I wanted to send this data to the server through the Fetch API, like this (React code):
<form
encType='multipart/form-data'
action='/api/post'
method='POST'
onSubmit={async (e) => {
e.preventDefault()
if (!title) {
alert('Enter a title')
return
}
if (!content && !image) {
alert('Enter some text in the post')
return
}
const body = new FormData()
body.append('image', image)
body.append('title', title)
body.append('content', content)
const res = await fetch('/api/post', {
body,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
})
}}
>
...
</form>
I had a problem. The files data was not actually sent to the server.
The solution was this: you must NOT set the headers.
I did set the multipart/form-data
header as that’s what you do with files upload, but apparently that’s what is breaking the file upload through fetch.
Remove the headers from the fetch
request and things should be working.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025