Laravel 8 Resize Image Upload Tutorial

By : phpicoder Created : February 25, 2021

Hello Friends, In this tutorial, we will learn how to upload resize image in laravel 8 web applications. I will tell you how to generate thumbnail upload image using intervention package with laravel 8 app. I will explain you step by step tutorial of resize image in laravel 8 application using image intervention.

Laravel does not have a default resize of image. But most Laravel developers use 'Image intervention package' in handling the image. It is easy to use.

If you're looking for an example on a resize image before uploading to the Laravel 8 app. So, you've come to the right place, because this laravel 8 will resize the image before uploading.

  • Download and Install Laravel 8 framework
  • Download and Install Intervention Image Library
  • Config app file
  • Set Route in Laravel 8
  • Make Controller in Laravel 8
  • Make View Blade File in Laravel 8
  • Run Laravel 8 Application

So just follow bellow step to create resize image example for your applications. 

Step 1: Install Laravel

 open command prompt and run below command to install latest laravel application.

composer create-project --prefer-dist laravel/laravel resize-image-upload

Step 2: Install intervention/image Package

installed laravel application and then after go to your project root directory and run following command. 

composer require intervention/image

we will install intervention/image package for resize image for over laravel 8 app

Step 3: config app file

we will install intervention/image package after open config/app.php file and add bellow code. 

return [

    ---------

    $provides => [

        ---------

        ---------,

        'Intervention\Image\ImageServiceProvider'

    ],

    $aliases => [

        ---------

        ---------,

        'Image' => 'Intervention\Image\Facades\Image'

    ]

]

Step 4: Set Route

Open routes/web.php file and add bellow route 

Route::get('resizeImage', 'ResizeImageController@resizeImage');
Route::post('resizeImagepost', 'ResizeImageController@resizeImagepost')->name('resizeImagepost');

Step 5: Create Controller

Now go to app/Http/Controllers/ and create new Controller name ResizeImageController.php and then following below code. 

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Http\Requests;
use Image;
class ResizeImageController extends Controller
{
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage()
    {
        return view('resizeUploadImage');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImagepost(Request $request)
    {
        $this->validate($request, [
            'img' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        if($request->hasFile('img')){

            $folder_path = '/iamges';
            $destinationPath = public_path($folder_path);

            $image = $request->file('img');

            $img_name = time().'.'.$image->getClientOriginalExtension();
            $destinationPath = public_path($folder_path);

            $img = Image::make($image->getRealPath());
            $img->save($destinationPath.'/'.$iamge_name);

            //resize image
            $img->resize(500,500)->save($destinationPath.'/'.$iamge_name);
            //resize thumb image
            $img->resize(100,100)->save($destinationPath.'/thumb/'.$iamge_name);

            $input['img'] = $iamge_name;
        }
   
        return back()
            ->with('success','Image Upload successful')
            ->with('imageName',$input['img']);
    }
   
}

resize thumb image

$img->resize(100,100)->save($destinationPath.'/thumb/'.$iamge_name);
// public/iamges/thumb/123456.png

Ok, Now we need two directory in your public folder (1)images and (2)thumb and please give permission to that folder and check. 

Step 6: View File

Now go to resources/views/ path and we will need resizeImage.blade.php, in this file manage upload form and error message or also success message. So first open resizeImage.blade.php and put bellow code. 

@extends('layouts.app')
@section('content')
<div class="container">
	<h2>Laravel 8 Resize Image Upload Tutorial</h2>
	@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="/images/thumb/{{ Session::get('imageName') }}" />
	    </div>
	</div>
	@endif
	   
	{!! Form::open(array('route' => 'resizeImagePost','enctype' => 'multipart/form-data')) !!}
	    <div class="row">
	        <div class="col-md-12">
	            <br/>
	            {!! Form::file('img', array('class' => 'img')) !!}
	        </div>
	        <div class="col-md-12">
	            <br/>
	            <button type="submit" class="btn btn-success">Upload Image</button>
	        </div>
	    </div>
	{!! Form::close() !!}
</div>
@endsection

Step 7: Run Laravel

Start the laravel application with following command: 

php artisan serve

After run above command we have a http://127.0.0.1:8000/resizeImage url.

I hope it can help you for resize image before upload in laravel 8 tutorial...