EXTJS 7.2 - Multiple File Upload With Ext.field.File - file-upload

Question

I'm attempting to use the 7.2.0 Modern File Field to upload multiple files.
var txtSiteCode = Ext.create('Ext.field.Text', {
label: 'Site Code',
required: true,
name: 'site_code',
responsiveConfig: {
'width < 800': {
labelAlign: 'top'
},
'width >= 800': {
labelAlign: 'left'
}
}
})
}
}
}), fldFile = Ext.create('Ext.field.File', {
label: 'Images',
name: 'files',
multiple: true,
accept: 'image',
responsiveConfig: {
'width < 800': {
labelAlign: 'top'
},
'width >= 800': {
labelAlign: 'left'
}
},
}), form = Ext.create('Ext.form.Panel', {
url: 'data/test.php',
method: 'post',
enctype: 'multipart/form-data',
items : [txtSiteCode, fldFile],
})
When the form is submitted, I only receive 1 file on the server in the $_FILES array. However judging from the size of the request payload, it appears that all files should in fact be available.
FILE COUNT: 1, referer:
[Thu Aug 20 09:05:09.715473 2020] [php7:notice] [pid 12749] Array\n(\n [name] => FBK90084_Primary_14_PE4 (2).jpg\n [type] => image/jpeg\n [tmp_name] => /tmp/phpxjd0pK\n [error] => 0\n [size] => 2973487\n)\n,
The above is a count on the $_FILE array size, and a dump of the $_FILE array itself. This was the result of 3 jpg files being selected in the file picker.
Status200
OK
VersionHTTP/1.1
Transferred5.67 MB (0 B size)
Referrer Policyno-referrer-when-downgrade
Above is the server response as you can see the size is 5.7mb (2 ~3mb files were selected in this case)
Any idea why the $_FILES array is not showing me all files submitted?
UPDATE: Something to note - if I go and manually set the name property of the field on the rendered page in devtools to include '[]' at the end of it, I can get multiple files to upload to the server. The issue then seems to be that the form is not treating the file input as a multiple upload and using the proper 'name[]' convention, and EXT strips non alpha numeric characters from name strings, so I cannot seem to set the field name attribute to 'files[]' in code. I'm guessing I can probably override this? Just unsure how

Answer 1

If you are doubt about the files are really sent as your expectation or not, I suggest you to try to separate the problems become two main problems. They are Frontend (ext js) problem and Backend ( your PHP script in receiving the files). I can show you how to make us sure that frontend(sencha ext js) really send multiple files or not by using change's listener inside the filefield config.
Ext.create('Ext.field.File', {
label: 'Images',
name: 'files',
multiple: true,
accept: 'image',
responsiveConfig: {
'width < 800': {
labelAlign: 'top'
},
'width >= 800': {
labelAlign: 'left'
}
},
listeners:{
change: function(el,v){
let files = el.getFiles(); //get all files
files.forEach(file=>{
console.log(file); //check your console, you will be shown the object of a file
});
}
}
}
Another way to check whether the files are sent in multiple key form params as 'name[]' or just single form param as'name' (but contains multiple files), just check the network tool in your browser after you submit to backend, it will show you the answer.