How to Image Upload in Laravel 11 Example

Greetings developers, In this article, we will explore the process of image uploading in Laravel 11. Additionally, we'll delve into techniques for validating both the image file type and size within the Laravel 11 framework.

I'm excited to share with you a straightforward example of how to upload images in Laravel 11. Throughout this guide, we'll walk through the steps together, making the process easy to understand.

So, let's see laravel 11 image upload, how to validate image type in laravel 11, and how to validate image size in laravel 11.


Step-by-step guide: Upload Image File in Laravel 11

Step 1: Install Laravel 11

In the first step, we'll install laravel using the following composer command.

composer create-project laravel/laravel laravel-11-example


Step 2: Create Controller

Now, we'll create the ImageController. In this controller, we'll add two functions. So, execute the following command.

php artisan make:controller ImageController


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class ImageController extends Controller
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function index(): View
        return view('image-upload');
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function store(Request $request): RedirectResponse
            'image' => 'required|image|mimes:jpeg,png,jpg,svg|max:4096',
        $image_name = time().'.'.$request->image->extension();  
        $request->image->move(public_path('images'), $image_name);        
        return back()->with('success', 'Image uploaded successfully!')
                     ->with('image', $imageName); 

Note: create an images folder in the public folder.

Store Image in Storage Folder

$request->image->storeAs('images', $image_name);
// storage/app/images/test.png

Store Image in Public Folder

$request->image->move(public_path('images'), $image_name);
// public/images/test.png

Store Image in S3

$request->image->storeAs('images', $image_name, 's3');
Step 3: Create Routes

Then, we'll define routes for displaying and storing images in laravel 11. So, open the web.php file.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('');
Step 4: Create Blade File

Create a new Blade file named image-upload.blade.php. This file will contain the HTML markup for the image upload form.


<!DOCTYPE html>
    <title>How to Image Upload in Laravel 11 Example - Techsolutionstuff</title>
    <link href="" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="" />
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> How to Image Upload in Laravel 11 Example - Techsolutionstuff</h3>
        <div class="card-body">
                <div class="alert alert-success" role="alert"> 
                    {{ $value }}
                <img src="images/{{ Session::get('image') }}" width="40%">
            <form action="{{ route('') }}" method="POST" enctype="multipart/form-data">
                <div class="mb-3">
                    <label class="form-label" for="image">Image:</label>
                        class="form-control @error('image') is-invalid @enderror">
                        <span class="text-danger">{{ $message }}</span>
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
Step 5: Run the Laravel 11 Application

In the last step, execute the following command to start the Laravel development server.

php artisan serve


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.