ExtJS background file upload

Question

I have an ExtJS FormPanel with different form items (textfields, numeric etc) in some cases I need an addtional file upload in this form.

(In my opinion) The best solution would be a extJs filefield in the FormPanel, which starts the upload as soon as a file is selected by the user. After uploading the file successfully (getting {success: true, fileid: 17} from the server) the filefield should disappear and a text message ("File upload was successful") should be shown instead. Additionally to the text message a (new) hidden input with the fileid has to be added to the FormPanel:

User selects file with ExtJs filefield.
Upload is started immediately (onChange).
Server answers with success: true and fileId
Text "File upload was successful" replaces the filefield
hidden form item with fileId is added to the form

Is there any way to achieve this (or a similar solution) with ExtJS 4?

Short answer - yes. But I don't really think that anybody would write all of the code for you. It would be better if you tried to achieve the task by yourself and then came here with the specific problem. — Molecular Man
What i tried so far is following: jsfiddle.net/fdxtK/1 (The jsfiddle example will not work in jsFiddle cause of the same origin policy) But i don't know what to do next. — wessnerj

Krzysztof Krzysztof · Accepted Answer · 2012-03-07T10:57:22

Easiest way is to wrap filefield in panel and replace content in handler. Example:

var formPanel = Ext.create('Ext.form.Panel', {
    renderTo: 'testdiv',
    title: 'Basic information',
    id: 'schnitzel',
    items: [
        {
            xtype: 'textfield',
            name: 'title',
            fieldLabel: 'Title'
        },
        {
            xtype: 'panel',
            layout: 'fit',
            border: false,
            items: [{
                xtype: 'filefield',
                buttonOnly: true,
                name: 'file',
                onChange: function(value) {
                    var panel = this.ownerCt;
                    formPanel.submit({
                        url: 'index4_submit.php',
                        waitMsg: 'Uploading the image ..',
                        clientValidation: false,
                        success: Ext.Function.bind(panel.onSuccess, panel)
                    });                    
                }
            }],
            onSuccess: function(form, action) {
                if (action.result.success !== true) {
                    return;
                }

                this.removeAll();
                this.add({ 
                    xtype: 'label',
                    text: 'File upload was successful'
                });
                this.add({ 
                    xtype: 'hidden',
                    name: 'file',
                    value: action.result.fileid
                });
            }
        }
    ]
});

ExtJS background file upload

1 Answers