How To Resize Image Before Upload In Laravel 10

Websolutionstuff | Mar-29-2023 | Categories : Laravel

In this article, we will see how to resize images before uploading in laravel 10. Here, we will learn about laravel 10 resize images before upload. we are installing the intervention/image composer package. intervention/image provides to resize an image using resize() method also you can crop, rotate, compress, and blur the image.

Intervention Image is a PHP image handling and manipulation library providing an easier and more expressive way to create, edit, and compose images.

So, let's see laravel 10 resize an image before uploading, how to resize an image in laravel 10, laravel 10 image resize aspect ratio, laravel 10 intervention image, and intervention image laravel 10.

Step 1: Install Laravel 10

In this step, we will install laravel 10 using the following command. So, run the below command to the terminal.

composer create-project laravel/laravel image-resize-example

 

 

Step 2: Install Intervention Image Package

Now, we will install the intervention/image package using the below command. intervention/image is very useful for resizing images and other actions performed on the image.

composer require intervention/image

 

Step 3: Create Routes

In this step, we will add routes in the web.php file. So, add the following code to that file.

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

In this step, we will create a new ImageController using the following command.

php artisan make:controller ImageController

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

Note: Make sure, you have created the "images" and "thumbnail" folders in the public folder.

 

 

Step 5: View File

Now, we will create the image_upload.blade.php file for uploading an image. So, add the following code to that file.

resources/views/image_upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Resize Image Before Upload In Laravel 10 - Websolutionstuff</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>How To Resize Image Before Upload In Laravel 10 - Websolutionstuff</h1>
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> something wants wrong.<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>

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Datatables Filter with Dropdown
Laravel 9 Datatables Filter wi...

In this article, we will see laravel 9 datatables filter with dropdown. Here we will add datatables...

Read More

Mar-12-2022

How To Add Action Button In Angular 15 Material Datepicker
How To Add Action Button In An...

In this tutorial, I will guide you through the process of adding an action button to the Angular 15 Material datepicker...

Read More

Jul-07-2023

Laravel 10 Multiple Image Upload Example
Laravel 10 Multiple Image Uplo...

In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple i...

Read More

Mar-17-2023

How to Validate Empty Input Field in jQuery
How to Validate Empty Input Fi...

In the dynamic world of web development, form validation is a crucial aspect of creating a user-friendly and error-free...

Read More

Sep-25-2023