Cannot access $scope variable from $upload

Question

I'm very new to AngularJS and I need to implement a multiple file uploader.

I'm using danialfarid/angular-file-upload and the upload works great. However, I'm facing problems when it comes to updating my $scope.selectedFiles with the current upload progress.

Here is a fragment of my code:

angular.module('myApp', ['angularFileUpload', 'ui.bootstrap']);   
var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {

    // ...

    // This array store multiple files the user wants to upload     
    $scope.selectedFiles = [];

    // Here the upload happens      
    $scope.uploadFiles = function() {
        var files = $scope.selectedFiles;
        for (var i = 0; i < files.length; i++) {
            var file = files[i].fileObject;
            $upload.upload({
                    //...
            }).progress(function(evt) {
                // p === current progress, this is working fine
                var p = parseInt(100.0 * evt.loaded / evt.total));
                // HERE IS THE ISSUE
                // $scope.selectedFiles === undefined
                // I need to find out a way to update $scope.selectedFiles[i].progres with the current progress....
                var p = parseInt(100.0 * evt.loaded / evt.total);
                console.log('$scope.selectedFiles: ' + $scope.selectedFiles); //[object Object]
                console.log('$scope.selectedFiles[i]: ' + $scope.selectedFiles[i]); //undefined
                console.log('$scope.selectedFiles[i].progress: ' + $scope.selectedFiles[i].progress); //Error: $scope.selectedFiles[i] is undefined
                $scope.selectedFiles[i].progress = p;
            })
        // ...

Any help?

Thanks

Anthony Chu · Accepted Answer · 2014-04-04 17:09:42Z

1

Is it really $scope.selectedFiles that is undefined? It looks like it might be the use of loop variable i that is causing $scope.selectedFiles[i] be undefined. At the point where you're having the problem, i is files.length which is outside the bounds of the array when used as an index.

Try extracting the upload file code to a function so that it forms a proper closure over the variables in the loop...

$scope.uploadFiles = function() {
    var files = $scope.selectedFiles;
    for (var i = 0; i < files.length; i++) {

        uploadFile(files[i]);

    // ...

function uploadFile (selectedFile) {
    var file = selectedFile.fileObject;
    $upload.upload({
            //...
    }).progress(function(evt) {
        var p = parseInt(100.0 * evt.loaded / evt.total));
        selectedFile.progress = p;
    });
}

answered Apr 4, 2014 at 17:09

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

3 Comments

Rafa Over a year ago

Just added a console.log there to see exactly what is going on. It returned: $scope.selectedFiles: [object Object]

Anthony Chu Over a year ago

Definitely sounds like it's the use of i then. Inspect the value of i and you should see the problem.

Rafa Over a year ago

Thanks Anthony, I think I need a coffee or something to wake me up! I was with my attention on AngularJS and turns out that it is just an ordinary JavaScript mistake.

Collectives™ on Stack Overflow

Cannot access $scope variable from $upload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related