Auto-File upload after selecting file in Sencha Touch 2.3

Question

I have a Sencha Touch 2.3 application that I am helping develop. One of the features I want to implement is uploading a file that I then do various things with using PHP in the back-end. However, I cannot find a way that works to actually complete the upload (or even show a dialog box to select a file to upload!)

I have a navigation bar that looks like the following:

    ...

    navigationBar: {
        docked: 'top',
        id: 'mainAdminToolbar',
        items: [
            { ... 
            },
            {
                align: 'right',
                hidden: true,
                text: 'Import',
                itemId: 'ImportBtn',
            }
        ]

    ...

In my main controller file, I have the following:

    ImportBtn: "adminMain #ImportBtn",

    "adminMain #ImportBtn": {
        tap: "onImportTap"
    },

    ...

I looked at the a lot of examples (such as this one and this one), but I can get none of them to work. I believe the latter might be for a more updated version of the framework, too, but I cannot update as of right now and have to work with version 2.3

What I want to do is the following:

1. Have a user click the button
2. Have a dialog window pop up in which a user can select a file
3. Have the file auto-upload after being selected
4. Do various server-side things with the file

How can I achieve this using Sencha Touch 2.3?

Answer 1

Try to use xtype: 'filefield' and it's 'updatedata' event

To select file you can write something like this

{
    xtype: 'filefield',
    itemId: 'ImportBtn',
    listeners: {
        change: function (button, newValue, oldValue, eOpts) {
            alert(newValue);
        }
    }
}

And after selecting the file you can get it with this (It works fine in 2.4)

var file = [your-filefield].getComponent().input.dom.files[0];

Here is more about filefield http://docs.sencha.com/touch/2.3.0/#!/api/Ext.field.File