Angular File Upload Callback

Question

Really struggling with this at the moment so if anyone had any advice that would be fantastic. Pretty sure it's a case of me over complicating something simple but we'll see!

Using the following to upload files to a server

https://github.com/nervgh/angular-file-upload/wiki/Module-API

I am creating several instances of a file uploader for certain types of files (can't just use one as I need different upload URLs for each)

So I then have a list like

var uploaders = [a list of file object uploaders]

What I want to do is iterate over the list, call uploadAll() on each one, then once the files for each have been uploaded, continue the script.

The problem is I don't think the uploadAll function implements a promise, so when I try the following code the rest of the script continues on before the files have been successfully uploaded.

Heres what I have

var deferred = $q.defer();

var uploaders = [my list of object uploaders]

var allUploads = uploaders.map(function(uploaders) {
    var singleUploadPromise = uploaders.uploadAll();
    return singleUploadPromise;
}); 



$q.all(allUploads).then(function() {    
    console.log('Finished uploading all files')
    deferred.resolve('Finished uploading all files');
}, function(error) {
    deferred.reject(error);
});

return deferred.promise;

The files get uploaded but the rest of the script carries out before they do. When I

console.log(allUploads)

I get a list of undefined items. So clearly I am going wrong here but I am unsure as to how to move forward.

I'm not the best at ES6 but I don't think that uploadAll() returns anything github.com/nervgh/angular-file-upload/blob/master/src/services/… — ChrisY
– ChrisY, Commented Jan 19, 2016 at 13:46

Shel · Accepted Answer · 2016-01-21 17:49:47Z

1

Based on looking at the code for the file uploader, .uploadAll() does not return anything, but it does have callback .onCompleteAll(). So, you could create a deffered object that you resolve in the callback function of each uploader's call to uploadAll().

        var uploaders = [my list of object uploaders];

        var allUploads = uploaders.map(function(uploader) {
            // you need one deffered object per uploader
            var deferred = $q.defer();

            // set up an onCompleteAll callback for each uploader
            uploader.onCompleteAll = function() {
                deferred.resolve('onCompleteAll');
            };

            // call uploadAll on each uploader
            uploader.uploadAll();

            return deferred;
    }); 


    var combinedUploads = $q.all(allUploads).then(function() {    
            console.log('Finished uploading all files');
    }, function(error) {
            console.log('error!');
    });

    return combinedUploads.promise; // assuming this was in another function

answered Jan 21, 2016 at 17:49

Shel

645 bronze badges

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

3 Comments

user2085143 Over a year ago

Thanks for posting, for sure looks like a possible solution. Will let you know how I go when I get a chance!

Shel Over a year ago

Great! I'm very curious to know if that was what you needed. I can tinker with it some more if that doesn't work.

Ricky Levi Over a year ago

Any example for Angular 5 ?

Gerjan Vlot · Accepted Answer · 2016-01-19 13:41:22Z

0

it`s the uploadAll() method that is causing your problem i guess.

answered Jan 19, 2016 at 13:41

Gerjan Vlot

368 bronze badges

Collectives™ on Stack Overflow

Angular File Upload Callback

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related