Select multiple files from a FileUploadField in extjs - extjs3

Question

I'm looking at the example here and using the javascript provided from that example here. Basically what I want is a stand alone file chooser where I can select as many files as I want. The example that I've tried has a stand alone upload button but they don't let me shift highlight multiple files at the same time.
This code creates the button, but I can't load in multiple files at the same time:
var addFilesButton = new Ext.ux.form.FileUploadField({
buttonText: 'Add Files...',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v){
var Record = myGrid.getStore().recordType;
var newFile = new Record({
fileName: v,
type: 'src',
version: '5.9',
});
myGrid.stopEditing();
myGrid.getStore().add(newFile);
myGrid.startEditing(0, 0);
}
}
});

Answer 1

Ext.ux.form.FileUpload uses HTML INPUT field to set a file to upload which is pretty normal thing to do.
If you are using HTML4, at most one file can be assigned to input file field.
However, from HTML5, there is a special attribute that you can set to accept multiple files.
I have modified the script accordingly and created a demo.
Note that HTML5 spec is still in draft. Feature compatibility table is available on caniuse.com

Answer 2

My MultiFileUploadField class:
MultiFileUploadField = Ext.extend(Ext.ux.form.FileUploadField, {
multiple: false,
createFileInput: function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});
if(this.multiple){
this.fileInput.dom.setAttribute('multiple', 'multiple');
}
},
bindListeners: function(){
this.fileInput.on({
scope: this,
mouseenter: function(){
this.button.addClass(['x-btn-over','x-btn-focus'])
},
mouseleave: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
mousedown: function(){
this.button.addClass('x-btn-click')
},
mouseup: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
change: function(){
var v = this.fileInput.dom.files;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}
});
},
});