Laravel 11 Multiple Image Upload Tutorial

Multiple Image Upload in Laravel 11 refers to the process of allowing users to upload more than one image file at a time through a web form.

Let’s get started by following the steps below:

Step 1 – Create Multiple Image Upload Form View

Create a view file called upload.blade.php in the resources/views folder and create a form view where the user selects multiple images to upload to the server:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Multiple Image Upload Tutorial - ITCODSTUFF.COM</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-k+XR2BSU8A5AHF7tDv2n+Jq0cWwxXoKM2T/vFmv5Zd16wXtoRGM+pKd2TyTwL2Ij" crossorigin="anonymous">
</head>
<body>

    <div class="container mt-5">
        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <form action="{{ route('images.upload.submit') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="images" class="form-label">Select Images:</label>
                <input class="form-control" type="file" id="images" name="images[]" multiple>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
    </div>

    <!-- Bootstrap JS (optional, for Bootstrap features) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gjFxvFhPLFm/nx1zXt4k5zqc/KS9MdCBYO//4Bj5rTBv8vC5WPzWFrGBSStid57T" crossorigin="anonymous"></script>
</body>
</html>

Step 2 – 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 ImageController

Step 3 – Define Methods in Controller

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

namespace App\Http\Controllers;

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

class ImageController extends Controller
{
    public function uploadForm()
    {
        return view('upload');
    }

    public function uploadSubmit(Request $request)
    {
        $request->validate([
            'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048' // Validate multiple image
        ]);

        if ($request->hasFile('images')) {
            foreach ($request->file('images') as $image) {
                $filename = $image->store('images', 'public');
                
                //Image::create(['filename' => $filename]); //upload file in database
            }
        }

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

Step 4 – Add Routes

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

use App\Http\Controllers\ImageController;

Route::get('/images/upload', [ImageController::class, 'uploadForm'])->name('images.upload');
Route::post('/images/upload', [ImageController::class, 'uploadSubmit'])->name('images.upload.submit');

Step 5 – Display Success/Error Messages in Form View

Edit your upload.blade.php and add the following line into it to display success or error messages after the form submission:

@if(session('success'))
    <div>{{ session('success') }}</div>
@endif

@if(session('error'))
    <div>{{ session('error') }}</div>
@endif

Step 6 – Test Application

Run application by using the following command:

php artisan serve

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

http://127.0.0.1:8000/images/upload

With just 6 steps you will be able to easily upload multiple image in Laravel 11 application.