Extjs 6.2.0 modern filefield as button

Question

I am trying to create a filefield as a button with an icon. It seems in the documentation that this is not supported in modern 6.2.0. Is there a way?

Link to Docs: http://docs.sencha.com/extjs/6.2.0/modern/Ext.field.File.html

There also doesn't seem to be a way to change the text in the default button or text accompanying it.

(Add a link to the documentation reference to help people understand you better) — Joabe da Luz, Jul 25 '17 at 16:13

score 1 · Answer 1 · edited Mar 11 '20 at 12:44

there is a good solution for that:

{
        xtype : 'button',
        text : 'add a file',
        handler : 'onAddFile'
},

and then in the controller:

onAddfile: function() {
    var me = this;

    var fileupload = Ext.create('Ext.form.Panel', {
        // renderTo: Ext.getBody(),
        title : 'Upload Panel',
        height : 0,
        width : 0,
        items : [ {
            xtype : 'filefield',
            label : 'any thing',
            accept: 'application/zip',//or mediatypes that you want
            multiple : false,//or true if you need
            controller : me,
            listeners : {
                change : function(field) {
                    me.fileSelected(field);
                }
            }
        } ]
    });
    //this is important to click programmaticallly
    fileupload.element.dom.querySelector('.x-button-el').click();

},

fileSelected: function (field) {
        let files = field.getFiles();
        // now you have the files
}

Thats it...

score 0 · Accepted Answer · answered Jul 28 '17 at 19:56

That is by design. The file input's text is browser defined and not meant to be changed by the developer. Usually people work around that by generating a display:hidden file input and a generic button which triggers the file input via JS.

I fear you'll have to divert to similar measures in ExtJS.

For reference here's a discussion on SO about how to change the label of the plain-old HTML file input element: Labeling file upload button

Extjs 6.2.0 modern filefield as button

2 Answers2