How to make the function upload from cordova-plugin-file-transfer return a promise

Question

I'm using the cordova-plugin-file-transfer plugin for cordova with a backbone based application.

I have a Backbone.View that has a method called saveReport . Then I have a Backbone.Model that has a function called savePic . This is how myView.saveReport looks like:

saveReport:function(){
    var promise = $.Deferred();
    promise.resolve();
    var that = this;
    promise.then(function(){
      var savePicPromise = $.Deferred();
      savePicPromise.resolve();
      for(var i=1; i< that.miniatureViews.length; ++i){
        savePicPromise = savePicPromise.then(function(){
          return that.miniatureViews[i].pictureModel.savePic();
        });
      }
      return savePicPromise;
    }).then(function(){
       // here I do all other things
       // ...
       // ...
    }); // promise chain. 

myModel.savePic looks like this:

savePic: function(){
      var url = this.urlRoot;
      var options = new FileUploadOptions();
      options.fileKey="image";
      options.fileName=this.imgURI.substr(this.imgURI.lastIndexOf('/')+1);
      options.mimeType="image/jpeg";

      var ft = new FileTransfer();
      var myResponse; // to be set by callbacks.

      var that = this;
      this.savePromise = $.Deferred; // this should put a promise object into the model itself. 

      ft.upload(this.imgURI,
        encodeURI(url),
        function(r){
          that.savedURL = r.response; // this is the URL that the APi responds to us.
          that.savePromise.resolve();
        },
        function(e){
          console.error(e);
          window.analytics.trackEvent('ERROR', 'savingPic',e.code);
          that.savePromise.fail();
        },
        options);

      return this.savePromise;
    },

I also made some changes in the code and also tried this configuration with 2 other model's methods:

ft.upload(this.imgURI,
        encodeURI(url),
        this.resolveSavePromise,
        this.failedSavePromise,
        options);

with the 2 functions:

resolveSavePromise: function(r){
      this.savedURL = r.response; // this is the URL that the APi responds to us.
      this.savePromise.resolve();
    },
    failedSavePromise: function(e){
      console.error(e);
      window.analytics.trackEvent('ERROR', 'savingPic',e.code);
      this.savePromise.fail();
    },

Note: in this second option, I don't return anything within the savePic method.

The problem is that in the for loop in the saveReport method the promise stored in the pictureModel isn't actually a promise, or at least behaves strange. I get an error on the line that says this.savePromise.resolve() : that.savePromise.resolve is not a function. (In 'that.savePromise.resolve()', 'that.savePromise.resolve' is undefined)" that.savePromise.resolve is not a function. (In 'that.savePromise.resolve()', 'that.savePromise.resolve' is undefined)"

Is there a better way to make the upload function of the plugin work nicely with promises?

thanks

Answer 1

You forgot to create the deferred. You were just doing

this.savePromise = $.Deferred;

while you actually wanted

this.savePromise = new $.Deferred; // or
this.savePromise = new $.Deferred(); // or
this.savePromise = $.Deferred();

The $.Deferred factory does indeed not have a .resolve method.

Btw, you'll want to return this.savePromise.promise() instead of the deferred object.