Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TuffRivers's avatar

Multi Image Upload With jQuery

Hi All, I cant seem to upload multiple images with jQuery AJAX request to my laravel route and validate it properly. The issue im having is that i either have to upload each file seperately with a different name, eg image1, image2, image3, so my image.* fails, or my jquery only uploads a single file and not multiple files.

Here is my upload input

 <input type="file" id="file_upload" name="file_upload[]" multiple>

my jQuery 1 - when i dd the files show up as [Object FileList] and not as images under Files

var formData = new FormData();
var files = $("input[type='file']")[0].files;
formData.append('total_files', $('#file_upload')[0].files.length);
formData.append('image_upload', files);

my jQuery 2 - this brings my files in as image1, image2, image2 - so it fails my validator

var formData = new FormData();
var files = $("input[type='file']")[0].files;
formData.append('total_images', $('#file_upload')[0].files.length);
$.each($("input[type='file']")[0].files, function(i, file) {
    console.log(file);
    formData.append('image_upload' + i, file);
});

my jQuery 3 - this only brings in the last image

var formData = new FormData();
var files = $("input[type='file']")[0].files;
formData.append('total_images', $('#file_upload')[0].files.length);
$.each($("input[type='file']")[0].files, function(i, file) {
    console.log(file);
    formData.append('image_upload' , file);
});
 

Here is my validator

  public function rules()
    {
        return [
           'message' => 'string|nullable',
           'image_upload.*' => 'image|mimes:jpg,png,jpeg,gif,svg|max:10000',
           'total_images' => 'numeric|nullable'
        ];
    }
0 likes
1 reply
TuffRivers's avatar
TuffRivers
OP
Best Answer
Level 2

so i found the answer after hours of digging..

  formData.append('image_upload[]' , file);

I had to add [] to append files as an array.

1 like

Please or to participate in this conversation.