Forums

8.4.2: how to get multiple files in php uploaded through ajax?

Permalink
With normal form posting file can be obtained like so:
echo $form->file('my_file[]', ['class' => 'attachment-file']);
...
$data = $this->request->request->all(); // form input values excl. files
$files = $this->request->files; // form files
$files = $files->get('my_file'); // array of form files with names my_file
foreach ($files as $file) {
    $file_name = $file->getClientOriginalName();
    ...
}

How can I do that with ajax? I send the data like so:
var attachments = $('.attachment-file');
var post_data = new FormData();
if (attachments.length > 0) {
    attachments.each(function(i, v) {
        post_data.append('my_file[]', $(v)[0].files);
    });
}
$.ajax({
    cache: false,
    contentType: false,
    processData: false,
    method: 'post',
    type: 'post',
    data: post_data,
    url: form.attr('action'),
Viewing 15 lines of 18 lines. View entire code block.

but when I try to get the files in PHP like so:
$data = $this->request->request->all();
$files = $data['my_file']; \Log::Info(var_dump_safe($files));
foreach ($files as $file) {

it complains "Invalid argument supplied for foreach()". The dump shows a string(17) "[object FileList]". If the file is in there, how do I get it?

JS log for the files console.log($(v)[0].files); looks like this:
FileList(1)
0: File { name: "Screenshot_20201106_204451.png", lastModified: 1604656019000, size: 66866, … }
length: 1
<prototype>: FileListPrototype { item: item(), length: Getter, … }

The whole form data dump of \Log::Info(var_dump_safe($data)); looks like this:
array(4) {
["topic"]=>
string(2) "24"
["title"]=>
string(5) "Title"
["content"]=>
string(4) "Test"
["my_file"]=>
string(8) "Array(1)"
}

and the dump of the array of \Log::Info(var_dump_safe($data['my_file']));:
array(1) {
 [0]=>
 string(17) "[object FileList]"
 }

How do I get the files data?

Thank you.
linuxoid
 
linuxoid replied on at Permalink Reply
linuxoid
I finally got it! Here's how you send multiple files with ajax:

JS:
var post_data = new FormData();
attachments.each(function(i, v) {
    post_data.append('my_file[]', v.files[0]);
    console.log(v.files[0]);
});

PHP:
$files = $this->request->files;
$files = $files->get('my_file');
foreach ($files as $file) {
    \Log::Info(var_dump_safe($file->getClientOriginalName()));
}

PS. Don't forget not to post and upload files bigger than the PHP limits of post_max_size and upload_max_size!
arlenapack replied on at Permalink Reply
Thanks for the update instruction.
http://happywheels2.io