Step 1: Install Intervention Image Package

Run the following command:

composer require intervention/image

Laravel automatically discovers the service provider, so no need to manually add it in config/app.php.

Step 2: Publish Configuration (Optional)

If you want to customize the config:

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

This will create config/image.php.

Step 3: Set up File Upload in Form

Example Blade form for inserting an image:

<form action="{{ route('store.image') }}" method="POST" enctype="multipart/form-data">
@csrf
<label for="title">Title:</label>
<input type="text" name="title" id="title" required><label for="image">Select Image:</label>
<input type="file" name="image" id="image" required>

<button type="submit">Submit</button>
</form>

enctype="multipart/form-data" is required for file upload.

Step 4: Create Controller Methods

4.1 Import the necessary classes

use Illuminate\Http\Request;
use App\Models\Post;
use Intervention\Image\Facades\Image;
use Illuminate\Support\Facades\Storage;

4.2 Store Method (Insert)

public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
]);if ($request->hasFile('image')) {
$image = $request->file('image');
$filename = time() . '.' . $image->getClientOriginalExtension();

// Resize and save the image
$img = Image::make($image)->resize(800, 600, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
})->encode(); // encode image to default format

// Save to storage/app/public/images
Storage::put("public/images/{$filename}", $img);

// Save data to database
Post::create([
'title' => $request->title,
'image' => "images/{$filename}",
]);

return redirect()->back()->with('success', 'Image uploaded successfully!');
}
}

4.3 Update Method

public function update(Request $request, $id)
{
$request->validate([
'title' => 'required|string|max:255',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
]);$post = Post::findOrFail($id);
$post->title = $request->title;

if ($request->hasFile('image')) {
// Delete old image
if ($post->image && Storage::exists('public/' . $post->image)) {
Storage::delete('public/' . $post->image);
}

$image = $request->file('image');
$filename = time() . '.' . $image->getClientOriginalExtension();

$img = Image::make($image)->resize(800, 600, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
})->encode();

Storage::put("public/images/{$filename}", $img);

$post->image = "images/{$filename}";
}

$post->save();

return redirect()->back()->with('success', 'Post updated successfully!');
}

Step 5: Set Up Routes

use App\Http\Controllers\PostController;

Route::get('/post/create', [PostController::class, 'create'])->name('create.image');
Route::post('/post/store', [PostController::class, 'store'])->name('store.image');
Route::get('/post/{id}/edit', [PostController::class, 'edit'])->name('edit.image');
Route::post('/post/{id}/update', [PostController::class, 'update'])->name('update.image');

Step 6: Display Image

In your Blade file:

<img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" width="300">

Make sure you run php artisan storage:link to make storage/app/public accessible in public/storage.

Summary

  • Installation: composer require intervention/image
  • Upload & Resize: Use Image::make()->resize()
  • Storage: Save to storage/app/public/
  • Insert & Update: Handle file upload, resize, store, and database update
  • Delete old image during update to prevent storage bloat
  • Link storage: php artisan storage:link

Categorized in:

Laravel,