Question

I’m using extJS4 for my GUI and thus also to display the file upload dialog.
In the end I want to only have a button which when I click it it displays the file upload dialog, and when I select something there it automatically uploads the file.

For the automatic “submit” I know that I must write a handler for the onChange event of the file upload dialog. Thus this is not the problem. But is there a way to disable the textfield without having to resort to CSS?
(when I select a file to upload the name is written into the textfield….and I want to either eliminate the textfield or at least make it invisible).

Answer 1

The property you search is buttonOnly: true

Here you find the documentation

Just add it to the example like this:

Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        buttonOnly: true,
        name: 'photo',
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }],

    buttons: [{
        text: 'Upload',
        handler: function() {
            var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url: 'photo-upload.php',
                    waitMsg: 'Uploading your photo...',
                    success: function(fp, o) {
                        Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                    }
                });
            }
        }
    }]
});