Uploading a file using fetch and formdata succeeds in Ubuntu but failed in Windows 10

Question

guys. I met a annoying issue these days.

I am trying to upload a file to the server side using fetch in FormData type as follows:

export function buildFormData(request) {
  const formData = new window.FormData();
  for (const name in request) {
    formData.append(name, request[name]);
  }
  return formData;
}

and then

export function checkImported(file) {
  const formData = UTILS.buildFormData({ file });
  return fetch(`${ServerConst.SERVER_CONTEXT_PATH}/import/check`, {
    method: 'POST',
    body: formData,
  }).then(response => response.json());
}

In Ubuntu the request is:

In Windows 10 is:

All I checked differently is the Request Payload which is text/csv in Ubuntu while application/octet-stream in Windows 10;

But when I tried to add headers for the fetch as follows:

export function checkImported(file) {
  const formData = UTILS.buildFormData({ file });
  return fetch(`${ServerConst.SERVER_CONTEXT_PATH}/import/check`, {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data; text/csv' },
    body: formData,
  }).then(response => response.json());
}

, it will failed in ubuntu also (the server side will prompt me about the request was rejected because no multipart boundary was found. And the reason is explained in this post clearly.

Can anyone help? Thank you very much!

Best wishes, Hearen.

Answer 1

This is due to the backend validation in java which will filter out other types retaining only the "Content-Type: text/csv".

As you can see that in windows, the Content-Type in Request Payload is application/octet-stream.

Since the frontend can filter out all non-csv files via accept in upload, I removed the validation in backend and solved the problem.