Reactjs | How to make boundary static when content type is multipart/form-data

Question

We are facing one issue while we are making file upload post call using React-JS, in dev-tools under form data we are getting some browser generated boundary.

------WebKitFormBoundarypSTl3xdAHAJgTN8A

And because of this random boundary we are getting issue while we are making call to a third party api.

Is there any way to make this boundary some fixed value. Something like this :

----somefixedvalue.

Here is the js code:

function doupload() {
let data = document.getElementById("file").files[0];
console.log('doupload',data);
let formData = new FormData();
formData.append("file", data);
fetch('http://localhost:8081/upload/multipart',
{
method:'POST',
body: formData,
headers: {
   'Content-Type': 'multipart/form-data; boundary=----somefixedboundary'
  }
}).then(res => {
       for(const header of res.headers){
           console.log(`resHeaderName: ${header[0]}, Value:${header[1]}`);
         }
     });
alert('your file has been uploaded');
location.reload();

};

can someone help me to solve this? I'm quite confused here as i have given content type along with some static boundary but no luck.

score 0 · Answer 1 · answered Jun 29 '22 at 16:17

You can convert a file to the binary string and prepare the body by yourself instead of using FormData as it shown in this answer.

But keep in mind that if this ----somefixedvalue substring appears in the file it will be considered a boundary causing body parsing error on receiver side. In case of FormData, browser should take care of it and prevent this.

Reactjs | How to make boundary static when content type is multipart/form-data

1 Answers1