CODEWITHSUNDEEP
javascriptreactjsmultipartform-data
shanvj
shanvj

Reputation: 1

Firefox and Safari setting incorrect header for ContentType when using FormData

We have a file upload code section where we use Form data to send to the file to the backend service.

let formData = new FormData();
formData.append('classFile', values.file || new Blob(), values.file ? values.file.name : '');

We make a http post request to the backend to send this data. We are noticing that the Content Type is set correctly to multipart/formdata on chrome Chrome request header whereas Firefox/Safari sets them to application/json. Firefox request header We do not pass any explicit headers on the post request. Any help on how to fix it is appreciated.

Upvotes: 0

Views: 582

Answers (2)

shanvj
shanvj

Reputation: 1

We were able to resolve the issue by upgrading the version of axios package that was used for the http calls to the latest version. We can now see the content type and boundary automatically set by the browser in both firefox/safari correctly when doing a http post.

Upvotes: 0

Dimitar Cetelev
Dimitar Cetelev

Reputation: 392

Have you tried setting explicit Content-Type: multipart/formdata header ?

Upvotes: 0

Related Questions