xhr.send(file) doesn't post it as multipart

Question

On Firefox 3.6 and Chrome, using xhr.send(file) just puts the raw contents into the body of the request and it is not a true multipart/form-data upload.

Tried doing

Answer 1

The key thing is using sendAsBinary(body) istead of send(body). See the last comment on the page you linked!

Answer 2

xhr.sendAsBinary() is non-standard. Instead, use xhr.send(FormData), which does create a multipart/form-data request, allows appending files, and arbitrary form data.

var formData = new FormData();
formData.append(file.name, file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function(e) { ... };

xhr.send(formData);  // multipart/form-data

See http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata