Geek asks and answers

How to get Sencha file upload field for receiving multiple files

I have a Sencha Ext JS application where I use the form field File( Ext.form.field.File) to upload files. It works fine, but I want users to be able to select multiple files to upload at once, for example on Dropbox.com. I have another site not related to Sencha (in which I had direct control over HTML) where I solved this problem using the attribute multipleof the INPUT element:

  <input type="file" name="files" multiple>

Sencha, however, does not support multiple files in the file upload field initially, at least on the current version (4.1). It may be possible to change the Sencha HTML output for the element <input>, but I'm not sure how to do this.

+5
source share
2 answers

You can create 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 githab example

+3
source

More articles:


All Articles