Downloading Blob via http using AngularJS and Angular-FileSaver.js

Question

I'm having a really hard time solving this problem. I've tried so many different solutions that I'm not sure where I need to fix now. I'm attempting to retrieve a Blob via http get and download the file for a user using FileSaver.js For some reason, every time I attempt to open the image I get a "damaged, corrupted, or is too large" message. I've attempted playing with the 'responseType' (changing to 'blob'), adding an 'Accept' to the header. Nothing seems to work for me!!

Can somebody maybe point me in the right direction?

Service

download: function(blobId, token) {
  var req = {
    method: 'GET',
    cache: false,
    url: 'api/Blob/DownloadBlob/' + blobId,
    headers: {
     'responseType': 'arraybuffer',
     'Authorization': token
    }
  };

  return $http(req)
    .then(function (response) {
      return response;
    }, function(response) {
      // something went wrong
      return $q.reject(response.data);
  });
}

Controller

$scope.downloadFile = function () {
  Data.download($scope.blobId, $scope.token).then(function (response) {
    var blob = new Blob([response], { type: 'image/png' });
    FileSaver.saveAs(blob, 'download.png');
  });
};

Answer 1

First two problems I can see are...

1. The responseType config property should not be in the headers object
2. You are passing the response object to the Blob constructor where you probably want to pass response.data.

I'd go with

return $http.get('api/Blob/DownloadBlob/' + blobId, {
  responseType: 'blob',
  headers: {
   Authorization: token
  },
  transformResponse: function(data) {
    return data // there's no need to attempt any transformations
  }
}).then(function(response) {
  return response.data // your provider consumers only need the blob data
})

and in your consumer...

Data.download($scope.blobId, $scope.token).then(function(blob) {
  FileSaver.saveAs(blob, 'download.png')
})