kostysh / File-uploading-component-for-Sencha-Touch

Ext.Button based component for uploading files in Sencha Touch apps without page refresh
51 stars 26 forks source link

Unable to bind response events. #3

Closed robert-lara closed 11 years ago

robert-lara commented 11 years ago

I am working on using the control and for some reason the response methods are not binding. Everything else works fine, but once I call fileBtn.submit(), the onSuccess and Failure methods are not called. I am testing on iOS 6.0.1 Safari and the most updated Google Chrome.

Below is what I have: Ext.define('Namespace.controller.Main',{ extend: 'Ext.app.Controller', views:['Main','Viewport'],

init:function(){

    console.log('inited');
},

requires: [
    'Ext.MessageBox',
    'Ext.Img'
],

config: {
    refs: {
        'fileBtn': '#fileBtn',
        'prospective': '#prospective'
    },

    control: {
        fileBtn: {
            initialize: 'onFileBtnInit',
            submit: 'onFileBtnSubmit'
        }
    }
},

onFileBtnInit: function(fileBtn) {
        Ext.Msg.alert('Init', 'Success!');
        var me = this;

        console.log('Init');

        fileBtn.setCallbacks({
            scope: me,
            success: me.onFileUploadSuccess,
            failure: me.onFileUploadFailure
        });
    },

onFileBtnSubmit: function() {
    console.log('Submit');
},

onFileUploadSuccess: function(response) {
    var firstName = Ext.getCmp('firstName');
    var lastName = Ext.getCmp('lastName');
    var email = Ext.getCmp('email');

    console.log('Success');

    var loaded = Ext.getCmp('loadedImage');

    if (loaded) {
        loaded.destroy();
    }

    var image = Ext.create('Ext.Img', {
        id: 'loadedImage',
        width: 250,
        height: 200,
        src: response.base64,
        style: 'background-size: contain; margin-top: 20px; border-radius: 15px;'
    });

    var wlc = Ext.getCmp('prospective');
    wlc.add(image);
    image.show('fadeIn');

    Ext.Msg.alert('File upload', 'Success!');
},

onFileUploadFailure: function() {
    console.log('Failure');
    Ext.Msg.alert('File upload', 'Failure!');
}

Here is how I use the component, but I really don't think this is the issue.

{ id: 'fileBtn', xtype: 'fileupload', iconCls: 'download', iconMask: true, text: 'File dialog', padding: 20, actionUrl: 'services/api/upload', returnBase64Data: true, autoUpload: false }, { xtype:'button', text:'Submit', handler:function () { var fileBtn = Ext.getCmp('fileBtn');

                        fileBtn.submit();
                    }
                }

kostysh commented 11 years ago

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