Categories

Blog Details

Laravel Image Upload

Image uploading is one of the most common and essential features in web applications. Whether you’re building a blog, an admin panel, or an eCommerce store — you’ll often need to upload and manage images.

In this guide, we’ll learn how to upload images in Laravel step-by-step using different methods — including store() and getClientOriginalExtension().
This tutorial is written for beginners, explained in simple words, and completely SEO optimized.

🧱 Step 1: Setup Your Laravel Project

If you don’t have a Laravel project yet, create one using the command below:

composer create-project laravel/laravel image_upload_tutorial

Then go inside your project folder:

 
cd image_upload_tutorial

Start your development server:

php artisan serve

🧰 Step 2: Create Controller

We’ll create a controller to handle the image upload logic.

php artisan make:controller ImageController

This will create a new file at:

app/Http/Controllers/ImageController.php

🗂️ Step 3: Create Upload Form (View File)

Let’s create a simple form to upload an image.
Go to resources/views and create a new file: upload.blade.php

 
<!DOCTYPE html>
<html>
<head>
    <title>Laravel Image Upload Tutorial</title>
</head>
<body>
    <h2>Laravel Image Upload Example</h2>

    @if(session('success'))
        <p style="color:green">{{ session('success') }}</p>
    @endif

    <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <label>Select Image:</label><br>
        <input type="file" name="image"><br><br>
        <button type="submit">Upload Image</button>
    </form>
</body>
</html>

✅ Important:

  • enctype="multipart/form-data" is required for file uploads.

  • @csrf is mandatory to protect your form from CSRF attacks.

⚙️ Step 4: Define Routes

Open routes/web.php and add:

 
use App\Http\Controllers\ImageController;

Route::get('/upload', [ImageController::class, 'create'])->name('image.create');
Route::post('/upload', [ImageController::class, 'store'])->name('image.store');

🧩 Step 5: Image Upload Method #1 — Using store()

Now open your controller (ImageController.php) and add this code:

 
namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

    public function store(Request $request)
    {
        // Validate file type and size
        $request->validate([
            'image' => 'required|image|mimes:jpg,jpeg,png,gif|max:2048'
        ]);

        // Store image using Laravel's storage system
        $path = $request->file('image')->store('uploads', 'public');

        // Optional: save path to database or session
        return back()->with('success', 'Image uploaded successfully! Path: ' . $path);
    }
}

🔍 Explanation:

  • store('uploads', 'public'): Saves file inside /storage/app/public/uploads.

  • max:2048: Restricts file size to 2MB.

  • Laravel automatically gives a unique name to each file.

✅ Advantages:

  • Very simple and clean.

  • Laravel handles naming and path management.

  • Perfect for most use cases.

🧩 Step 6: Image Upload Method #2 — Using getClientOriginalExtension()

If you want full control over how the image is named and where it’s stored, use this method.

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

    $file = $request->file('image');

    // Get the original file extension (jpg, png, etc.)
    $extension = $file->getClientOriginalExtension();

    // Create custom filename
    $filename = time() . '.' . $extension;

    // Move image manually to public/uploads folder
    $file->move(public_path('uploads'), $filename);

    return back()->with('success', 'Image uploaded successfully! File name: ' . $filename);
}

🔍 Explanation:

  • getClientOriginalExtension(): Returns the original extension of the uploaded file.

  • move(public_path('uploads'), $filename): Saves image manually in /public/uploads.

  • You control filename, folder, and structure yourself.

✅ Advantages:

  • Full customization of naming.

  • Useful when you want to store files in specific locations.

  • Common in admin panels and CMS systems.

🗝️ Step 7: Display Uploaded Images

If you want to display the uploaded image after saving, use:

 
@if(session('success'))
    <p style="color:green">{{ session('success') }}</p>
    <img src="{{ asset('storage/uploads/example.jpg') }}" width="200">
@endif

OR if you saved manually with move():

<img src="{{ asset('uploads/' . $filename) }}" width="200">

🧠 Step 8: Common Issues & Fixes

1️⃣ Storage not accessible in browser

Run this command:

 
php artisan storage:link

It links /storage to /public/storage.

2️⃣ Folder not found?

Make sure the folder exists:

public/uploads

If not, create it manually.

3️⃣ Permission denied?

Give write permission:

chmod -R 777 storage public/uploads

⚡ Step 9: Bonus — Store Image Path in Database

If you’re saving image info in a database:

$imagePath = $request->file('image')->store('uploads', 'public');

ModelName::create([
    'title' => $request->title,
    'image' => $imagePath
]);

And display it in Blade:

<img src="{{ asset('storage/' . $model->image) }}" width="150">

🧾 Comparison Between Both Methods

Feature store() getClientOriginalExtension() + move()
Naming Automatic (unique hash) Custom (you define)
Path Inside storage/app/public/uploads Inside public/uploads
Control Less manual control Full control
Use Case Simple uploads Custom folder structure

✅ Conclusion

Laravel makes image uploading super easy with multiple built-in methods.

  • Use store() if you want Laravel to handle everything automatically.

  • Use getClientOriginalExtension() + move() if you want full control over naming and location.

By following this step-by-step guide, you can easily implement image uploads in your Laravel project — whether for blogs, admin dashboards, or product galleries.

Leave A Reply

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

Ahmad

Ahmad Raza

Hi, I'm Ahmad Raza — a passionate Web Developer and Laravel enthusiast.

Related posts

Tags