Laravel 9 - Upload multiple image
Laravel 9 - Upload multiple image
In this tutorial, we will discuss how to upload multiple images in Laravel 9. Uploading multiple images is useful for handling batch uploads, such as managing user galleries, product images, or bulk media submissions. It streamlines the process of managing and organizing multiple files in a single operation.
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Create fresh Laravel project or use an existing Laravel project.
Two commands to create fresh Laravel project.
Global Command : laravel new multipleImages
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist multipleImages
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/multipleImages
Run the Laravel Vite development server. Install the required dependencies and start the Vite server for front-end assets.
Command : npm install && npm run dev
Open a new Git Bash window or tab, and navigate to the same project directory to run further Laravel commands.
Step # 3 : Create Model, Migration & Controller for images.
Command : php artisan make:model Image -cm
Step # 4 : Add columns to the images table.
Access create_images_table and update columns like below.
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
If you are going to insert the data using form you need to define the fields as fillable property.
Access Image model and add protected $fillable columns in Image class.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name',
];
}
Run the migration.
Command : php artisan migrate.
Step # 5 : Create view named upload-image.blade.php.
(resources/views/upload-image.blade.php)
Paste the below form to upload multiple images.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 - Code Shotcut Upload Multiple Images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading mb-3 mt-5">
<h2>Laravel 9 - Upload Multiple Images</h2>
</div>
<div class="panel-body">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ url('/upload-images') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label">Select Images:</label>
<input type="file" name="images[]" class="form-control" multiple/>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success">Upload Image/Images</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Essential Fields:
enctype="multipart/form-data": Ensures that the form data, including file uploads, is properly encoded for submission.
<input type="file" name="images[]": Specifies the input type for file selection and the multiple attribute enables the selection of more than one file.
Step # 6 : Create methods in the ImageController.
Access ImageController and create two methods one to display the form and the second to store images.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class ImageController extends Controller
{
public function index()
{
//Return view
return view('upload-image');
}
public function store(Request $request)
{
//Validate and upload images
$request->validate([
'images.*' => 'required|mimes:png,gif,jpg,bim|max:2048',
]);
if($request->images)
{
foreach ($request->images as $image) {
$modifiedImage = time() . ' - ' . $image->getClientOriginalName();
$image->move(public_path('/image'), $modifiedImage);
Image::create([
'name' => $modifiedImage,
]);
}
}
return back()->with('success', 'images uploaded successfully.');
}
}
Step # 7 : Create routes.
Import the ImageController class.
use App\Http\Controllers\ImageController;
Add routes.
Route::get('/upload', [ImageController::class, 'index']);
Route::post('/upload-images', [ImageController::class, 'store']);
Step # 8 : It's time to test.
Command : php artisan server
Visit url 127.0.0.1:8000/upload
Try uploading the images
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments