How to get Sencha file upload field to accept multiple files

extjs, extjs4, file-upload

Solution

You can create a xtype:

Ext.define('fileupload',{
    extend: 'Ext.form.field.Text'
    ,alias: 'widget.fileupload'
    ,inputType: 'file'
    ,listeners: {
        render: function (me, eOpts) {
            var el = Ext.get(me.id+'-inputEl');
            el.set({
                size: me.inputSize || 1
            });
            if(me.multiple) {
                el.set({
                    multiple: 'multiple'
                });
            }
        }
    }
});

And use it in your form:

,items: [{
        xtype: 'fileupload'
        ,vtype: 'file'
        ,multiple: true // multiupload (multiple attr)
        ,acceptMimes: ['doc', 'xls', 'xlsx', 'pdf', 'zip', 'rar'] // file types
        ,acceptSize: 2048
        ,fieldLabel: 'File <span class="gray">(doc, xls, xlsx, pdf, zip, rar; 2 MB max)</span>'
        ,inputSize: 76 // size attr
        ,msgTarget: 'under'
        ,name: 'filesToUpload[]'
    }]

See example on githab

Problem

I have Sencha Ext JS application where I use `File` form field (`Ext.form.field.File`) to upload files. It's working fine, but I want users to be able to select multiple files for upload at once, like at Dropbox.com, for example. I have another, non-Sencha site (in which I had direct control over HTML) where I solved this problem by using `multiple` attribute of the INPUT element: ``` <input type="file" name="files" multiple> ``` Sencha, however, doesn't support multiple files in file upload field natively, at least as of current version (4.1). Perhaps it's possible to alter HTML output emitted by Sencha for `<input>` element, but I am not sure how.

Original source