In this section we will see how to upload multiple images in laravel 9 using intervention image package. For this tutorial we use laravel breeze and tailwind css.
Step 1: Install Laravel & Connect Database
Run below command to create laravel project.
composer create-project laravel/laravel project-name
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Step 2: Install Breeze
Install laravel breeze via composer:
composer require laravel/breeze --dev
Next, run below command.
php artisan breeze:install
And final install Dependencies
npm install && npm run dev
php artisan migrate
Step 3: Install Intervention Image package
run below command to install
composer require intervention/image
After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines.
In the $providers array add the service providers for this package.
Intervention\Image\ImageServiceProvider::class
Add the facade of this package to the $aliases array.
'Image' => Intervention\Image\Facades\Image::class
Now the Image Class will be auto-loaded by Laravel.
Publish configuration in Laravel
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"
Step 4: Create Folder in Public Path
Next you need to create folder in public path, you give names like uploads, images, projects.
laravel create folder for upload images
Step 5: Create Project Modal Migration and Controller
Run below command to create model, migration and controller
php artisan make:model Project -mcr
For multiple images give text method for long text and store multiple images.
create_projects_table.php
public function up()
{
Schema::create('projects', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('images')->nullable();
$table->timestamps();
});
}
For multiple image give images casts to array.
app/Models/Project.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Project extends Model
{
use HasFactory;
protected $fillable = [
'name',
'images'
];
protected $casts = [
'images' => 'array'
];
}
web.php
Route::resource('projects', ProjectController::class);
We will store multiple images in array format. import use use Image, File;
app/Http/Controllers/projectController.php
<?php
namespace App\Http\Controllers;
use App\Models\Project;
use Illuminate\Http\Request;
use Image, File;
class ProjectController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$projects = Project::all();
return view('projects.index', compact('projects'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('projects.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data = $request->validate([
'name' => 'required|string|max:255',
'images' => 'required|array'
]);
$images = [];
foreach ($data['images'] as $image) {
$image_name = uniqid() . '.' . $image->getClientOriginalExtension();
$image_path = 'uploads/' . $image_name;
Image::make($image)->save(public_path($image_path));
array_push($images, $image_path);
}
$data['images'] = $images;
Project::create($data);
return redirect()->route('projects.index');
}
/**
* Display the specified resource.
*
* @param \App\Models\Project $project
* @return \Illuminate\Http\Response
*/
public function show(Project $project)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Project $project
* @return \Illuminate\Http\Response
*/
public function edit(Project $project)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Project $project
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Project $project)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Project $project
* @return \Illuminate\Http\Response
*/
public function destroy(Project $project)
{
//
}
}
Step 6: Create Project Blade View Files
views/projects/create.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Project Create') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Name</span>
<input type="text" name="name"
class="block w-full @error('name') border-red-500 @enderror mt-1 rounded-md"
placeholder="" value="{{old('name')}}" />
</label>
@error('name')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label class="block">
<span class="text-gray-700">Images</span>
<input type="file" name="images[]"
class="block w-full mt-1 rounded-md"
placeholder="" multiple/>
</label>
@error('images')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<button type="submit"
class="px-4 py-2 text-sm text-white bg-green-600 rounded">Submit</button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
upload multiple images In laravel 9 with intervention
views/projects/index.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Project') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<div class="mt-1 mb-4">
<a class="px-2 py-2 text-sm text-white bg-green-600 rounded"
href="{{ route('projects.create') }}">{{ __('Add Image') }}</a>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
#
</th>
<th scope="col" class="px-6 py-3">
Name
</th>
<th scope="col" class="px-6 py-3 text-center">
Image
</th>
<th scope="col" class="px-6 py-3">
Edit
</th>
</tr>
</thead>
<tbody>
@foreach ($projects as $project)
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row"
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{$project->id}}
</th>
<td class="px-6 py-4">
{{$project->name}}
</td>
<td class="flex gap-4 px-6 py-4">
@foreach($project->images as $image)
<img src="{{ asset($image) }}" alt="multiple image"
class="w-32 h-32 border border-blue-600">
@endforeach
</td>
<td class="px-6 py-4">
<a href="{{ route('projects.edit',$project->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-blue-600">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
multiple images show In laravel 9 with intervention
Step 7: Run Laravel and vite server
php artisan serve
//and next terminal
npm run dev
Read Also
Laravel 9 Upload Multiple Image Using Spatie Media Library
Laravel 9 Upload Multiple Images Tutorial Example
How to update multiple images in laravel 9
Upload Images with Spatie Media Library in Laravel 9
