How to Upload and Resize Image in Laravel 5.8

If you are looking for tutorial on Resize Image before upload in Laravel 5.8 framework. So, you have come on the right place, because in this Laravel 5.8 image upload tutorial, in which we have step by step describe how to resize image in Laravel 5.8 framework at the time of uploading image. In Laravel 5.8 framework for resize image here we will use Intervention Image package for resize image at the time of uploading of an Image.

Resize image is very useful feature in any web based application, suppose in your web application if you have profile module and in this module you want to display profile image, then if you have display full size image then it will require more bandwidth for load image, but if you have load small thumbnail type image, then it will load fast. You can generate thumbnail image at the time of uploading of image by resize or cropping of image, you can generate thumbnail image and store in folder.

There are lots reader of our tutorial has requested us to publish web tutorial on how to resize image in Laravel 5.8 application. In Web development image resize is a required feature for use image as per size of the web page container. By Image resize it will help us to improve our loading of web page speed. In this post, we have decided to show how can we resize image in Laravel 5.8 by using intervention image library. By using this Intervention Library, we can easy to resize image at the time of uploading. Because this library has use PHP GD library and Imagegick for image resize and crop. Below you can find process for Resize image in Laravel 5.8.

• Download and Install Laravel 5.8 framework
• Download and Install Intervention Image Library
• Make Controller in Laravel 5.8
• Make View Blade File in Laravel 5.8
• Set Route in Laravel 5.8
• Run Laravel 5.8 Application

Download and Install Laravel 5.8 framework

For make application in Laravel 5.8 framework, first we need to download Laravel 5.8 framework and install in our local computer. For this we have go command prompt, in which first we need to run "composer" command, and go to directory in which we want to download and install laravel 5.8 framework. After this run following command.

composer create-project --prefer-dist laravel/laravel image_resize

This command will make image_resize folder in define directory, and in this folder it will download laravel 5.8 framework.

Download and Install Intervention Image Library

For resize image in Laravel 5.8 framework. For this here we have use Intervention Image package. Now we want download and install in Laravel 5.8 framework. For this we have to write following command, this command will download Intervention Image package in Laravel 5.8 framework for resize image at the time of uploading of image.

Make Controller in Laravel 5.8

In Laravel 5.8 application, for handle http request here we have to make controller. For make controller in Laravel 5.8 framework, first we need the system in which composer has been installed and then after go to your project root directory and run following command.

php artisan make:controller ResizeController

This command will make ResizeController.php controller class file in app/Http/Controllers folder.

In this controller class first we need to import intervention image library, for in this file first we need to write use Image; statement. By using this statement, we can import intervention image library in this controller class.

In this controller class we have make following method.

index() - This is the root method of this controller. This method has been load resize.blade.php file in browser.

resize_image(Request $request) - This method has been received request for image upload.
In this method first it has validate form data by using Laravel validator.
After this, it has make new name for image file. After making new name, first it has resize image by using intervention image library and upload resize image in thumbnail folder.
Once resize or crop image has been save into public directory thumbnail folder. Then after it has process for upload original size image in public directory images folder. After uploading and resize image, it will redirect url to it's previous location with data like success message and new image name.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use Image;

class ResizeController extends Controller
{
    function index()
    {
     return view('resize');
    }

    function resize_image(Request $request)
    {
     $this->validate($request, [
      'image'  => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
     ]);

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

     $image_name = time() . '.' . $image->getClientOriginalExtension();

     $destinationPath = public_path('/thumbnail');

     $resize_image = Image::make($image->getRealPath());

     $resize_image->resize(150, 150, function($constraint){
      $constraint->aspectRatio();
     })->save($destinationPath . '/' . $image_name);

     $destinationPath = public_path('/images');

     $image->move($destinationPath, $image_name);

     return back()
       ->with('success', 'Image Upload successful')
       ->with('imageName', $image_name);

    }
}

Make View Blade File in Laravel 5.8

View blade file in Laravel has been use for display html data on web page. In Laravel view file has been store in resources/views folder and here we have store resize.blade.php file. In this file we have make html form for uploading image. And by using Laravel expression, here it will display success or validation error and it will also display uploaded and resize image on web page after uploading of image.

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - Image Upload and Resize</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h1 align="center">Laravel 5.8 - Image Upload and Resize</h1>
   <br />   
   <form method="post" action="{{ url('resize/resize_image') }}" enctype="multipart/form-data">
    @CSRF
    <div class="row">
           <div class="col-md-4" align="right">
            <h3>Select Image</h3>
           </div>
           <div class="col-md-4">
            <br />
               <input type="file" name="image" class="image" />
           </div>
           <div class="col-md-2">
            <br />
               <button type="submit" class="btn btn-success">Upload Image</button>
           </div>
       </div>
   </form>
   <br />
   @if(count($errors) > 0)
    <div class="alert alert-danger">
           <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-6">
           <strong>Original Image:</strong>
           <br/>
           <img src="/images/{{ Session::get('imageName') }}" class="img-responsive img-thumbnail">
       </div>
       <div class="col-md-4">
           <strong>Thumbnail Image:</strong>
           <br/>
           <img src="/thumbnail/{{ Session::get('imageName') }}" class="img-thumbnail" />
       </div>
   </div>
   @endif
  </div>
 </body>
</html>

Set Route in Laravel 5.8

Once your all code is ready, lastly we have to set the route of Controller method. For this we have to go routes/web.php file, and in this file we have to define the root of controller method.

Route::get('resize', 'ResizeController@index');

Route::post('resize/resize_image', 'ResizeController@resize_image');

Run Laravel 5.8 Application

Now we have to check output in browser. For this we have to again go to command prompt and write following command.

php artisan serve

This command will start Laravel server and it will give you http://127.0.0.1:8000 this base url of your Laravel application. For check above code you have to hit following url.

http://127.0.0.1:8000/resize

By hit above URL you can upload image and check image has been properly resize or not. So from this post you can learn something new lesson like resize image with upload in Laravel 5.8 framework.