Multiple Image Upload using Ajax with Laravel 5.6 - php

Question

First I want Apology for my eng.
Second I don't want to use any plugin.
I Want to upload Multiple image and I can do it without ajax, But I want to upload with Ajax.
I Put my Code here.
<form action="{{route('image-upload.store')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>
<button type="submit">save</button>
</form>
Controller :
if ($request->hasFile('image_upload')) {
$images = $request->file('image_upload');
foreach ($images as $image) {
$randonName = rand(1, 200);
$name = $image->getClientOriginalName();
$storename = $randonName . '_' . $name;
$image->move(public_path('images/test'), $storename);
}
}
return redirect()->back();
Above Code simply upload multiple image without Ajax.
Here Ajax :
html :
<input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>
Ajax :
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
$('#image-upload').change(function () {
event.preventDefault();
let image_upload = new FormData();
let TotalImages = $('#image-upload')[0].files.length; //Total Images
let images = $('#image-upload')[0];
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images', images.files[i]);
}
image_upload.append('TotalImages', TotalImages);
$.ajax({
method: 'POST',
url: '/image-upload',
data: image_upload,
contentType: false,
processData: false,
success: function (images) {
console.log(`ok ${images}`)
},
error: function () {
console.log(`Failed`)
}
})
})
Controller :
if ($request->images) {
$images = $request->images;
$total=$request->TotalImages;
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$images->move(public_path('/images/test'), $randonName . '.jpg');
return response()->json($randonName);
}
Now This Code Work Fine but only for one image. I know that I Sould put it Loop and I did But didn't get my Response.
So if anyone can tell me how do it?
Here My Efforts :
if ($request->images) {
$total=$request->TotalImages;
$images = $request->images;
for($j=0; $j<$total;$j++){
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$images->move(public_path('/images/test'), $randonName . '.jpg');
}
return response()->json($randonName);
}
if ($request->images) {
$images = $request->images;
foreach ($images as $image) {
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$image->move(public_path('/images/test'),$randonName . $imagesName . $randonName . '.jpg');
}
}

Answer 1

this gonna work too this will send array of images so as to get it easily in controller
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images[]', images.files[i]);
}

Answer 2

update your code as follows:
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images', images.files[i]);
}
to
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images' + i, images.files[i]);
}
this should help you to submit multiple images.