Detect progress of Async file(s) upload in AngularJS

Question

I am trying to upload my file(s) on server once opened. I have a function in my service and calling that service to upload my file(s). This is my service function.

function post(file) {
var file = file;
if (angular.isDefined(file)) {
  return Upload.upload({
    url: filesConfig.uploadFile,
    data: {
      file: file
    }
  }).then(function (response) {         
      return response;
    },
    function (error) {
      return error;
    },
    function (evt) {
      var progress = parseInt(100.0 * evt.loaded / evt.total);         
      console.log('progress: ' + progress + '% ' + evt.config.data.file.name);
    });
}


 }

In last evt arg function I am getting progress in variable. I am calling this post function from controller like this.

 angular.element(document.querySelector('#fileinput')).on('change', function () {
for (var i = 0; i < this.files.length; i++) {
  vm.filess.push(this.files[i]);
  fileUpload.post(vm.filess[i]).then(function (response) {  
    console.log(response);  
  });
}
 });

Now I want to detect progress of each file in my controller, to show progress bar in UI. How to detect progress?

1 - Use a callback that you send as param to post(file, callback) and then execute callback on every progress change; or 2 - Use pub/sub to dispatch an event every time the progress changes and then subscribe to this event in your controller; or 3 - use a mediator/manager/service object that keeps reference to this progress and update it on every step and then inject this reference into your controller and play with it; or 4 - update reference for file with the progress value such as file.progress = progress inside your service - not quite intuitive though — Nicolae Olariu
– Nicolae Olariu, Commented Mar 29, 2017 at 7:08

Nicolae Olariu · Accepted Answer · 2017-03-29 08:04:19Z

Quickest and somehow dirtiest solution is below.

In controller:

angular.element(document.querySelector('#fileinput')).on('change', function() {
  for (var i = 0; i < this.files.length; i++) {
    var item = {
      file: this.files[i]
    }; 

    vm.filess.push(item);

    fileUpload.post(item).then(function (response) {  
      console.log(response);  
    });
  }
});

In service:

function post(item) {
  var file = item.file;

  if (angular.isDefined(file)) {
    return Upload.upload({
      url: filesConfig.uploadFile,
      data: {
        file: file
      }
    }).then(function (response) {         
        return response;
      },
      function (error) {
        return error;
      },
      function (evt) {
        item.progress = parseInt(100.0 * evt.loaded / evt.total);
      });
  }
}

Doing that, you're wrapping your file within an item object, keeping file as property on that object. In your service, you're directly modifying the reference for your item.

On view, you just need to loop through vm.filess and you can access the dynamically property progress added.

Is not the best solution, I think that's the quickest I can think of with your setup.

Collectives™ on Stack Overflow

Detect progress of Async file(s) upload in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related