Laravel 9 Resize Image Before Upload Tutorial
May 03, 2022 . Admin
Hello Friends,
Now let's see example of how to resize image before upload in laravel 9. This is a short guide on laravel 9 if resize image before upload. We will use how to use resize image before upload in laravel 9. Here you will learn how to use resize image before upload in laravel 9. Let's get started with how to resize image before upload in laravel 9.
Here i will give you many example how you can resize image before upload in laravel 9.
Step 1: Download LaravelLet us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-appStep 2: Install Intervention Image Package
this package through we can generate thumbnail image for our project. so first fire bellow command in your cmd or terminal.
composer require intervention/image
Now we need to add provider path and alias path in config/app.php file
config/app.php
return [
......
$provides => [
......,
Intervention\Image\ImageServiceProvider::class
],
$aliases => [
.....,
'Image' => Intervention\Image\Facades\Image::class
]
]
Step 3 Create Route
Now, we will add routes and controller file so first add bellow route in your routes.php file.
routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PhotoResizeController;
/*
|--------------------------------------------------------------------------
| 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::get('resizePhoto', [PhotoResizeController::class, 'resizePhoto']);
Route::post('resizePhotoPost', [PhotoResizeController::class, 'resizePhotoPost'])->name('resizePhotoPost');
Step 4: Create Controller
php artisan make:controller PhotoResizeController
you can find PhotoResizeController.php file in your app/Http/Controllers directory. open PhotoResizeController.php file and put bellow code in that file.
app\Http\Controllers\PhotoResizeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Image;
class PhotoResizeController extends Controller
{
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function resizePhoto()
{
return view('resizePhoto');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function resizePhotoPost(Request $request)
{
$this->validate($request, [
'title' => 'required',
'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$photo = $request->file('photo');
$input['photoname'] = time().'.'.$photo->extension();
$destinationPath = public_path('/thumbnail');
$img = Image::make($photo->path());
$img->resize(50, 50, function ($constraint) {
$constraint->aspectRatio();
})->save($destinationPath.'/'.$input['photoname']);
$destinationPath = public_path('/photos');
$photo->move($destinationPath, $input['photoname']);
return back()
->with('success','Photo Upload successful')
->with('photoName',$input['photoname']);
}
}
Step 5: Create Blade File
In this last step we will create resizePhoto.blade.php file for photo upload form and manage error message and also success message.
resources\views\resizePhoto.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Resize Photo Tutorial - Mywebtuts.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-header">
<h5>Laravel 9 Resize Photo Tutorial - Mywebtuts.com</h5>
</div>
<div class="card-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<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-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<div class="row">
<div class="col-md-4">
<strong>Original Photo:</strong>
<br/>
<img src="/photos/{{ Session::get('photoName') }}" style="width: 100px;" />
</div>
<div class="col-md-4">
<strong>Thumbnail Photo:</strong>
<br/>
<img src="/thumbnail/{{ Session::get('photoName') }}" />
</div>
</div>
@endif
<form action="{{ route('resizePhotoPost') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<label>Title :</label>
<input type="text" name="title" class="form-control" placeholder="Add Title">
</div>
<div class="col-md-12 mt-2">
<label>Choose Photo :</label><br>
<input type="file" name="photo" class="image">
</div>
<div class="col-md-12">
<br/>
<button type="submit" class="btn btn-success">Upload Photo</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After, last create two directory in your public folder (1)photos and (2)thumbnail and please give permission to that folder and check.
Run Laravel App:All steps have been done, now you have to type the given command and hit enter to run the laravel app:
php artisan serve
Now, you have to open web browser, type the given URL and view the app output:
http://localhost:8000/resizePhoto
It will help you....