Empty Values When Posting Formdata-object Via Fetch-api In Internet Explorer 11

I have written a React-component which should be used for all forms in my application. When a certain button is clicked I make some validation and finally I want to post the form t

Solution 1:

Somebody reported this to me today in the repo.

https://github.com/jimmywarting/FormData/issues/44

Apparently "IE fail to set Content-Type header on XHR whose body is a typed Blob" that's why you get wrong content-type header. updating the version to might 3.0.7 fix this

Solution 2:

I had this problem, but after much frustration I found out that appending an extra field to the FormData object suddenly all the fields appeared on the server.

const formData = new FormData(theForm);

// this somehow makes it work
formData.append('fakefield', 'nothing to see here!');

fetch(theForm.action).then(/* do the stuff */);

I don't know why it works, but before I added that line the server received {} as the request body and afterwards it received { myformfield: 'myvalue', myotherfield: 'myothervalue', fakefield: 'nothing to see here!' }

Hope this can save someone a bit of frustation :)