Dynamically update content-type header when using Javascript Fetch API

Question

I'm trying to send an http POST request using the JavaScript Fetch API. What I've got so far looks like this (in TypeScript notation):

const fetchHeaders = new Headers();
fetchHeaders.append("Content-Type", "multipart/form-data; boundary=???");

const fetchOptions: RequestInit = {
    method: "Post",
    body: this.file,
    headers: fetchHeaders
}

await fetch("uri", fetchOptions);

Assuming that this.file is either a .xls or .xlsx Excel file uploaded using a <input type="file">, how do I populate the boundary= part of the Content-Type header dynamically when the fetch is called?

When doing this same operation in POSTMAN, the boundary is automatically set and I can't figure out how.

Question re-posted because of an erroneous duplicate mark, since duplicated questions tend to get ignored. — Casey Cummings, Oct 27 '17 at 20:36
https://stackoverflow.com/questions/3508338/what-is-the-boundary-in-multipart-form-data this is why they are saying its a duplicate — Hunter, Oct 27 '17 at 20:50
That's not the question they said was a duplicate. That one is also not a duplicate. — Casey Cummings, Oct 27 '17 at 20:51

Casey Cummings · Accepted Answer · 2017-11-01T15:32:10.783

1

I figured out the core issue - passing the file itself as the body. This was how I solved it:

const formData = new FormData();
formData.append("file", this.file, this.file.name);

const fetchOptions: RequestInit = {
    method: "Post",
    body: formData
}

edited Nov 01 '17 at 15:32

answered Oct 27 '17 at 20:53

Casey Cummings

53
7

Dynamically update content-type header when using Javascript Fetch API

1 Answers1