Javascript AngularJS function doesnt run when expected

Question

I have the following code in my angularjs

 $scope.uploadImage = function(imageURI, fileName) {

    upload(imageURI, fileName)
    console.log("AFTER CALL upload");


    function upload(imageURI, fileName) {

       $ionicPlatform.ready(function() {
        console.log(FileTransfer);
      });

      console.log("in upload to s3")
      var deferred = $q.defer(),
        options = new FileUploadOptions();
        console.log("before options")
        options.fileKey = "file";
        options.fileName = fileName;
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;
        options.params = {
            "key": fileName,
            "AWSAccessKeyId": awsKey,
            "acl": acl,
            "policy": policyBase64,
            "signature": signature,
            "Content-Type": "image/jpeg"
        };

        console.log(s3URI)
        console.log(imageURI)

        var ft = new FileTransfer();
        ft.upload(imageURI, s3URI,
          function (e) {
            console.log("done done")
            //push url here 
            // console.log(s3URI)
            // console.log(fileName)
            // $scope.finalimagelist.push(s3URI+fileName);
            // console.log($scope.finalimagelist)
            // console.log(JSON.stringify(e))
            //   deferred.resolve(e); 
            //   console.log("IN upload");

          },
          function (e) {
            deferred.reject(e);
          }, 
        options);
            console.log("ON upload");
            console.log(JSON.stringify($scope.finalimagelist));
            return deferred.promise;

  }
}

The problem with this code is that these

console.log("ON upload");
console.log(JSON.stringify($scope.finalimagelist));
return deferred.promise;

get called before ft.Upload() executes. I would expect for ft.Upload() to execute first before the rest continues.

What am i doing wrong here?

Any help will be greatly appreciated

Answer 1

You need to wait for the promise object to resolve. Simple plunkr example using setTimeout to mock the file transfer: http://plnkr.co/edit/vVkiI3KjeWgiUvCubUmQ

 upload(imageURI, fileName).then(function(result){
     console.log("AFTER CALL upload");
 });

also resolve the promise here:

function (e) {
            console.log("done done")
            //push url here 
            // console.log(s3URI)
            // console.log(fileName)
            // $scope.finalimagelist.push(s3URI+fileName);
            // console.log($scope.finalimagelist)
            // console.log(JSON.stringify(e))
            //   deferred.resolve(e); 
            //   console.log("IN upload");
            deferred.resolve();
          },

So I noticed you weren't trying to wait for the promise in the first place. You were just executing code in the function that returns the promise. If you want that code to execute AFTER ft.upload, you need to put it in the callback.

$scope.uploadImage = function(imageURI, fileName) {

    upload(imageURI, fileName)
    console.log("AFTER CALL upload");


    function upload(imageURI, fileName) {

       $ionicPlatform.ready(function() {
        console.log(FileTransfer);
      });

      console.log("in upload to s3")
      var deferred = $q.defer(),
        options = new FileUploadOptions();
        console.log("before options")
        options.fileKey = "file";
        options.fileName = fileName;
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;
        options.params = {
            "key": fileName,
            "AWSAccessKeyId": awsKey,
            "acl": acl,
            "policy": policyBase64,
            "signature": signature,
            "Content-Type": "image/jpeg"
        };

        console.log(s3URI)
        console.log(imageURI)

        var ft = new FileTransfer();
        ft.upload(imageURI, s3URI,
          function (e) {
            console.log("done done")
            //push url here 
            // console.log(s3URI)
            // console.log(fileName)
            // $scope.finalimagelist.push(s3URI+fileName);
            // console.log($scope.finalimagelist)
            // console.log(JSON.stringify(e))
            //   deferred.resolve(e); 
            //   console.log("IN upload");

            //PUT THIS STUFF HERE
            console.log("ON upload");
            console.log(JSON.stringify($scope.finalimagelist));
            deferred.resolve();
          },
          function (e) {
            deferred.reject(e);
          }, 
        options);

            return deferred.promise;

  }
}

Answer 2

Based on your comment, if you are getting response you can check it in if condition and then run "ON Upload" lines,

Example code

var ftUpload = ft.upload(imageURI, s3URI,
          function (e) {
            console.log("done done")
            //push url here 
            // console.log(s3URI)
            // console.log(fileName)
            // $scope.finalimagelist.push(s3URI+fileName);
            // console.log($scope.finalimagelist)
            // console.log(JSON.stringify(e))
            //   deferred.resolve(e); 
            //   console.log("IN upload");

          },
          function (e) {
            deferred.reject(e);
          }, 
        options);

if ( ftUpload == YOUR_STATUS_CODE ) {
       console.log("ON upload");
       console.log(JSON.stringify($scope.finalimagelist));
       return deferred.promise;
}

Change condition according to your code.