How do you handle download link that requires Authorization token using Angular?

Question

I have a REST API that I'm using alongside Angular. Currently I have post objects that have file attachments. To download each file attachment, a call must be made to /get/file/{id}, but an authorization token is required each time to convey the user is logged in and has proper rights.

After much searching, I ended up with the following setup using Angular-File-Saver (which uses FileSaver.js and Blob.js):

feed.html

<p class="post-attachments text-right" ng-repeat="file in post.files">
 <button type="button" class="btn-link" ng-click="feed.getFile(file)">{{file.name}}</button>                        
</p>

feed.controller.js

function getFile(file) {
    var file_id = file.id;

PostService.GetFile(file_id).then(function(response) {
    var file_type = response.headers('Content-Type');
    var data = new Blob([response.data], {type: file_type});

    FileSaver.saveAs(data, file.name);
}, function error(response) {
    console.log(response);
});

}

While this sort-of works, there's a few big problems. Because this is different from just using an anchor link like <a href="link.com/assets/stockphoto.jpeg" download></a>, it's really a hack on downloading a file and results in poor browser support. Safari and mobile iOS don't currently work with this solution (Safari opens the file in a new window using blob:http://siteaddress.com and mobile Safari doesn't even load the file).

Additionally, there's no browser support for a progress indication. This means clicking the download doesn't actually do anything until the API returns the entire download, where the file is then shown in the browser downloads section. This results in wait times without any indication of what's happening.

What I'm wondering is this--is there a better way to handle this problem besides not requiring an authorization token each time the /get/file/{id} endpoint is called? I'm bashing my head against the wall here since this seems like a common issue but has been difficult to find answers on.

Tyler Tyler · Accepted Answer · 2016-02-23T05:03:15

You can use angular's $http to make your request:

makeRequest = function(req){ 
  $http(req)
  .success(function(data, status){
     console.log(data)
  })
  .error(function(data, status){
     console.log(data)
  })
}

// Use it
makeRequest({
  method: 'POST',
  url: ('/get/file/' + id),
  headers: { authorization: token }
})

How do you handle download link that requires Authorization token using Angular?

1 Answers