ExtJS 4.2 filefield multiple upload

Question

I´m having some troubles with the multi file upload

In my controller I generate a window with a form and the form has a filefield and a grid:

var ventanaSubirDocumento=new Ext.Window({
        title: '<span style="color:#C85E00;">Subida de Documento</span>',
        plain: true,
        modal: true,
        frame: true,
        border: false,
        resizable: false,
        draggable: false,
        scope:this,
        items:[
               {
                   xtype:'form',
                   width: 400,
                   bodyPadding: 10,
                   frame: true,
                   timeout:600000,//Por si pesa mucho el archivo
                   renderTo: Ext.getBody(),
                   items: [{
                       xtype: 'filefield',
                       name: '',
                       fieldLabel: '',
                       fieldStyle:'color:black',
                       labelWidth: '',
                       msgTarget: 'side',
                       allowBlank: false,
                       anchor: '100%',
                       buttonText: 'Seleccionar documento',
                       listeners: {
                           change: function(fld, value) {
                               //var newValue = value.replace(/C:\\fakepath\\/g, '');
                               //fld.setRawValue(newValue);
                               var upload = fld.fileInputEl.dom;
                               var files = upload.files;
                               var names = [];
                               var names2 = [];

                               if (files) {
                                   for (var i = 0; i < files.length; i++){
                                       names.push(files[i].name);
                                       names2.push({archivo:files[i].name})
                                       value = names.join(', ');
                                   }
                               }
                               gridDocumentos.getStore().loadData(names2);
                               fld.setRawValue(value);
                           },
                           /*render:function(field, eOpts){
                               field.fileInputEl.set({ multiple: true });
                           }*/
                           afterrender:function(cmp){
                               cmp.fileInputEl.set({
                                   multiple:'multiple'
                               });
                           }
                       }
                   },
                   gridDocumentos
                   ],
                   buttons: [{
                       text: 'Subir documento',
                       handler: function() {
                           var form = this.up('form').getForm();
                           if(form.isValid()){
                               form.submit({
                                   url: 'data/php/Tmc_SubirDocumento.php',
                                   waitMsg: 'Subiendo documento...',
                                   success: function(fp, o) {
                                    ventanaSubirDocumento.close();
                                       Ext.Msg.show({ 
                                           title: 'Subida de documento', 
                                           msg: 'Documento subido',
                                           icon: Ext.MessageBox.INFO, 
                                           buttons: Ext.Msg.OK 
                                       });
                                   }
                             }
                        }
                    }]
        ]
    }).show();

In the controller all works perfect,If I select 1,2,3,etc... files to upload the grid fills with its names.

The problem comes when I submit the form and executing a PHP to work with the selected files,in the php if I print the $_FILES variable I only get the last selected.

In my php in the request payload I see the three files,but $_FILES only has the last one:

------WebKitFormBoundaryJhIv2MXqKkzPnNys Content-Disposition: form-data; name="filefield-1459-inputEl"; filename="file1.doc" Content-Type: application/msword

------WebKitFormBoundaryJhIv2MXqKkzPnNys Content-Disposition: form-data; name="filefield-1459-inputEl"; filename="file2.docx" Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document

------WebKitFormBoundaryJhIv2MXqKkzPnNys Content-Disposition: form-data; name="filefield-1459-inputEl"; filename="file3.docx" Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document

Am I missing something?How can I retrieve all files after formsubmit in the php file?

Answer 1

You can name your filefield, so it adds the name attribute to the underlying html input.

...
xtype: 'filefield',
name: 'uploads[]',
fieldLabel: '',
...

Then you can get them on PHP with;

$_FILES["uploads"];