How to get Sencha file upload field to accept multiple files

Question

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.

Answer 1

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

Answer 2

There is a plugin for this maybe you can use it: http://www.sencha.com/forum/showthread.php?205576-File-upload-with-drag-amp-drop-support&highlight=upload

Demo: http://harrydeluxe.github.com/extjs-ux/example/upload/upload.html