In this article, we will explore how to resize images before uploading in Laravel 10. Throughout this tutorial, we'll delve into the process of resizing images before uploading them to our Laravel 10 application. We'll specifically focus on utilizing the intervention/image composer package to achieve this functionality.
By installing the intervention/image package, we gain access to powerful image manipulation capabilities. This package allows us to not only resize images but also perform additional operations such as cropping, rotating, compressing, and blurring images.
Intervention Image serves as a PHP image handling and manipulation library, providing developers with a more intuitive and expressive way to create, edit, and compose images within their Laravel applications.
So, let's see laravel 10 resize images before uploading using intervention, how to image resize before upload in laravel 8/9/10, laravel image resize, and laravel image intervention.
In this step, we'll install Laravel 10 using the following command. So, open your terminal or command prompt and execute the command provided below:
composer create-project laravel/laravel image-resize-laravel-10
Now, we will install the intervention/image package using the command provided below. The intervention/image package proves to be highly beneficial for resizing images and executing various other actions on them.
composer require intervention/image
In this step, we will define routes in the web.php file of our Laravel application. Below is the code snippet that you can add to the web.php file:
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(ImageController::class)->group(function(){
Route::get('image-upload', 'index');
Route::post('image-upload', 'store')->name('image.store');
});
In this step, we'll create a new ImageController using the following command:
php artisan make:controller ImageController
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('image_upload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$image = $request->file('image');
$image_name = time().'.'.$image->extension();
$destinationPathThumbnail = public_path('/thumbnail');
$img = Image::make($image->path());
$img->resize(100, 100, function ($constraint) {
$constraint->aspectRatio();
})->save($destinationPathThumbnail.'/'.$image_name);
$destinationPath = public_path('/images');
$image->move($destinationPath, $image_name);
return back()
->with('success','Image Upload successful')
->with('imageName',$image_name);
}
}
Note: Before proceeding, ensure that you have created the "images" and "thumbnail" folders within the public directory of your Laravel project.
Now, let's create the image_upload.blade.php file for facilitating image uploads. Below is the code to be added to that file
resources/views/image_upload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Resize Image before Uploading using Intervention - Vidvatek</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Laravel 10 Resize Image before Uploading using Intervention - Vidvatek</h1>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> something wants wrong.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{ $message }}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="row">
<div class="col-md-4">
<strong>Original Image:</strong>
<br/>
<img src="/images/{{ Session::get('imageName') }}" width="300px" />
</div>
<div class="col-md-4">
<strong>Thumbnail Image:</strong>
<br/>
<img src="/thumbnail/{{ Session::get('imageName') }}" />
</div>
</div>
@endif
<form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<br/>
<input type="file" name="image" class="image">
</div>
<div class="col-md-12">
<br/>
<button type="submit" class="btn btn-success">Upload Image</button>
</div>
</div>
</form>
</div>
</body>
</html>
You might also like:
- Read Also: How to Create CRUD with Image Upload in Laravel 10
- Read Also: Building Complete CRUD Application in Laravel 10
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal