# Fix uploading files using fetch and multipart/form-data

> Fix file uploads with fetch and FormData that never reach the server: do not set the multipart/form-data Content-Type header and let the browser add it.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-06-02 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/fix-formdata-multipart-fetch/

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](https://flaviocopes.com/fetch-api/), like this ([React](https://flaviocopes.com/react/) code):

```js
<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.