javascript - Angular JS - $q.all() tracking individual upload progress -
i'm using angular-file-upload
module danialfarid (https://github.com/danialfarid/angular-file-upload) , works great.
i've been able integrate in wrapper service rest calls , can upload several images $q.all()
, keeping track of progress.
however, can't correctly identify single images i'm uploading, because file identifier gets continuosly changed loop.
uploadphotos: function (files) { var deferred = $q.defer() var queue = [] (var = 0; < files.length; i++) { var file = files[i]; var = $upload.upload({ url: locationuri +'/photos', file: file, fileformdataname: 'image' }).then( function (data) { console.log(data) }, function (err) { console.log(err) }, function(evt) { // progress events console.log('percent: ' + parseint(100.0 * evt.loaded / evt.total)); } ) queue.push(up) } $q.all(queue).then( function (data) { deferred.resolve(data) }, function (err) { deferred.reject(err) } ) return deferred.promise }
this is, without surprise, confused output get:
percent: 68 restfactory.js:359 percent: 100 restfactory.js:359 percent: 100 restfactory.js:359 percent: 14 restfactory.js:359 percent: 37 restfactory.js:359 percent: 52 restfactory.js:359 percent: 89 restfactory.js:359 percent: 100 restfactory.js:359 percent: 100 restfactory.js:359
do have idea how manage have like:
file1 - percent: 68 restfactory.js:359 file1 - percent: 100 restfactory.js:359 file2 - percent: 100 restfactory.js:359
closures within loops tricky. closing on loop variable last value (e.g. see this question - , google more theory/details). want call function within loop:
for (var = 0; < files.length; i++) { var = dotheupload(files[i]); queue.push(up); }
and dotheupload()
contains original code, returning promise , using correct file
(i not know api, presume file.name
contains file name; adjust appropriately):
function dotheupload(file) { var = $upload.upload({ url: locationuri +'/photos', file: file, fileformdataname: 'image' }).then( function (data) { console.log(data) }, function (err) { console.log(err) }, function(evt) { // progress events console.log(file.name + ' percent: ' + parseint(100.0 * evt.loaded / evt.total)); } ); return up; }
Comments
Post a Comment