Extjs4 Upload file with just one button

Question

I want to upload a file with just one button "Upload button", which on clicked, opens file chooser, and if file selected, it must upload it.

The view should not show input[type=file] or any other labels, but just one button.

I know it is easy with jQuery or just javascript, but since I am relatively new to Extjs, I writing this here looking for your help.

Below is the sample file uploader from documentation. How can I customize it to fit my needs:

Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
    xtype: 'filefield',
    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.');
                }
            });
        }
    }
}]
});

Answer 1

I think buttonOnly : true is the config you need. It will hide the file path field.

Also use hideLabel : true to hide field label.

Include the upload file code in the upload file field event listener. Hope it helped.

Answer 2

I think my example will help you.. no need to click upload button once you select the file it will sents ajax request.

Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        listeners:{
            change:function( thiss, value, eOpts ){
                  alert(value);
                  //here place your ajax request
            }
         },
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }]
    });
});

Note:Place your ajax request code in the listener