javascript - Progress is displayed only for the last item in the queue. ngFileUpload

Question

I'm using AngularJS (1.2.28) and ng-file-upload directive (7.0.17). On the backend there's a WCF service hosted in IIS 7.

I'm trying to display a progress bar per uploaded file and here's my code:

uploadsController

controller('uploadsController', ['$scope', 'Upload', function($scope, Upload) {
    $scope.upload = [];

    $scope.select = function(files) {
        for(var i = 0; i < $scope.files.length; i++) {
            files[i].progress = 0;
        }
    }

    $scope.submit = function() {
        for(var i = 0; i < $scope.files.length; i++) {
            var $file = $scope.files[i];
            (function(index) {
                $scope.upload[index] = Upload.upload({
                url: "/documents-manager/UploadsService.svc/upload", 
                    method: "POST",
                    file: $file
                }).progress(function(evt) {
                    $file.progress = parseInt(100.0 * evt.loaded / evt.total);
                });
            })(i);
        }
    }
}

corresponding markup

<div ngf-select="select($files)" ng-model="files" ngf-multiple="true">search</div>

<tbody>
    <tr ng-repeat="file in files">
        <td>
            <div>{{ file.name }}</div>
            <div class="progress">
                <span class="meter" style="width:{{ file.progress }}%;"</span>
            </div>
        </td>
    </tr>
</tbody>

the problem

The progress is getting displayed only for the last file in the queue. What is wrong?

Answer 1

$file variable that you are using to set the progress is being overwritten by the last file that's why you see the progress on the last file. Use the index to access the correct file instead:

    for(var i = 0; i < $scope.files.length; i++) {
        var $file = $scope.files[i];
        (function(index) {
            $scope.upload[index] = Upload.upload({
            url: "/documents-manager/UploadsService.svc/upload", 
                method: "POST",
                file: $file
            }).progress(function(evt) {
                $scope.files[index].progress = parseInt(100.0 * evt.loaded / evt.total);
            });
        })(i);
    }