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:

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

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

Answer 1

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
                });
            }
        }
    ]
});