HTML5 File API readAsBinaryString reads files as much larger, different than files on disk

Question

Full code at https://gist.github.com/992562.

I am using HTML File API and drag/drop to upload files via XHR post to a PHP script. Procedurally, everything seems to be working OK, however when I try to open the uploaded files, any non-text file is much larger than the source file, and won't open. It's clearly not the same data as was on the source disk. However, text files are exactly the same and open just fine.

Some examples on a 3-file drag/drop upload: file 1: text/XML: on disk 13 KB, uploaded 13 KB, works perfectly file 2: image/PNG: on disk 14 KB, uploaded 18 KB, won't open file 3: application/XLSX: on disk 12 KB, uploaded 14 KB, won't open

It all boils down to this (after xhr headers are setup, file object is ready, etc):

  var reader = new FileReader();
  reader.onload = function(evt) {
    xhr.send(evt.target.result)
  }
  reader.readAsBinaryString(f);

returning large, bad data. Is there anything clearly wrong with it?

Answer 1

This is probably because you're reading the file as a binary string and constructing the multipart/form-data request manually. For one, you don't need to use FileReader. Since you just want to send the content, try using xhr.send(File) or xhr.send(FormData). The latter constructs and sends a multipart/form-data for you:

function uploadFiles(url, files) {
  var formData = new FormData();

  for (var i = 0, file; file = files[i]; ++i) {
    formData.append(file.name, file);
  }

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

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

document.querySelector('input[type="file"]').onchange = function(e) {
  uploadFiles('/server', this.files);
};