javascript - Angular JS promise/defer: using framework Quickblox, How to upload images and then upload public urls to custom object -

i making app i'd users able upload 5 images of themselves.

i using backend-as-a-service (quickblox), requires me create blob files , upload them individually. upon completion of each upload, provided success callback amazon aws url of image.

i need take amazon aws urls , upload them quickblox again, tie profile specific urls. (if familiar quickblox, have custom object has 5 fields image urls).

i unsure of proper way in angular js.

i'm chaining 5 promises upload each image, , 6th promise upload amazon urls once available. issue last promise firing before receives amazon aws urls. there way more properly? seem misunderstanding promises , defers...

here code:

function qbcreateandupload(q,scope,i){  // async call post image qb.content.createandupload({'file':scope.image_blobs[i],'name':"profilepics.jpg", 'type':"image/jpeg", 'public': true },function(e,r){         if(e){           return q.reject("error");         } else {           scope.amazon_urls[i]= "http://qbprod.s3.amazonaws.com/" + r.uid;           return scope.amazon_urls;         }       }); }  var deferred = $q.defer(); var promise =    deferred.promise.then(qbcreateandupload($q,$scope,0)) .then(qbcreateandupload($q,$scope,1)) .then(qbcreateandupload($q,$scope,2)) .then(qbcreateandupload($q,$scope,3)) .then(qbcreateandupload($q,$scope,4)) .then(function(result){     //async call upload amazon urls     var data = {       _id: principal.data_object_id,       image1: results[0],       image2: results[1],       image3: results[2],       image4: results[3],       image5: results[4]     }       qb.data.update(classname,data,function(e,r){         if (e){         } else {           console.log(r);           return "all uploaded";         }     });  }); deferred.resolve(); 

your qbcreateandupload function not resolve/reject promise in right way, means each of functions unreliable. appears me don't quite understand how promises work in general.

i've tried keep of function , kept simple in general. should avoid passing around scopes

function qbcreateandupload(deferred, scope, i) {   qb.content.createandupload({'file':scope.image_blobs[i],'name':"profilepics.jpg", 'type':"image/jpeg", 'public': true }, function(e,r)      {       if (e)        {         deferred.reject(e);       }        else        {         scope.amazon_urls[i] = "http://qbprod.s3.amazonaws.com/" + r.uid;         deferred.resolve("http://qbprod.s3.amazonaws.com/" + r.uid);       }   });   // promise returned   // reject() , resolve() functions called when async call finishes   return deferred.promise; }  // use array of promises keep track of our progress var promises = [];  (var = 0; < 5; i++) {   var deferred = $q.defer();   // pass deferred object function   // function execute reject() or resolve()    // async function finsishes   var promise = qbcreateandupload(deferred, scope, i);   // store promise object qbcreateandupload function   // returns our array   promises.push(promise); }  // function creates new promise resolve // promises in our promises array have resolved; if 1 fails // promise fails $q.all(promises).then(function (results) {   // results object contains objects passed when promises    // resolved; seems little pointless since passed scope    // function contain image urls anyway   var data = {     _id: principal.data_object_id,     image1: results[0],     image2: results[1],     image3: results[2],     image4: results[3],     image5: results[4]   }    qb.data.update(classname,data,function(e,r){     if (e)     {     }      else      {       console.log(r);       // return "all uploaded";       // return absolutely pointless since not synchronous       // need promise / callback @ point     } }, function (error){   console.log(error); });