PDA

View Full Version : Multiple select in a FileField



jeanrene
16 Aug 2011, 5:19 AM
Hi,

Is it possible to open in a filefield more than one file. When I click on it a browser is opening but I can select only one file. I would like to select more than one file.

Thanks.

burnnat
16 Aug 2011, 9:30 AM
If you're looking for a cross-browser solution, it's not possible. The Ext.form.field.File component relies on a hidden HTML <input type="file"> element, which can take an attribute named "multiple (http://www.w3schools.com/html5/att_input_multiple.asp)" to specify that the input should accept multiple files, but while Firefox and Chrome honor that attribute, Internet Explorer does not (at least in version 8 and previous - I'm not sure about 9).

If you really want it, it should be possible to extend the FileField and/or do some overriding to add the "multiple" attribute to the behind-the-scenes input element. But just be warned that it wouldn't have any effect in IE.

jeanrene
17 Aug 2011, 3:32 AM
How do you add the multiple attribute to this field ?

Thanks

burnnat
17 Aug 2011, 5:38 AM
You should create a custom field class that extends from the standard filefield. Here's just a basic example to get you started:


Ext.define('Ext.ux.form.MultiFile', {
extend: 'Ext.form.field.File',

/**
* Override to add a "multiple" attribute.
*/
createFileInput: function() {
this.callParent(arguments);

this.fileInputEl.set({
multiple: 'multiple'
});
}
});

You may have to add additional logic to ensure that form submission works properly, etc. (I haven't really tested this beyond the basics.) Then, of course, simply use the component wherever it's needed. You can define a custom xtype as needed, too.


var field = Ext.create('Ext.ux.form.MultiFile', {
// you can use the same config you'd pass to Ext.form.field.File
});

jeanrene
14 Sep 2011, 1:09 AM
Hi,

I do that for a multifile field :


Ext.define("Ext.form.field.MultiFile", {
extend: 'Ext.form.field.File',

/**
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
* text field (defaults to true). If true, all inherited Text members will still be available.
*/
buttonOnly: true,

/**
* The GridPanel element which contains the list of filenames.
*/
listFilesPanel: null,

/**
* The store of the GridPanel element which contains the list of filenames.
*/
listFilesStore: null,

/**
* Width of the GridPanel element.
*/
listFilesWidth: 200,

/**
* Height of the GridPanel element.
*/
listFilesHeight: 70,

// private
onRender: function() {
var me = this,
inputEl;


me.callParent(arguments);

// Creates the GridPanel element which contains the list of filenames
me.createFileList();
},

/**
* @private
* Creates the file input element. It is inserted into the trigger button component, made
* invisible, and floated on top of the button's other content so that it will receive the
* button's clicks.
*/
createFileInput : function() {
var me = this;
me.fileInputEl = me.button.el.createChild({
name: me.getName(),
cls: Ext.baseCSSPrefix + 'form-file-input',
tag: 'input',
type: 'file',
size: 1,
multiple: 'multiple'
}).on('change', me.onFileChange, me);
},


/**
* @private
* Creates the GridPanel element which contains the list of filenames.
*/
createFileList : function() {
var me = this;

// Creates the store
me.listFilesStore = Ext.create('Ext.data.Store', {
fields: ['filename'],
sorters: [{
property : 'filename',
direction: 'ASC'
}],
data: [{filename: '<i>' + __('No_File') + '</i>'}]
});

// Creates the GridPanel
me.listFilesPanel = Ext.create('Ext.grid.GridPanel', {
store: me.listFilesStore,
columns: [{
header: 'Filename',
dataIndex: 'filename',
flex: 1
}],
hideHeaders: true,
defaults: {
flex: 1
},
padding: '0 0 0 2',
width: me.listFilesWidth,
height: me.listFilesHeight,
renderTo: me.bodyEl
});
},

/**
* @private Event handler fired when the user selects a file.
*/
onFileChange: function() {
var me = this;
var fileEl = me.fileInputEl.dom;
var i = 0;

me.callParent();

// Removes filenames from the store of the GridPanel
me.clearFileList();

if (fileEl.files != undefined && fileEl.files != null) {
if(fileEl.files.length > 0) {
// Adds each filenames to the store of the GridPanel
for (i=0; i<fileEl.files.length; i++) {
me.listFilesStore.add({filename: fileEl.files[i].fileName});
}
// Sort the store
me.listFilesStore.sort('filename', 'ASC');
}
} else { // For IE : keep only the filename and not the path
var fname = fileEl.value;
var lastSlash = fname.lastIndexOf('/');
var backSlash = fname.lastIndexOf('\\');

lastSlash = Math.max(lastSlash, backSlash);
if(lastSlash > -1) {
fname = fname.substring(lastSlash + 1);
}
me.listFilesStore.add({filename: fname});
}
},

/**
* Removes filenames from the store of the GridPanel.
*/
clearFileList: function() {
var me = this;
var storeSize = me.listFilesStore.count();
// Removes filenames from the store of the GridPanel
for (i=0; i<storeSize; i++) {
me.listFilesStore.removeAt(0);
}
},

/**
* Removes filenames from the store of the GridPanel and the item 'No file'
*/
initFileListWithNoFile: function() {
var me = this;
var storeSize = me.listFilesStore.count();
// Removes filenames from the store of the GridPanel
for (i=0; i<storeSize; i++) {
me.listFilesStore.removeAt(0);
}
me.listFilesStore.add({filename: '<i>' + __('No_File') + '</i>'});
}

});


And then I use java for uploading my file.

mashiki
15 Feb 2012, 5:53 PM
burnnat

Thank you.
I also can do that with a part of your code.


items: [{
xtype:'filefield',
buttonText:'new image',
name:'file_new',
createFileInput : function() {
var me = this;
delete me.createFileInput;
me.createFileInput();
me.fileInputEl.set({
multiple: 'multiple'
});
}
}, ...

mandardadpe
4 Jan 2013, 6:02 AM
How to upload multiple files in Ext Js 4.1 ?? Please provide ux files for it.