Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

laravel
php
communitycreator

How to resize an image before uploading using Laravel

Chinweuba Elijah Azubuike

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.

RELATED TAGS

laravel
php
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring