How to manage responseType = 'blob'

[montesq]

I call an API endpoint that returns a file. As you can see below, I success to implement a full javascript snippet to download the file using xhr :

    window.URL = window.URL || window.webkitURL;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', Restangular.one('attachments', idAtt).getRestangularUrl(), true);
    xhr.setRequestHeader('X-Auth-Token', 'token');
    xhr.responseType = 'blob';

    xhr.onload = function(e) {
        if (this.status == 200) {
            var blob = this.response;
            var url= window.URL.createObjectURL(blob);
            window.open(url);
        }
    };
    xhr.send();

But now, I would like to use only Restangular instead! However, it doesn't seem to be possible setting the responseType to 'blob'...
I've tried to convert the text response to blob, but I finally get a corrupted file at the end.
Has someone already solved this kind of problem?

[mgonto]

Do you know how to do this with $http? If you do, I can tell you how to do it with Restangular from that :)

[mgonto]

It should actually work from Angular 1.2.5 and above :) angular/angular.js#1013

What angular version are you using?

[mgonto]

With 1.2.5, you should be able to do:

Restangular.one('attachments', idAtt).get({}, {"X-Auth-Token": 'token'}).then(function(response) {
  // Response is the blob :)
});

[mgonto]

Let me know if it does :)

[montesq]

Thank you for your prompt answer! Here is the $http solution :

    $http({method: 'GET', url: Restangular.one('attachments', idAtt).getRestangularUrl(),
        headers: {'X-Auth-Token': token}, responseType: 'blob'}).then(function(response) {
        var url = (window.URL || window.webkitURL).createObjectURL(response.data);
        window.open(url);
    });

But can't find in the restangular documentation where to define the responseType attribute ^^

[montesq]

In fact, the solution that you've suggested doesn't work because the response is not a blob (that is why it is necessary to put the additional attribute responseType: 'blob' with the $http solution)

[mgonto]

Then do:

Restangular.one('attachments', idAtt).withHttpConfig({responseType: 'blob'}}.get({}, {"X-Auth-Token": 'token'}).then(function(response) {
  var url = (window.URL || window.webkitURL).createObjectURL(response);
  window.open(url);
});

[mgonto]

Did that work?

[montesq]

Thank you for the answer! I'm currently at work, let me try this this evening (in 12hours) ;)

[montesq]

I guess you will not be surprised if I tell you that everything works fine ;)
Thank you again for your job!

[mgonto]

That's awesome :).

withHttpConfig is used to set $http config that you want to be used for the following API call. It's useful for "not so common" cases like this one :).

[psmichalek]

How to set the appropriate MIME type? Right now showing as 'application/unknown' with some very strange file name.

[vishwajeetv]

In my case, response type is not blob , it's application/pdf . How can I appropriately manage to download the response (which is pdf file) ??

[devjon]

@vishwajeetv : stuck on the same problem. Any heads up ??

[felixfbecker]

responseType is just what the type the response should be in your JS. Blob is for everything binary like a pdf or image. You can download it for example by constructing a link with URL.createObjectUrl() and then pointing an <a download=""> to it and clicking it, with window.open(), display it in iframe, etc etc

[DmitryGonchar]

In my case $window.open() resulted in "popup blocked" browser message, but
$window.location.href = url; worked perfectly (no message)

[luanntvn]

blob would work but I use arraybuffer to be able to decoded error response to json if any

Restangular.one('downloadPDF')
            .withHttpConfig({ responseType: 'arraybuffer' })
            .get()
            .then(function (response) {
                var fileName = 'file.pdf';
                var a = document.createElement('a');
                document.body.appendChild(a);
                a.style = 'display: none';
                var file = new Blob([response], {type: 'application/pdf'});
                var fileURL = (window.URL || window.webkitURL).createObjectURL(file);
                a.href = fileURL;
                a.download = fileName;
                a.click();
                (window.URL || window.webkitURL).revokeObjectURL(file);
            }, function (response) {
                //error
            });

[doubl3p]

you also can use the paket "angular-file-saver" and use it in the "then block":

Restangular.one('downloadExcel')
  .withHttpConfig({ responseType: 'arraybuffer' })
  .get().then(function(response) {
  
    var blob = new Blob([response], {
      type: "application/vnd.ms-excel ; charset=charset=utf-8"
    });
    saveAs(blob, "MyExcel.xls");

}, function (response){
  //error
});

type depends on your case: excel, pdf, etc.

[kennlebu]

Using withHttpConfig({responseType: 'blob'}) kept giving me an error The selected responseType is not supported

withHttpConfig({responseType: ResponseContentType.Blob}) worked for me instead.