Monitoring separate upload progress within $q.all() in AngularJS

Question

Monitoring separate upload progress within $q.all() in AngularJS

I recently started using the angular-file-upload module created by danialfarid (https://github.com/danialfarid/angular-file-upload) and I must say, it's been a great experience so far.

After successfully integrating it into my wrapper service for REST calls, I have managed to upload multiple images simultaneously using $q.all() while monitoring their progress.

Despite this success, I've encountered an issue where I'm unable to properly identify individual images during the upload process because the file identifier keeps getting changed within the for loop.

      uploadPhotos: function (files) {

        var deferred = $q.defer()
        var queue = []

        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          var up = $upload.upload({
            url: locationURI +'/photos',
            file: file,
            fileFormDataName: 'image'
          }).then(
            function (data) {
              console.log(data)
            },
            function (err) {
              console.log(err)
            },
            function(evt) {
              // progress events
              console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
            }
          )
          queue.push(up)
        }

        $q.all(queue).then(
          function (data) {
            deferred.resolve(data)
          },
          function (err) {
            deferred.reject(err)
          }
        )

        return deferred.promise
      }

Unfortunately, the output I'm currently seeing is quite confusing:

    percent: 68 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 14 restfactory.js:359
    percent: 37 restfactory.js:359
    percent: 52 restfactory.js:359
    percent: 89 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 100 restfactory.js:359

Is there any solution you can suggest to help me achieve a clearer output like this:

    file1 - percent: 68 restfactory.js:359
    file1 - percent: 100 restfactory.js:359
    file2 - percent: 100 restfactory.js:359

javascript ajax angularjs q angular-file-upload

Answer 1

Answer №1

Working with closures within loops can be challenging. If you close on the loop variable, it will always retrieve the last value. Instead, consider calling another function within the loop:

for (var i = 0; i < files.length; i++) {
    var upload = performUpload(files[i]);
    queue.push(upload);
}

The performUpload() function should contain your original code, returning the promise and utilizing the correct file (assuming file.name contains the file name):

function performUpload(file) {
      var upload = $upload.upload({
        url: locationURI +'/photos',
        file: file,
        fileFormDataName: 'image'
      }).then(
        function (data) {
          console.log(data)
        },
        function (err) {
          console.log(err)
        },
        function(evt) {
          // progress events
          console.log(file.name + ' percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }
      );
      return upload;
}

Answer 2

Working with closures within loops can be challenging. If you close on the loop variable, it will always retrieve the last value. Instead, consider calling another function within the loop:

for (var i = 0; i < files.length; i++) {
    var upload = performUpload(files[i]);
    queue.push(upload);
}

The performUpload() function should contain your original code, returning the promise and utilizing the correct file (assuming file.name contains the file name):

function performUpload(file) {
      var upload = $upload.upload({
        url: locationURI +'/photos',
        file: file,
        fileFormDataName: 'image'
      }).then(
        function (data) {
          console.log(data)
        },
        function (err) {
          console.log(err)
        },
        function(evt) {
          // progress events
          console.log(file.name + ' percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }
      );
      return upload;
}

Monitoring separate upload progress within $q.all() in AngularJS

Answer №1

Similar questions

When using Array.prototype.map(callback, thisArg), the second parameter is disregarded

How does gray-matter function in Node.js affect the matter within?

Currently working on integrating a countdown timer using the Document Object Model (DOM)

Transfer data accurately from main window to fancybox iframe

After clicking a button in AngularJS, how can you retrieve one of the two JSON files and store it in a $scope variable?

Saving MongoDB query results to a file using the built-in Node.js driver

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

AngularJS attempting to conceal the popup menu upon clicking outside of the designated area

Discover the power of the LIKE clause in MySQL for advanced search capabilities

interactive textbox created with the combination of javascript and php

Is it possible to merge string and span elements to create a unified element?

A guide on verifying the creation of an Angular service through Jasmine testing

Difficulty organizing form inputs into arrays prior to submitting them through AJAX

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

What is the best way to automatically change a variable in an AngularJS $scope?

A guide to organizing page components across multiple `/pages` directories in a Next.js application

Choose an option with JavaScript once the request is successful

I used npm to install a package, but for some reason, it's not appearing in

The jQuery ajax request was unsuccessful in connecting to the remote server

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead