Progress bar


#1

How to show progress bar in percentage when file downloading.
Thanks in Adavance


#2

You can use this technique to be able to hook into $http’s progress events:

Then you can use this AngularJS component to show a circular progress indicator (AngularJS components for a linear progress bar also exist of coure, just google for it):

Details: to be able to hook into $http’s progress events, add a config method like this to the main JS file of your Ionic app:

  .config(function() {
    //
    // Register an in-progress event handler on $http's underlying XMLHttpRequest object.
    // Especially useful to display a progress indicator (progress bar) when using $http to upload large files.
    //
    // Taken from:
    //
    // http://www.boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/
    //
    // and see also (related article):
    //
    // http://www.boylesoftware.com/blog/angular-tip-http-request-progress/
    //
    // NOTE: from AngularJS 1.5.4 onwards this hack isn't needed anymore, $http has a builtin progress listener, see:
    // http://stackoverflow.com/questions/36622826/angular-1-5-4-http-progress-event
    //
    XMLHttpRequest.prototype.setRequestHeader = (function(sup) {
      return function(header, value) {
        if ((header === "__XHR__") && angular.isFunction(value))
          value(this);
        else
          sup.apply(this, arguments);
      };
    })(XMLHttpRequest.prototype.setRequestHeader);
  })

Then to use it in you service or controller add code similar to the following (this is an HTTP POST example for file uploads but it would work as well for HTTP GET for file downloads):

        //
        // "__XHR__" header: this is a "hack" to register an in-progress event handler on $http's underlying $xhr
        // (XMLHttpRequest) object. Useful to display a progress indicator when using $http to upload large files.
        //
        // See also the code in the app's main JS file to set "XMLHttpRequest.prototype.setRequestHeader".
        //
        // Technique taken from:
        //
        // http://www.boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/
        //
        var headers = {
          "Content-Type": undefined,
          __XHR__: function() {
            return function(xhr) {
              xhr.upload.addEventListener("progress", function (event) {
                 $log.log("UPLOAD FILES - loaded " + ((event.loaded/event.total) * 100) + "%");
              })
            };
          }
        };

        $http.post(url, data, {
          transformRequest: angular.identity,
          headers: headers
        })
        .success(function (response) {
          deferred.resolve(response);
        })
        .error(function (error) {
          deferred.reject(error);
        });