Send a picture and use the success callback to send a form

[neuhausj]

Hello,

I have actually a problem with the extension Ext.ux.Fileup.

I want to send a picture and use the callback to send a form, with some fields plus the imageUrl from the callback.

The method is called when the image is upload and the response url is correct. However, I can't access to the getPatientForm() auto-generated method (patientForm is in refs section). I got the following error :

Uncaught TypeError: Object [object Object] has no method 'getPatientForm'

Please note that if I use the autoupload feature and then submit the form, everything is ok. However, I can't avoid user to upload images without sending the form in this case. That's why I want to send the image when I submit the form.

Here is my controller code so far :

   savePatient: function(options) {
      var fileBtn = Ext.getCmp('fileBtn');

      fileBtn.submit();
   },

// Upload button initialisation
   onFileBtnInit: function(fileBtn) {
      var me = this;
      fileBtn.setCallbacks({
         scope: this.getPatientForm(),
         success: me.onFileUploadSuccess,
         failure: me.onFileUploadFailure
      });
   },

 onFileUploadSuccess: function(response) {
      console.log('Success');
      Ext.getCmp('imageUrl')
         .setValue(response.url);
         console.log(this)
         var patientForm = this.getPatientForm();
         var newValues = patientForm.getValues();
         var store = Ext.StoreManager.lookup('patientStore');
         var test = Ext.ModelMgr.create(newValues, 'iWound.model.patientModel');
         var errors = test.validate();

         if (!errors.isValid()) {
            Ext.Msg.alert('Error', 'Fail to save patient ' + newValues.name + '<br/><i>' + errors.items[0]._field + " " + errors.items[0]._message + '</i>', Ext.emptyFn);
         } else {
            store.add(test);
            store.sync();
            Ext.Msg.alert('User added', 'User ' + newValues.name + ' was added successfully', Ext.emptyFn);
         }
}

How could I retrieve the patientForm method?

[kostysh]

Make sure you know the context in which the "onFileUploadSuccess" method is executed. If "this" is your controller, then error "Uncaught TypeError: Object [object Object] has no method 'getPatientForm'" is related to problem with your references (you should define a patientForm in refs section in controller config). To define a reference to your form correctly you should assign itemId of id to your form.

[neuhausj]

Thank you for your answer. All the code above is in the same controller, with the refs correctly configured for patientForm. How should the scope configured? I tried both with this and this.getPatientForm(), but it was not successful. Am I missing something?

[kostysh]

You should check the value of "this" in "onFileBtnInit" method (where you define a scope for callbacks). Be sure, "this" object inside "onFileBtnInit" is the Button object, not the controller

[neuhausj]

So I just tested it and the "this" object inside the "onFileBrnInit" refers to the controller. However, in the "onFileUploadSuccess" callback, it doesn't. It refers there to the "fileBtn" object.

I manage to retrieve the scope value with this._callbacks.scope. So problem solved. Thank you for you quick support !!

[kostysh]

New version of Fileup component is available: https://github.com/kostysh/File-uploading-component-for-Sencha-Touch