downloading file from Node.js server with Ajax call gives truncated data and bloated blob

Question

I have a problem downloading a file from a Node.js server (using Express). The request is handled properly and the response.download file is called on an existing file. But when the data is received in the client, not all data is received and the blob created from it is bloated to almost twice the size.

The server part (Node.js using Express), where i route a post to /php/mixMovie.php, a re-implementation of an existing backend, is this:

app.post( '/php/mixMovie.php', function( request, response ){
    ....
    console.log( 'serving ' + destFile );
    fs.stat( destFile, function (err, stats) {
        console.log(stats.size);
    });
    response.download( destFile );
 });

giving the console output:

serving /Users/j/[...]/WTSc5e8f500-ad76-4fe5-b368-3a0f3e848813.ogg
326049
serving /Users/j/[...]/WTSc5e8f500-ad76-4fe5-b368-3a0f3e848813.ogg
326049
...

the client has this javascript code:

$.ajax({
    type: 'POST',
    url: 'http://localhost:8000/php/mixMovie.php',
    data: fd,
    processData: false,
    contentType: false
} ).done( function( data ){
    console.log( data.length );
    var bb = new Blob( [ data ], { type:'movie/ogg' } );
    console.log( bb.size );
} );

giving this surprising output:

XHR finished loading: ("http://localhost:8000/php/mixMovie.php"). jquery-1.8.3.js:8434
314947
600641
XHR finished loading: ("http://localhost:8000/php/mixMovie.php"). jquery-1.8.3.js:8434
315028
600737
XHR finished loading: ("http://localhost:8000/php/mixMovie.php"). jquery-1.8.3.js:8434
315020
600439
XHR finished loading: ("http://localhost:8000/php/mixMovie.php"). jquery-1.8.3.js:8434
315026
600421

Does anyone know what's going on here ?

thanks,

J

Just checking. Your links are in php, so is the output correct. Is there an Apache server in between? — user568109, Aug 28 '13 at 04:46

score 1 · Accepted Answer · edited May 23 '17 at 12:28

I think what's going on here is that the data variable in this call:

  $.ajax({
      type: 'POST',
      url: 'http://localhost:8000/php/mixMovie.php',
      data: fd,
      processData: false,
      contentType: false
  } ).done( function( data ){
      console.log( data.length );
      var bb = new Blob( [ data ], { type:'movie/ogg' } );
      console.log( bb.size );
  } );

is of type String (you can verify this with a simple console.log(typeof data)). When you construct the Blob, it sees your data as String and goes about encoding it as a series of UTF-8 characters, then calls getBytes() and returning the result (see section 6.1.4.2 here: http://www.w3.org/TR/FileAPI/#dfn-Blob).

This has the effect of nearly doubling the data size and making the resulting file unusable (unless it actually is a String!).

As to what to do to fix it, maybe you could try converting your data to any ArrayBuffer as described here: Does jQuery $.ajax or $.load allow for responseType arrayBuffer?

That may very well be the solution, thanks. I'll check it as soon as I have time and accept if correct.. — Jochem Van Der Spek, Jan 30 '14 at 21:33

downloading file from Node.js server with Ajax call gives truncated data and bloated blob

1 Answers1