I am using a form to upload photo gallery which should upload main gallery image and upload images to the same gallery in the same time.
I am using JQuery to append two fields one to upload the images and the other for the image name.
Here is my blade file
<form action="{{ route('add.new.album') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-body">
<h5 class="form-section">
<i class="ft-user"></i> Album information
</h5>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="album_name">Album name</label>
<input class="form-control" id="album_name" type="text" placeholder="Album name" name="album_name">
</div>
</div>
<div class="col-sm-6">
<label for="main_image">Main image</label>
<input class="form-control" id="main_image" type="file" name="main_image">
</div>
</div>
<h5 class="form-section mt-3"><i class="ft-user"></i> Add at last one image</h5>
<div class="row input-form">
<div class="col-sm-5">
<label for="images_1">Image</label>
<input class="form-control" id="images_1" type="file" name="images[]">
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="image_names_1">Name</label>
<input class="form-control" id="image_names_1" type="text" placeholder="Image name" name="image_names[]">
</div>
</div>
<div class="col-sm-2 mt-4">
<input class="btn btn-primary" id="add_more" type="button" value="Add more +">
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-5">
<input class="btn btn-success" type="submit" value="Save Album">
</div>
</div>
</div>
</form>
and here is my JQuery
<script>
$(document).ready(function () {
let addButton = $('#add_more');
let wrapper = $('.input-form');
let fieldHTML = '<div class="mt-2">' +
'<div class="row"> <div class="col-sm-5"> <div class="form-group"> <label for="images">Image</label><input class="form-control" id="images_2" type="file" name="images[]" /></div></div>' +
'<div class="col-sm-5"> <div class="form-group"> <label for="image_names">Name</label><input class="form-control" type="text" name="image_names[]" /></div></div>' +
'<a href="javascript:void(0);" class="remove_button btn btn-danger col-sm-1 mt-4">remove</a></div></div>';
let x = 1;
// Add fields
$(addButton).click(function () {
x++;
$(wrapper).append(fieldHTML);
});
// Remove fields
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
</script>
And here is my controller
public function store(Request $request) {
$input = $request->all();
if ($request->file('main_image')) {
$file = $request->file('main_image');
$filename = date('YmdHi').$file->getClientOriginalName();
$file->move(public_path()."/album-images/", $filename);
$input['main_image'] = $filename;
}
$album = Album::create([
'album_name' => $input['album_name'],
'main_image' => $input['main_image'],
]);
$fileNames = [];
foreach ($request->file('images') as $image) {
foreach ($request->image_names as $name) {
$imageName=$image->getClientOriginalName();
$image->move(public_path().'/album-images/', $imageName);
$fileNames[] = $imageName;
}
}
$images = json_encode($fileNames);
(new AlbumPhoto())->create([
'album_id' => $album->id,
'images' => $images,
'image_names' => $name,
]);
return redirect()->route('album');
}
when I try to upload one more images on the loop it gives error
The file "x.png" was not uploaded due to an unknown error.
the error is pointing to this line $image->move(public_path().'/album-images/', $imageName);