Media handle upload multi-file upload form data fetch

PHP
1

Hello, How do you upload a file from formdata multi-file upload. I am sending data from JS formdata to PHP and then trying to upload using media_handle_upload. I can do this with file upload but not file uploads.

JS and PHP below

var ins = document.getElementById('lf_Input_3').files.length;
        for (var x = 0; x < ins; x++) {
            data.append("multifiles[]", document.getElementById('lf_Input_3').files[x]);
        }

       $count = count($_POST['multifiles']);
             for ($i = 0; $i < $count; $i++) {
                 $file = $_POST['multifiles'][$i];
                 $lfattachmentid = media_handle_upload( $file, $post_id );
        }```
2

If you are asking about a javascript FormData object, the submitted data will be in $_FILES, and if you just reference the form when you create the FormData object, it will already have all the form field data in it. No need to ā€˜manuallyā€™ append individual things to it.

AFAIK, none of the WordPress file upload handling functions can directly deal with an array of uploaded files, because they internally, improperly, reference the $_FILES[ā€˜field_nameā€™] elements and assume a single file upload. The solution/kluge is to build your own $_FILES array of data for each uploaded file, then call the WordPress file upload handling function. See this link - https://www.kvcodes.com/2013/12/create-front-end-multiple-file-upload-wordpress/

1 Like
3

You are on the right path and that you have to run an iteration against an array. The problem lies in both the HTML and the PHP files. If you donā€™t have the right HTML tag to indicate to the server that youā€™re going to upload more than 1 file, thatā€™s a problem. For the PHP side, you have to run your loop against the $_FILES variable. Youā€™ll also want to run it in the iteration the files are attached to. Iā€™ll give you a hint, it looks something like $_FILES[$i][ā€¦].

4

Iā€™ve actually tried that syntax using the index of the files and how they were sequentially uploaded to the form data. My form has all the correct attributes.

The problem I think is the media handle upload only uploads a single file and it uses the name of the multi file upload input to upload the files. The problem is that the same name attribute can only be used one time. And Iā€™m just not sure how to get around that.

5

What does this represent [ā€¦] ?

6

Sending the form data VIA fetch. It handles the form data with AJAX/fetch.

7

Unfortunately, thatā€™s not the array structure for multiple files. Itā€™s $_FILES[ā€¦][$i]

The link I included shows how to build your own $_FILES array for each of the multiple uploaded files before calling the WP function(s.)

Represents the different elements, e.g. name, size, tmp_name, ā€¦

If you are POSTing the data, the type=ā€˜fileā€™ field data will be in $_FILES, unless you are doing something odd that you havenā€™t shown us in the snippets of code.

8

Thereā€™s a problem with the tutorial you shared. the fetch URL uses admin-ajax.php which all of WordPress Ajax forms use to post data. In the tutorial, it required a custom post.php file to grab the files data. The admin-ajax.php is not a file I believe I can modify.

9

This is something Iā€™m trying to allure to to see if you can catch on. Donā€™t know why one would use JS to do this handling because HTML can do this perfectly fine. Youā€™d have to set the name for your input field to actually use that syntax. So something like

<input type="file" name="multifiles[]" ...>

Then from your PHP file, youā€™d do something like what I said before.

$files = $_FILES['multifiles'];
$count = count($files);

for($i = 0; $i < $count; $i++) {
	...
}

[...] means ā€œetcā€ and can literally mean anything. Itā€™s a placeholder for anything you want in there that actually applies to said array.

Correctly, sorry I was on lunch break and on my phone so I didnā€™t have time to check if it was one way or another.

10

@mabismad The snippet helped out a lot. I didnā€™t quite need everything in the snippet so had to modify it slightly with my configuration but itā€™s working now. Thanks for your insights.

@spaceshiptrooper I do believe the way you suggested would have worked if the site environment did not need to use media handle upload. I actually would have preferred to solve the problem with this solution but as @mabismad suggested the media handle upload assumes a single file upload field only.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.