How to Resize Images Before Upload in LARAVEL 10

Spread the love

Hello Guys,

Discover a comprehensive guide on Resize Images Before Upload in Laravel 10. This step-by-step tutorial will walk you through the process of creating thumbnail images using Laravel 10, ensuring that your images are perfectly sized before they’re uploaded. We’ll also delve into a practical example of image intervention in Laravel 10.

You’ll start by installing the intervention/image composer package, which provides the handy resize() method for image resizing. We’ll guide you in designing a user-friendly form with an input field where you can effortlessly select an image and preview both the original and thumbnail versions.

Follow the steps outlined below to seamlessly create thumbnail images for your Laravel 10 application.

Resize Images Before Upload Example:

Step 1: Install Laravel 10

While it’s not mandatory, you can execute the following command if you haven’t already established your Laravel application:

Also Read: How to Generate Barcode using Laravel 10 with example

composer create-project laravel/laravel example-app

Step 2: Install Intervention Image Package

In the second stage, we’ll set up an intervention/image tool for resizing images. This package enables the creation of project thumbnail images. To get started, simply execute the following command in your terminal or CMD window.

composer require intervention/image

Step 3: Create Routes

Include this route in your routes/web.php file at the outset, as we’ll soon be introducing additional routes and a controller file during this phase.

Also Read: How to INTEGRATION Razorpay Payment Gateway in Laravel 10

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');
});

Step 4: Create Controller File

To resize and upload an image, begin by executing the following command:

php artisan make:controller ImageController

Following the execution of this command, navigate to your app/Http/Controllers directory to locate the ImageController.php file. Next, open the ImageController.php file and insert the provided code.

Ensure that the “images” and “thumbnail” folders are present in the public directory.

Also Read: How to Run Specific Seeder in Laravel?

app/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('imageUpload');
    }
      
    /**
     * 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');
        $imageName = time().'.'.$image->extension();
       
        $destinationPathThumbnail = public_path('/thumbnail');
        $img = Image::make($image->path());
        $img->resize(100, 100, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPathThumbnail.'/'.$imageName);
     
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $imageName);
     
        return back()
            ->with('success','Image Upload successful')
            ->with('imageName',$imageName);
    }
}

Step 5: View File and Create Upload directory

In the concluding phase, we will create the ‘imageUpload.blade.php‘ file for the photo upload form and handle success and error messages effectively. Start by generating the code in the ‘imageUpload.blade.php‘ file as follows:

resources/views/imageUpload.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Resize Image Tutorial - itcodestuff.com</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>Laravel 10 Resize Image Tutorial - itcodestuff.com</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-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>

Run Laravel App:

To launch your Laravel application, follow these essential steps, and be sure to execute the provided command by pressing ‘Enter‘.

Also Read: How to use Ajax Autocomplete Search using JQUERY UI in laravel 10

php artisan serve

Access the App’s Output: Simply Paste the Given URL into Your Web Browser

http://localhost:8000/image-upload

Discover the best in Laravel blog through our thoughtfully crafted content.

Leave a Comment