Angular chaining promises from foreach loop

Question

I have an array of photo files that needed to upload to Azure Cloud Storage, and i using foreach loop to call upload as below:

$scope.savetemplate = function () { 
     var imagePathsArray = [];

     $scope.filesimage = [];
     $scope.filesimage.push($scope.file1);
     $scope.filesimage.push($scope.file2);
     $scope.filesimage.push($scope.file3);


    for (var i in $scope.filesimage) {
        $scope.upload($scope.filesimage[i]);
    }


    $scope.data.Images = imagePathsArray ;

     $http({
              //after finish uploads i need to post the paths 
              //of all images to save into database
     })
 };


$scope.upload = function (file) {
  Upload.upload({
       url: '/uploadImage',
       data: { file: file }
    }).then(function (resp) {
       imagePathsArray.push(resp.data);

    })
};

resp.data returns azure storage path and i need to push the paths into the imagePathsArray

How can i uses Angular Promise to wait for upload all the files finished and all the paths are stored in the imagePathsArray so i can proceed with

 $scope.data.Images = imagePathsArray ;

so that i can get the paths in the array and perform $http post?

Michael · Accepted Answer · 2015-11-18 07:15:14Z

3

You can do that with $q.all.

var promises = [];
for (var i in $scope.filesimage) {
    promises.push(upload($scope.filesimage[i]));
}
$q.all(promises).then(function() {
    $scope.data.Images = imagePathsArray ;

    $http.post({
          //after finish uploads i need to post the paths 
          //of all images to save into database
    });
});

function upload(file) {
    return Upload.upload({
       url: '/uploadImage',
       data: { file: file }
    }).then(function (resp) {
       imagePathsArray.push(resp.data);
    })
};

answered Nov 18, 2015 at 7:15

Michael

3,1141 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mentos Over a year ago

Hi Micheal! Your solution works like a charm! Thank You!

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

In the success callback of the upload function, after pushing the path:

imagePathsArray.push(resp.data);
if(imagePathsArray.length == $scope.filesimage.length){
  pushtoDatabase();
}

Inside pushtoDatabase call the $http({ .... });

NOTE : You might like to consider the probability of the upload getting failed. In that case you can work-around using a counter of failed files say failCounter , and then inside the if check for the condition

if ((imagePathsArray.length + failCounter) == $scope.filesimage.length){....}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 18, 2015 at 7:12

Sujeet Jaiswal

1,0897 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular chaining promises from foreach loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related