Upload and Resize Multiple Images in Laravel

Apart from this blog, I am running a YouTube channel where I share the video tutorials. Recently one of the YouTube channel subscribers asked about resizing multiple images in Laravel. They want to resize multiple images in one go. In this article, we study how to upload and resize multiple images in Laravel.

Intervention Image is an open source library which allows us to manipulate images. I am going to use this library to resize images.

Intervention Image

Getting Started

To achieve our goal you need to install and configure the Intervention Image library into the Laravel project. Open the terminal in your project root directory and run the command:

composer require intervention/image

Once the library is installed, open the config/app.php file and add service providers, facade in it. Add the service providers for this package to the $providers array.

Intervention\Image\ImageServiceProvider::class,

Add the facade to the $aliases array.

'Image' => Intervention\Image\Facades\Image::class,

Next, we need a directory where we store our uploaded files. Laravel Filesystem provides a public disk to store the files. The public disk contains files which are publicly accessible. You will find the uploaded files in the storage/app/public folder. To access these files on the web, you need to create a symbolic link from public/storage to storage/app/public.

Create a symbolic link using the command:

php artisan storage:link

This command would create a storage folder under the public directory. This is where we store our files.

Upload and Resize Images in Laravel

In order to upload files on a server, you need a form. Let’s create a form where you can select multiple files to upload on a server. Below is a sample code of the form that will go inside your view file.

<form action="{{ url('ROUTE HERE') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image[]" id="exampleInputFile" multiple />
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

In the form, I have taken a file input name as ‘profile_image[]’ which sends an array of files to the server. Also, I added an attribute ‘multiple’ which allows us to select multiple files. Replace the placeholder ROUTE_URL with your actual value.

As we need to upload and resize the images, in the controller add two facades as follows.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image; //Intervention Image
use Illuminate\Support\Facades\Storage; //Laravel Filesystem

class ImageController extends Controller
{

}

By adding the facade, you are able to call resize functions of the Intervention Image library. In the below code, I will upload the files in two places. One is the original image. The second one is under the thumbnail directory. We first upload the original image in the thumbnail folder and then resize it.

public function store(Request $request)
{
    if ($request->hasFile('profile_image')) {

        foreach($request->file('profile_image') as $file){

            //get filename with extension
            $filenamewithextension = $file->getClientOriginalName();

            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

            //get file extension
            $extension = $file->getClientOriginalExtension();

            //filename to store
            $filenametostore = $filename.'_'.uniqid().'.'.$extension;

            Storage::put('public/profile_images/'. $filenametostore, fopen($file, 'r+'));
            Storage::put('public/profile_images/thumbnail/'. $filenametostore, fopen($file, 'r+'));

            //Resize image here
            $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
            $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
                $constraint->aspectRatio();
            });
            $img->save($thumbnailpath);
        }

        return redirect('ROUTE_URL')->with('success', "Image uploaded successfully.");
    }
}

Here we are resizing the image proportionally. Doing so, we keep the aspect ratio and the image will not cut off. I am passing width as 400 and height as 150. You can change these values as per your requirement.

Go ahead and test it. You will get the resize version of uploaded images under the ‘storage/profile_images/thumbnail’ directory.

If you are looking for hard crop then replace below lines

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

With

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

I hope you understand how to upload and resize multiple images in Laravel. Please share your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

5 thoughts on “Upload and Resize Multiple Images in Laravel

Leave a Reply

Your email address will not be published. Required fields are marked *