Published Jun 02 2022
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 an entire book on this topic π
I also got a super cool course π
© 2023 Flavio Copes
using
Notion to Site.
Follow on Twitter
Solopreneur? Wannabe? Adventure awaits