Laravel 11 Multiple Image Upload With Preview Tutorial

Laravel 11 Multiple Image Upload with Preview allows users to show a preview of multiple images before uploading them to the server. And this helps them to confirm their selection before submitting the images.

Let’s start creating a display upload form, controller, route and use jquery to handle the preview of images before upload:

Step 1 – Create Multiple Image Upload Form View

Create a form view to allow users to select more than one image for upload:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Image Upload</title>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .preview-images-zone {
            width: 100%;
            border: 1px solid #ddd;
            min-height: 180px;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
        .preview-image {
            width: 150px;
            height: 150px;
            margin: 10px;
            overflow: hidden;
            position: relative;
        }
        .preview-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Multiple Image Upload with Preview</h2>
        <form id="uploadForm" action="{{ url('/upload/store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="input-group control-group increment">
                <input type="file" name="images[]" class="form-control" multiple>
            </div>
            <div class="preview-images-zone"></div>
            <button type="submit" class="btn btn-primary mt-3">Upload</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</body>
</html>

Step 2 – Handle Multiple Image Preview

To show a preview of the selected images before uploading them, you can use jQuery and JavaScript FileReader() method:

    <script>
        $(document).ready(function() {
            // Display image preview
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        var html = '<div class="preview-image"><img src="' + e.target.result + '"></div>';
                        $('.preview-images-zone').append(html);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            // Trigger image preview when file input changes
            $("input[name='images[]']").change(function() {
                readURL(this);
            });
        });
    </script>
</body>

Step 3 – Create Controller and Handle Image Upload

Create a methods in controller file by running the following command to handle multiple image upload process:

php artisan make:controller MultipleUploadController

Step 4 – Define Methods in Controller

Define a methods in the controller file to show multiple image upload forms and handle the process with validation:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class MultipleUploadController extends Controller
{
    public function index()
    {
        return view('upload');
    }

    public function store(Request $request)
    {
        // Validate the uploaded images
        $request->validate([
            'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048' // Adjust max file size as needed
        ]);

        // Handle image upload and save to storage
        if ($request->hasFile('images')) {
            foreach ($request->file('images') as $image) {
                $imageName = time() . '_' . $image->getClientOriginalName();
                $image->storeAs('public/images', $imageName);

                // Save image to database
                Image::create([
                    'filename' => $imageName
                ]);
            }
        }

        // Redirect back with success message
        return redirect()->back()->with('success', 'Images uploaded successfully.');
    }
}

Step 5 – Add Routes

Add routes in web.php file to handle file upload requests:

use App\Http\Controllers\MultipleUploadController;

Route::get('/upload', [MultipleUploadController::class, 'index']);
Route::post('/upload/store', [MultipleUploadController::class, 'store']);

Step 6 – Test Application

Run application by using the following command:

php artisan serve

Access the multiple image upload form with preview in your browser (http://127.0.0.1:8000/upload):

http://127.0.0.1:8000/upload