Laravel 8 Resize Image Before Upload Tutorial
Jun 24, 2021 . Admin
Hello Friends,
Now let's see example of how to resize image before upload in laravel. This is a short guide on laravel if resize image before upload. We will use how to use resize image before upload in laravel. Here you will learn how to use resize image before upload in laravel. Let's get started with how to resize image before upload in laravel.
Here i will give you many example how you can resize image before upload in laravel.
Step 1 : Install Laravel 8we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.
composer create-project --prefer-dist laravel/laravel blogStep 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
Path: config/app.php
return [
......
$provides => [
......,
Intervention\Image\ImageServiceProvider::class
],
$aliases => [
.....,
'Image' => Intervention\Image\Facades\Image::class
]
]
Step 3 : Add Route
Now, we will add routes and controller file so first add bellow route in your routes.php file.
Path: 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.
Path: 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 : Blade File and Create Upload directory
In this last step we will create resizePhoto.blade.php file for photo upload form and manage error message and also success message.
Path: resources\views\resizePhoto.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 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 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.
Now run bellow command for quick run:
php artisan serve
Now open bellow URL on your browser:
localhost:8000/admin/resizePhoto
It will help you....