so i found the answer after hours of digging..
formData.append('image_upload[]' , file);
I had to add [] to append files as an array.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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'
];
}
so i found the answer after hours of digging..
formData.append('image_upload[]' , file);
I had to add [] to append files as an array.
Please or to participate in this conversation.