I'm trying to send multipart/form-data
with following JavaScript and jQuery:
var formData = new FormData();
formData.append("projectName", $("#projectNameInput").val());
var file = $("#fileInput")[0].files[0];
formData.append("content", file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/project', true);
xhr.onload = function(ev) {
// Handling logic omitted
};
xhr.send(formData);
However, some client browsers (Firefox and Chrome) receive 400 Bad Request
from the server. While examining the headers and request payload I discovered that some browsers set explicit content type for the file as follows:
------WebKitFormBoundaryEuDIpEU2Ci8VNwNJ
Content-Disposition: form-data; name="content"; filename="testfile.ext"
Content-Type: EXT Project Data (64bit)
------WebKitFormBoundaryEuDIpEU2Ci8VNwNJ
In a working request the Content-Type
should be as follows: Content-Type: application/octet-stream
, which the server can handle properly.
I suspect this has something to do with browser's configuration or file associations. Is there a way to explicitly set the content type for the file part of the request?
The problem occurs with some users using Firefox and Chrome. However, some users are able to upload succesfully using Chrome and Firefox. IE is not supported by our application.