# Uploading files using 'fetch' and 'FormData'

DevFeed: [Uploading files using 'fetch' and 'FormData'](<https://devfeed.tech/articles/uploading-files-using-fetch-and-formdata-37369.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/uploading-files-using-fetch-multipart-form-data/>)

Author: Stanko

Published: 2018-03-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [fetch](<https://devfeed.tech/topics/fetch.md>), [API](<https://devfeed.tech/topics/api.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [browser](<https://devfeed.tech/tags/browser.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [form](<https://devfeed.tech/tags/form.md>), [headers](<https://devfeed.tech/tags/headers.md>), [json](<https://devfeed.tech/tags/json.md>), [request](<https://devfeed.tech/tags/request.md>)

## AI overview

This tutorial explains how to upload files with fetch and FormData. It shows that the request should not manually set the Content-Type header, allowing the browser to add the multipart boundary required for the server to parse the uploaded file correctly.

## Source excerpt

Today I learned: To upload files using fetch and FormDataFormData is supported in IE10+. you must not set Content-Type header. const fileInput = document.querySelector('#your-file-input') ; const formData = new FormData(); formData.append('file', fileInput.files[0]); const options = { method: 'POST', body: formData, // If you add this, upload won't work // headers: { // 'Content-Type': 'multipart/form-data', // } }; fetch('your-upload-url', options); Problem I had # My API wrapper class has default content type header set to: 'Content-Type': 'application/json' So I thought, to upload files using FormData, it would be enough to override it with: 'Content-Type': 'multipart/form-data' But alas, it didn't work, server couldn't parse the files I was uploading. I've wasted about half an hour, and then noticed that simple HTML form was setting something else: Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIM It had this boundary thing I didn't know anything about. Then I started searching around the internet and found the solution. To set the correct boundary, I had to explicitly delete Content-Type header. In that case browser will set the correct boundary itself. Adding this line solved it. // Remove 'Content-Type' header to allow browser to add // along with the correct 'boundary' delete options.headers['Content-Type']; Explanation # What is boundary and why I had to delete the header? Multipart form allow transfer of binary data, therefore server needs a way to know where one field's data ends and where the next one starts. That's where boundary comes in. It defines a delimiter between fields we are sending in our request (similar to & for GET requests). You can define it yourself, but it is much easier to let browser do it for you. Example payload: ------WebKitFormBoundaryIn312MOjBWdkffIM Content-Disposition: form-data; name="file"; filename="my-image.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryIn312MOjBWdkffIM Content-Dispos