How to handle file download errors with angularjs?

Question

Downloading files looks very trivial and there are many working solutions. Working until the server says 401 UNAUTHORIZED. My requirements are rather natural:

• In no case the current window may be replaced.
• I don't want to open a new window, as it makes no sense.
• In case of an error, some message must be shown to the user.

I tried to use an iframe as a target of the link and hoped to be notified in case of an error. I see I was naive.

• I could imagine to place some script in the iframe which would notify main page onunload. It look a bit complicated so I'm asking first instead.
• I could ask the server about the outcome. This would surely work, somehow. But it's complicated too, as there's timing problem and the session is expired, so I'd have to circumvent this.

Answer 1

You could handle HTTP errors without it interrupting your controller / service logic by making use of HTTP interceptors. When an error happens, handle it in an interceptor and then broadcast the error to an error handler, which could display an error to the user.

$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
    return {
       'request': function(config) {
        // same as above
        },

        'response': function(response) {
        // same as above
     }
  };

});

Answer 2

You can use a Blob object to trigger file download from javascript. This is introduced with the File API and still in Working Draft state. So you'll have limited browser-support. As of 2015, you have wide browser support for Blob URLs and Blob Constructor.

<div ng-controller="appController" ng-app="app">
    <a ng-href="{{ fileUrl }}" download="file.txt">download</a>
</div>

var app = angular.module('app', []);

// Angular prepends "unsafe" tag in ng-href to prevent XSS
// so we need to sanitize this
app.config(['$compileProvider', function ($compileProvider) {
    // for Angular 1.0.x and 1.1.x, you should use urlSanitizationWhitelist
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob|ftp):/);
}]);

app.controller('appController', function ($scope, $window) {
    // Creating a Blob with our data for download
    // this will parse the URL in ng-href such as: blob:http...
    var data = 'some data here...',
        blob = new Blob([data], { type: 'text/plain' }),
        url = $window.URL || $window.webkitURL;
    $scope.fileUrl = url.createObjectURL(blob);
});

See a demo fiddle here.

There are some libraries to extend browser support for this such as Blob.js

You should also check out FileSaver.js which also falls back to data:URI.