I recently started using the angular-file-upload module created by danialfarid (https://github.com/danialfarid/angular-file-upload) and I must say, it's been a great experience so far.
After successfully integrating it into my wrapper service for REST calls, I have managed to upload multiple images simultaneously using $q.all() while monitoring their progress.
Despite this success, I've encountered an issue where I'm unable to properly identify individual images during the upload process because the file identifier keeps getting changed within the for loop.
uploadPhotos: function (files) {
var deferred = $q.defer()
var queue = []
for (var i = 0; i < files.length; i++) {
var file = files[i];
var up = $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
}
Unfortunately, the output I'm currently seeing is quite confusing:
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
Is there any solution you can suggest to help me achieve a clearer output like this:
file1 - percent: 68 restfactory.js:359
file1 - percent: 100 restfactory.js:359
file2 - percent: 100 restfactory.js:359