How to resize an image before uploading using Laravel

Resizing an image in an application is an important aspect of an application, especially if the application handles a lot of image upload.

In this shot, we go over how to resize images just before they are uploaded into your application.

Step 1: Installation

Run the below composer command to install the intervention image package.

composer require intervention/image

Step 2: Configuration

Go to your config/app.php and add this code:

return [
    ......
    'providers' => [
        ......
        ......,
        Intervention\Image\ImageServiceProvider::class
    ],
    'aliases' => [
        .....
        .....,
        'Image' => Intervention\Image\Facades\Image::class
    ]
]

Step 3: Directing requests

Paste the below code into your routes/web.php file to ensure that requests are directed to the controller for further processing:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;`
Route::get('resizeImage', [ImageController::class, 'resizeImage']);
Route::post('resizeImage', [ImageController::class, 'resizeImage'])->name('resizeImage');

Step 4: ImageController

To create ImageController, where we add the logic to process the resizing and uploading of the image, use the below command:

php artisan make:controller ImageController

Step 5: Edit the controller

The controller will be found in your app/Http/Controllers directory as ImageController.php. Now, paste the below code:

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Http\Requests;
use Image;
  
class ImageController extends Controller
{
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage()
    {
        return view('resizeImage');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $image = $request->file('image');
        $input['imagename'] = time().'.'.$image->extension();
     
        $destinationPath = public_path('/thumbnail');
        $img = Image::make($image->path());
        $img->resize(100, 100, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPath.'/'.$input['imagename']);
   
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $input['imagename']);
   
        return back()
            ->with('success','Image Upload successful')
            ->with('imageName',$input['imagename']);
    }
   
}

Step 6: Create and edit the blade file

Go to resources/views and create a new file with the name resizeImage.blade.php Paste the below code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Resize Image Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  
<div class="container">
    <h1>Laravel Resize Image Tutorial</h1>
    @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 Image:</strong>
            <br/>
            <img src="/images/{{ Session::get('imageName') }}" />
        </div>
        <div class="col-md-4">
            <strong>Thumbnail Image:</strong>
            <br/>
            <img src="/thumbnail/{{ Session::get('imageName') }}" />
        </div>
    </div>
    @endif
         
    <form action="{{ route('resizeImage') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-4">
                <br/>
                <input type="text" name="title" class="form-control" placeholder="Add Title">
            </div>
            <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>

Lastly, create two directories, images and thumbnail, and ensure they have the necessary permissions.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)