In this article, we will see how to resize images before uploading in laravel 10. Here, we will learn about laravel 10 resize images before upload. we are installing the intervention/image composer package. intervention/image provides to resize an image using resize() method also you can crop, rotate, compress, and blur the image.
Intervention Image is a PHP image handling and manipulation library providing an easier and more expressive way to create, edit, and compose images.
So, let's see laravel 10 resize an image before uploading, how to resize an image in laravel 10, laravel 10 image resize aspect ratio, laravel 10 intervention image, and intervention image laravel 10.
In this step, we will install laravel 10 using the following command. So, run the below command to the terminal.
composer create-project laravel/laravel image-resize-example
Now, we will install the intervention/image package using the below command. intervention/image is very useful for resizing images and other actions performed on the image.
composer require intervention/imageIn this step, we will add routes in the web.php file. So, add the following code to that 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 will create a new ImageController using the following command.
php artisan make:controller ImageControllerapp/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: Make sure, you have created the "images" and "thumbnail" folders in the public folder.
Now, we will create the image_upload.blade.php file for uploading an image. So, add the following code to that file.
resources/views/image_upload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Resize Image Before Upload In Laravel 10 - Websolutionstuff</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>How To Resize Image Before Upload In Laravel 10 - Websolutionstuff</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: Laravel 8 Image Upload Validation
- Read Also: jQuery Image Magnifier on Mouse Hover
- Read Also: How To Check Image Blur Or Not Using Python
- Read Also: How To Convert Image Into Base64 String Using jQuery
