ng-file-upload with multiple file upload and progress bar

I want to upload multiple files to rails server and want to show separate progress bar for each files. I am using ng-file-upload to upload files. files are getting uploaded but it showing progress for only last file and not for others..I am attaching my code. please help.

Angular controller code:

$scope.upload_file = function() {

    var files = $scope.files;
    var uploadUrl = base_url+"/upload_image";
    var job_id = $scope.directive.id;
    if(current_user.role == "third_party_vendor" || current_user.role == "employee")
    {
        var source = current_user.user_login+"-"+current_user.role;   
    }
    else
    {
        var source = $scope.dataObj.source["user_login"]+"-"+$scope.dataObj.source["role"];
    }

    if(job_id === "" || job_id === undefined || files === undefined || files === ""){
        error_notification("Please select a job and a file.");
        return;
    }
    hideLoader();
    $("#upload_resume_queue").modal('show');

    var formData = new Array();
    formData['job_id'] = job_id;
    formData['context'] = "inside_page";
    formData['source'] = source;

    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      console.log(file.name);
      $scope.upload = $upload.upload({
        url: uploadUrl, 
        data:{myObj: formData},
        file: file, 
      }).progress(function(evt) {
        //console.log('percent: ' +parseInt(100.0 * evt.loaded / evt.total));


                file.progress = Math.round(evt.loaded * 100 / evt.total)


      }).success(function(responseText) {
        hideLoader();
        try{
            var response = responseText;
        }catch(e){
            error_notification("Invalid Excel file Imported.");
            return;
        }
        if(response.status==='wrong_content_type')
            error_notification("Please upload a valid file format.",0);
        if(response.status==='job_application_present'){
            $scope.duplicate = true;
            $scope.jobID = job_id;
            $scope.user_id = response.user_id;
            $scope.application_id = response.application_id;
            //showModal('#duplicate_application_modal');
            error_notification("Job Application already present for this user and job.",0);
        }
        if(response.status==='invalid_email')
            error_notification("The email in the resume is an invalid one.",0);
        if(response.status==='success')
            success_notification("The uploaded resume has been parsed.",0);
      });
    }
  };

Html code:

<input type="file" class="required file_browse" ng-file-select="" ng-model="files" multiple />


ANSWERS:


I am not able test the following but, I think I found what is wrong.

In JavaScript variables are scoped to functions. So, in your for loop you change value of file in var file = files[i]; line. At the end, after for loop finished the value of file is the last file.

At some point .progress event is fired by ng-file-upload to notify you about progress (for one of the files). And you update the status, but, since file has the value of the last file, not the one you expected to be, the last file's status is being updated.

That's why only the last file updated. To solve, you need to access the correct file for each progress event. To do this, you can keep file variable using an anonymous function.

for (var i = 0; i < files.length; i++) {
  (function(file) {
    console.log(file.name);
    $scope.upload = $upload.upload({
      url: uploadUrl, 
      data:{myObj: formData},
      file: file, 
    }).progress(function(evt) {
      //console.log('percent: ' +parseInt(100.0 * evt.loaded / evt.total));
      file.progress = Math.round(evt.loaded * 100 / evt.total)
    }).success(function(responseText) {
      // the other stuff
    });
  })(files[i])
}

In your code there may be other problems related to variable scopes and javascript event loop. For more information please take a look at this.



 MORE:


 ? Why does console.log outside "for" loop print out an "extra" number?
 ? $http success callback in factory not running when there's an infinite loop in run block
 ? for loop declaration, are those two statements equal?
 ? Loop through array to factorize javascript code
 ? Clarification of JavaScript variable scope
 ? JS loop variable scope
 ? JavaScript variable scope return "undefined"
 ? Scope of For Loop Variable Javascript
 ? javascript scope reference variable
 ? javascript scope reference variable