Fetch - Missing Boundary in Multipart/Form-Data Post

fetch - Missing boundary in multipart/form-data POST

The solution to the problem is to explicitly set Content-Type to undefined so that your browser or whatever client you're using can set it and add that boundary value in there for you. Disappointing but true.

FormData how to get or set boundary in multipart/form-data - Angular

Well, seems that the headers ContentType should be undefined, in order to add the correct boundaries

Error: Multipart: Boundary not found axios request (React Native)

I have the same issue as you and have spent three days on it. Later today moved to fetch API.

Then it stroke me to downgrade the axios version and guess what, the Feature worked flawlessly i think it a bug in latest version of axios

My current version was 0.26 and i downgraded to 0.21

How to send data correct axios Error: Multipart: Boundary not found

You can do this ...

Instantiate a new FormData instance.

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)

Usingconcat and concat-stream

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

Using promise

const promise = new Promise((resolve) => {
  const fd = new FormData();
  fd.append("hello", "world");
  fd.append("file", fs.createReadStream(binaryFile));
  fd.pipe(concat({ encoding: 'buffer' }, data => resolve({ data, headers: fd.getHeaders() })));
});
promise.then(({ data, headers }) => axios.post('/hello', data, { headers }));

I hope I've been useful! :)

References:

• github.com - Can't get a .post with Content-Type...
• github.com - Better solution using axios, form-data, fs
• https://stackoverflow.com/a/47630754/3332734

Unable to load file due to Multipart: Boundary not found

When you're sending a form with fetch in the frontend, don't set Content-Type header yourself. If you do, it won't have the form boundary and the multipart/form-data request will be parsed incorrectly in the backend.

You can omit the header because the browser will set it for you, which includes a unique boundary. For example:

• Your header: Content-Type=multipart/form-data;
• Browser's header: Content-Type=multipart/form-data; boundary=------WebKitFormBoundaryg7okV37G7Gfll2hf--

In your case:

const options = {
  method: 'POST',
  body: bodyFormData,
}
const response = await fetch(`${apiUrl}/api/uploads`, options)

---

Related Topics