jQuery Ajax - downloading incomplete (binary) file

Question

This is what I have:

jquery/1.10.2

$.ajax({
    url: "http://samplepdf.com/sample.pdf",
    dataType: "text",
    data: "",
    success: function(data) {
        alert(data.length);
    },
    error: function(a, b, c) {}
});

When I run that locally (in Safari 6.0.5 on OS X), I get 211300. However, the actual file appears to be 218882 bytes. With something fully ASCII (such as http://www.angio.net/pi/digits/pi1000000.txt ), it seems to work correctly.

I don't need to download the file, but rather, work with its content.

Is there any way to make ajax work with binary files (either client side or server side) without resorting to using base64?

Answer 1

I think you need to use typed arrays . Javascript way of dealing with binary. There is no other way to deal with pure binary data. But with typed arrays you can do almost everything that you would want to do with binary anywhere else.

Sending Typed Array using Ajax

var myArray = new ArrayBuffer(512);
var longInt8View = new Uint8Array(myArray);

for (var i=0; i< longInt8View.length; i++) {
  longInt8View[i] = i % 255;
}

var xhr = new XMLHttpRequest;
xhr.open("POST", url, false);
xhr.send(myArray);

Receiving Typed Array

2 ways to do it... First

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

Second

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var blob = new Blob([oReq.response], {type: "image/png"});
  // ...
};

oReq.send();

Source: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

Using Jquery

Sending: $.ajax(url,{data:myArray});

Receiving: not tested...

$.ajax('https://dl.dropboxusercontent.com/u/139992952/coffee.png',{
    contentType: "arraybuffer",
    success: function(d){
        var blob = new Blob([d], {type: "image/png"}),
            u = URL.createObjectURL(blob);
    }
});

Answer 2

The worst wheel of the cart makes the most noise! go for a better solution here

http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

Demo here

http://jqueryfiledownload.apphb.com/

Fully tested on:
Internet Explorer 6 – 9
Firefox 11 – reasonably sure it will work on earlier versions
Chrome 17 – reasonably sure it will work on earlier versions

Remark : jQuery 1.3+ needed.

update:

Haven't tried though

$.ajax({
url: controllerUrl,
type: 'Get',
 contentType: "application/pdf",
 beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=UTF-8')
 //alert({ message: "Processing..." });
},
success: function (data) 
{ alert('Wga!'); 
 },
 complete: function (data) {
 alert('close');                                  
 },
error: function (jqXHR,textStatus) 
{ alert("whoops");    }