Laravel: Can't Select Multiple Images To Upload - laravel

Question

I have a form that can upload images to database. I can select 1 image and upload it. My code works perfectly but I want to update my code so it can select multiple images rather than one.
Any help is appreciated, thank you.
Controller File:
public function store(Request $request){
//image validation
$animal = $this->validate(request(), [
'image' => 'sometimes|image|mimes:jpeg,png,jpg,gif,svg|max:500',
]);
//Handles the uploading of the image
if ($request->hasFile('image')){
//Gets the filename with the extension
$fileNameWithExt = $request->file('image')->getClientOriginalName();
//just gets the filename
$filename = pathinfo($fileNameWithExt, PATHINFO_FILENAME);
//Just gets the extension
$extension = $request->file('image')->getClientOriginalExtension();
//Gets the filename to store
$fileNameToStore = $filename.'_'.time().'.'.$extension;
//Uploads the image
$path = $request->file('image')->storeAs('public/images', $fileNameToStore);
}
else {
$fileNameToStore = 'noimage.jpg';
}
}
Blade File:
<form method ="post" action="/animals" enctype="multipart/form-data">
#csrf
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name" required/>
<label for="breed">Which animal are you adding to the system?</label>
<select id="breed" name="breed">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="rabbit">Rabbit</option>
<option value="hamster">Hamster</option>
<label for="dob">Enter Date of Brith:</label>
<input type="date" id="dob" name="dob" required>
<label for="available">Availability:</label>
<input type="text" id="available" name="available" required>
<label for="description">Description:</label>
<input type="text" id="description" name="description" required>
<label>Please Select Images To Upload:</label>
<input type="file" name="images[]" multiple placeholder="Select multiple files"/>
<input type="submit" value="Submit">
</form>
Model:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Animal extends Model
{
protected $table = 'animal';
}

Answer 1

one way to do this task is something like the following. You can take it as an example code:
Migration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class Animals extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('animals', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('animals');
}
}
Model Animal
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
class animal extends Model
{
use HasFactory;
protected $fillable = ['name'];
}
Controller's store method
<?php
namespace App\Http\Controllers;
use App\Models\animal;
use Illuminate\Http\Request;
class FrontController extends Controller
{
public function index(){
//return a view over here for your index
/*For Example: return view('front.animal'); where front is your folder and inside your folder there's animal.blade.php */
}
public function store(Request $request)
{
$animal = $this->validate(request(), [
'image' => 'sometimes|image|mimes:jpeg,png,jpg,gif,svg|max:500',
]);
if ($request->hasfile('images')) {
$images = $request->file('images');
foreach($images as $image) {
$filename = $image->getClientOriginalName();
//$filename = pathinfo($fileNameWithExt, PATHINFO_FILENAME);
$extension = $image->getClientOriginalExtension();
$fileNameToStore = $filename.'_'.time().'.'.$extension;
$path = $image->storeAs('public/images', $fileNameToStore);
Animal::create([
'animal' => $fileNameToStore,
]);
}
}
return back()->with('success', 'Images uploaded successfully');
}
}
Blade Template:
<input type="file" name="images[]" multiple class="form-control" accept="image/*">