Dynamically add a class while files are being downloaded

Question

I have a link which downloads some files to the user's computer when clicked. Beside this link I have a download icon. I would like the download icon to be replaced by a spinning wheel icon just while the files are downloading, then revert to the original icon when download is done. Here is the code:

span.fa.fa-icon-only.fa-fw.fa-download.bigger-120.black
a(href='#', ng-click='download_batch($event, \'original\');') 

Is there an easy way to change the class on the span while the download takes place?

Answer 1

Your trouble is going to be by trying to monitor when the download is finished. There is no javascript api for that. This is a hack between server and client to make this work using cookies:

Detect when browser receives file download

So I'd do something like this:

<a ng-repeat="file in files" 
   ng-href="file.url" 
   ng-click="startDownload(file.token)"
   ng-class="{'spinner-icon': activeChecks[file.token], 'normal-icon': !activeChecks[file.token] }">
     {{file.name}}
</a>

Controller:

app.controller("MyController", [ '$scope', '$interval', '$cookies', 'SomeService', function($scope, $interval, $cookies, SomeService) {
   $scope.activeChecks = {};
   $scope.files = [];

   $scope.loadFiles = function() {
       SomeService.getDownloads().success( function(result) {
          $scope.files = result.files;
          // each file would follow something like:
          // { url: 'http://someblah/path/to/file?token=$token', token: $token, name: 'Some Name' }
       });
   }

   $scope.startDownload = function( token ) {
      $scope.activeChecks[token] = $interval(lookForToken(token), 5000);
   };

   $scope.lookForToken = function( token ) {
      return function() {
         var found = $cookies[token];
         if( found ) {
            $interval.cancel($scope.activeChecks[token]);
            $scope.activeChecks[token] = null;
         }
      }
   };
}]);