Laravel 11 Image Upload Tutorial

Image upload is a common feature in Laravel 11 applications for various purposes like user profile picture, product image or content upload.

Let’s get started by following the steps below to upload an image with server side validation in laravel 11 project.

Step 1 – Create a Form for Image Upload

Create file image-upload-form.blade.php in resources/views folder, and then create a form where users select image for upload to server and database:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 Image Upload Tutorial - itcodStuff.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="mt-5">Image Upload Laravel 11 - ITCODSTUFF.COM</h1>
        <form action="{{ url('upload-image') }}" method="post" enctype="multipart/form-data" class="mt-4">
            @csrf
            <div class="mb-3">
                <label for="image" class="form-label">Choose Image</label>
                <input type="file" class="form-control" id="image" name="image">
            </div>
            <button type="submit" class="btn btn-primary">Upload Image</button>
        </form>
    </div>

    <!-- Bootstrap JS (Optional, only if you need JavaScript features) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2- Handle Image Upload in Controller

Create a methods in controller file to handle image upload process:

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

class ImageController extends Controller
{
    public function showImageUploadForm(Request $request)
    {
        return view('image-upload-form');
    }
    public function uploadImage(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $imageName = time().'.'.$request->image->extension();  

        $request->image->move(public_path('images'), $imageName);

        $imagePath = 'images/' . $imageName;

        // Store image path in database if needed
        $image = new Image();
        $image->image_path = $imagePath;
        $image->save();

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

Step 3 – Use Server-Side Validation for Image Upload

To validate the image size (2mb, 5mb,etc), mime type (jpg, .jpeg, .png, .gif,etc), before storing it in the folder and database, use the built-in validate() method in the controller; as follows:

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

Step 4 – Define Routes

Define routes in web.php file to handle image upload requests:

use App\Http\Controllers\ImageController;

Route::get('/image-upload-form', [ImageController::class, 'showImageUploadForm']);
Route::post('/upload-image', [ImageController::class, 'uploadImage']);

Step 5 – Test Application

Run application by using the following command:

php artisan serve

Now test your laravel 11 image upload application in browser:

http://127.0.0.1:8000/image-upload-form

In this simple tutorial, you saw how to create a form for an image upload and create methods in a controller that handles the image upload with validation in laravel 11.

Step 1 – Create a Form for Image Upload

Step 2- Handle Image Upload in Controller

Step 3 – Use Server-Side Validation for Image Upload

Step 4 – Define Routes

Step 5 – Test Application

Leave a Comment Cancel reply