fileReader readAsBinaryString to upload files

Question

Trying to use fileReader readAsBinaryString to upload a PNG file to the server via AJAX  stripped down code  fileObject is the object containing info on my file    var fileReader   new FileReader     fileReader onload   function e        var xmlHttpRequest   new XMLHttpRequest          Some AJAX-y stuff - callbacks  handlers etc      xmlHttpRequest open  POST     pushfile   true       var dashes    --       var boundary    aperturephotoupload       var crlf     r n          Post with the correct MIME type  If the OS can identify one      if   fileObject type                  filetype    application octet-stream         else           filetype   fileObject type               Build a HTTP request to post the file     var data   dashes   boundary   crlf    Content-Disposition  form-data      name   file        filename       unescape encodeURIComponent fileObject name            crlf    Content-Type      filetype   crlf   crlf   e target result   crlf   dashes   boundary   dashes       xmlHttpRequest setRequestHeader  Content-Type    multipart form-data boundary     boundary          Send the binary data     xmlHttpRequest send data      fileReader readAsBinaryString fileObject     Examining the first few lines of a file before upload  using VI  gives me    The same file after upload shows    So it looks like a formatting encoding issue somewhere  I tried using a simple UTF8 encode function on the raw binary data      function utf8encode string            string   string replace   r n g   n            var utftext                for  var n   0  n  lt  string length  n                   var c   string charCodeAt n                if  c  lt  128                    utftext    String fromCharCode c                             else if  c  gt  127   amp  amp   c  lt  2048                     utftext    String fromCharCode  c  gt  gt  6    192                   utftext    String fromCharCode  c  amp  63    128                             else                   utftext    String fromCharCode  c  gt  gt  12    224                   utftext    String fromCharCode   c  gt  gt  6   amp  63    128                   utftext    String fromCharCode  c  amp  63    128                                     return utftext          Then in the original code    Build a HTTP request to post the file var data   dashes   boundary   crlf    Content-Disposition  form-data      name   file        filename       unescape encodeURIComponent file file name            crlf    Content-Type      filetype   crlf   crlf   utf8encode e target result    crlf   dashes   boundary   dashes    which gives me the output of    Still not what the raw file was     How do I encode load process the file to avoid the encoding issues  so the file being received in the HTTP request is the same as the file before it was uploaded   Some other possibly useful information  if instead of using fileReader readAsBinaryString   I use fileObject getAsBinary   to get the binary data  it works fine  But getAsBinary only works in Firefox  I ve been testing this in Firefox and Chrome  both on Mac  getting the same result in both  The backend uploads are being handled by the NGINX Upload Module  again running on Mac  The server and client are on the same machine  The same thing is happening with any file I try to upload  I just chose PNG because it was the most obvious example

User · Answer

The best way in browsers that support it, is to send the file as a Blob, or using FormData if you want a multipart form. You do not need a FileReader for that. This is both simpler and more efficient than trying to read the data.

If you specifically want to send it as multipart/form-data, you can use a FormData object:

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", '/pushfile', true);
var formData = new FormData();
// This should automatically set the file name and type.
formData.append("file", file);
// Sending FormData automatically sets the Content-Type header to multipart/form-data
xmlHttpRequest.send(formData);

You can also send the data directly, instead of using multipart/form-data. See the documentation. Of course, this will need a server-side change as well.

// file is an instance of File, e.g. from a file input.
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", '/pushfile', true);

xmlHttpRequest.setRequestHeader("Content-Type", file.type);

// Send the binary data.
// Since a File is a Blob, we can send it directly.
xmlHttpRequest.send(file);

For browser support, see: http://caniuse.com/#feat=xhr2 (most browsers, including IE 10+).

User · Answer

Following is a late but complete answer   FileReader methods support    FileReader readAsBinaryString   is deprecated  Don t use it  It s no longer in the W3C File API working draft   void abort    void readAsArrayBuffer Blob blob   void readAsText Blob blob  optional DOMString encoding   void readAsDataURL Blob blob     NB  Note that File is a kind of extended Blob structure   Mozilla still implements readAsBinaryString   and describes it in MDN FileApi documentation   void abort    void readAsArrayBuffer in Blob blob   Requires Gecko 7 0 void readAsBinaryString in Blob blob   void readAsDataURL in Blob file   void readAsText in Blob blob   optional  in DOMString encoding     The reason behind readAsBinaryString   deprecation is in my opinion the following  the standard for JavaScript strings are DOMString which only accept UTF-8 characters  NOT random binary data  So don t use readAsBinaryString    that s not safe and ECMAScript-compliant at all   We know that JavaScript strings are not supposed to store binary data but Mozilla in some sort can  That s dangerous in my opinion  Blob and typed arrays  ArrayBuffer and the not-yet-implemented but not necessary StringView  were invented for one purpose  allow the use of pure binary data  without UTF-8 strings restrictions   XMLHttpRequest upload support    XMLHttpRequest send   has the following invocations options   void send    void send ArrayBuffer data   void send Blob data   void send Document data   void send DOMString  data   void send FormData data     XMLHttpRequest sendAsBinary   has the following invocations options   void sendAsBinary    in DOMString body      sendAsBinary   is NOT a standard and may not be supported in Chrome   Solutions    So you have several options    send   the FileReader result of FileReader readAsArrayBuffer   fileObject    It is more complicated to manipulate   you ll have to make a separate send   for it  but it s the RECOMMENDED APPROACH  send   the FileReader result of FileReader readAsDataURL  fileObject    It generates useless overhead and compression latency  requires a decompression step on the server-side BUT it s easy to manipulate as a string in Javascript  Being non-standard and sendAsBinary   the FileReader result of FileReader readAsBinaryString  fileObject      MDN states that      The best way to send binary content  like in files upload  is using   ArrayBuffers or Blobs in conjuncton with the send   method  However    if you want to send a stringifiable raw data  use the sendAsBinary     method instead  or the StringView  Non native  typed arrays superclass

User · Answer

Use fileReader readAsDataURL  fileObject    this will encode it to base64  which you can safely  upload to your server

[javascript] fileReader.readAsBinaryString to upload files

Examples related to javascript

Examples related to encoding

Examples related to upload

Examples related to filereader