title: AngularJS: tracking status of each file being uploaded simultaneously
body: <p>Upon pressing a submit button, an array of files (<code>$scope.files</code>, can be as little as one file, as many as the user wants) gets submitted via <code>FormData</code> and <code>XMLHttpRequest</code> in my angular function <code>$scope.uploadFiles</code>:</p>
  
  <pre><code>$scope.uploadFiles = function() {
      for (var i in $scope.files) {
          var form = new FormData();
          var xhr = new XMLHttpRequest;
  
              // Additional POST variables required by the API script
          form.append('destination', 'workspace://SpacesStore/' + $scope.currentFolderUUID);
          form.append('contenttype', 'idocs:document');
          form.append('filename', $scope.files[i].name);
          form.append('filedata', $scope.files[i]);
          form.append('overwrite', false);
  
          xhr.upload.onprogress = function(e) {
              // Event listener for when the file is uploading
              $scope.$apply(function() {
                  var percentCompleted;
                  if (e.lengthComputable) {
                      percentCompleted = Math.round(e.loaded / e.total * 100);
                      if (percentCompleted &lt; 1) {
                                              // .uploadStatus will get rendered for the user via the template
                          $scope.files[i].uploadStatus = 'Uploading...';
                      } else if (percentCompleted == 100) {
                          $scope.files[i].uploadStatus = 'Saving...';
                      } else {
                          $scope.files[i].uploadStatus = percentCompleted + '%';
                      }
                  }
              });
          };
  
          xhr.upload.onload = function(e) {
              // Event listener for when the file completed uploading
              $scope.$apply(function() {
                  $scope.files[i].uploadStatus = 'Uploaded!'
                  setTimeout(function() {
                      $scope.$apply(function() {
                          $scope.files[i].uploadStatus = '';
                      });
                  }, 4000);
              });
          };
  
          xhr.open('POST', '/path/to/upload/script');
          xhr.send(form);
      }
  
  }
  </code></pre>
  
  <p>The problem is that <code>var i</code> increments in the initial for loop for each file, and by the time the event listeners fire, <code>i</code> has already incremented past the intended <code>files[i]</code> value needed, only effecting the last in the array.  I use <code>.uploadStatus</code> as a means to interactively show the progress of each individual file to the user, therefor I would need to have separate event listeners for each array element in <code>$scope.files</code>.  How would I assign and track events for individual array elements in Angular?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <hr>
  
  <p>I reworked the two event listeners, with a little success, but I'm still experiencing odd behavior:</p>
  
  <pre><code>xhr.upload.onprogress = (function(file) {
      // Event listener for while the file is uploading
      return function(e) {
          $scope.$apply(function() {
              var percentCompleted = Math.round(e.loaded / e.total * 100);
              if (percentCompleted &lt; 1) {
                  file.uploadStatus = 'Uploading...';
              } else if (percentCompleted == 100) {
                  file.uploadStatus = 'Saving...';
              } else {
                  file.uploadStatus = percentCompleted + '%';
              }
          });
      }
  })($scope.files[i]);
  
  xhr.upload.onload = (function(file, index) {
      // Event listener for when the file completed uploading
      return function(e) {
          $scope.$apply(function() {
              file.uploadStatus = 'Uploaded!'
              setTimeout(function() {
                  $scope.$apply(function() {
                      $scope.files.splice(index,1);
                  });
              }, 2000);
          });
      }
  })($scope.files[i], i);
  </code></pre>
  
  <p><code>.onprogress</code> seems to go off without a hitch, but with some small changes made to <code>.onload</code>, I am now seeing a lot of weird behavior with AngularJS's two-way binding for its templates.  for each elemnt in array <code>$scope.files</code> a status is given, using the the aforementioned <code>.uploadStatus</code> property.  Now I am having the <code>setTimeout</code> splice the elements from the array, via the <code>i</code> variable that's getting passed in to the self-executing function.  Oddly enough the uploads are capping at around 6 simultaneous uploads at a time now, that must be a server side issue, but I'm noticing that as array elements are getting spliced, the <code>ng-repeat</code> in the template is acting bizarrely where it will splice <em>an</em> element, not necessarily the ones it should.  I've also noticed that there are often entries that do not get spliced after the 2000 millisecond threshold is hit.</p>
  
  <p>This is reminiscent of the original problem where the variable <code>i</code> is unreliable when referenced throughout the triggering of the event listeners?  Now I am passing it in to the anonymous self-executing <code>.onload</code> function, and the splice is using it to determine what array element it should remove, but it isn't necessarily removing the correct one, and often leaving other elements in the array when it should be removing them.</p>