How to Upload User Profile Image in Laravel 12 (Beginner-Friendly Guide)

👋 Introduction: Profile Images Matter!

Whether you're building a social network, an admin panel, or a blogging platform — allowing users to upload profile images makes your app more personal, interactive, and professional.
Luckily, Laravel 12 makes this task simple and elegant. 🧑‍💻

In this tutorial, we’ll walk you through step-by-step how to upload a user’s profile image and store it properly in your Laravel app — without confusion or complexity. Even if you're new to Laravel, you’ll be able to follow along easily. 🙌

🧱 Requirements Before We Begin

Make sure you have the following set up:

• Laravel 12 project installed ✅
• A working user registration/login system (e.g. via Laravel Breeze, Jetstream, or custom) ✅
• Basic knowledge of Laravel Blade, routes, and controllers ✅

If not, you can install Laravel quickly using:

composer create-project laravel/laravel laravel-profile-upload

🗂️ Step 1: Add Profile Image Column in Users Table

First, let’s modify the users table to store the profile image path.

🔧 Create a migration:

php artisan make:migration add_profile_image_to_users_table --table=users

✍️ In the migration file:

public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('profile_image')->nullable()->after('email');
    });
}

✅ Then run the migration:

php artisan migrate

🖼️ Step 2: Update the User Model

Add profile_image to the $fillable array in app/Models/User.php:

protected $fillable = [
    'name',
    'email',
    'password',
    'profile_image', // ✅ Add this
];

📝 Step 3: Create the Upload Form

Now let’s build a Blade form where users can upload their profile picture.

📄 In your Blade view (e.g., resources/views/profile.blade.php):

<form action="{{ route('profile.upload') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div>
        <label for="profile_image">Choose Profile Image</label>
        <input type="file" name="profile_image" id="profile_image">
    </div>

    <button type="submit">Upload</button>
</form>

💡 Tip: Always set enctype="multipart/form-data" for file uploads.

🧠 Step 4: Create the Route

Open routes/web.php and define the upload route:

use App\Http\Controllers\ProfileController;

Route::post('/profile/upload', [ProfileController::class, 'upload'])->name('profile.upload');

🧑‍🏫 Step 5: Build the Controller Logic

Generate the controller (if you don’t have one already):

php artisan make:controller ProfileController

Now add the upload method to handle the file upload:

📦 app/Http/Controllers/ProfileController.php

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

    $user = auth()->user();

    if ($request->hasFile('profile_image')) {
        $image = $request->file('profile_image');
        $name = time().'_'.$image->getClientOriginalName();
        $path = $image->storeAs('profile_images', $name, 'public');

        // Optional: delete old image
        if ($user->profile_image) {
            Storage::disk('public')->delete($user->profile_image);
        }

        $user->profile_image = $path;
        $user->save();
    }

    return back()->with('success', 'Profile image uploaded successfully!');
}

📂 This saves the image to storage/app/public/profile_images.
👉 Make sure you have a symbolic link:

php artisan storage:link

🌄 Step 6: Display the Profile Image

🖥️ Show image in Blade:

@if (auth()->user()->profile_image)
    <img src="{{ asset('storage/' . auth()->user()->profile_image) }}" alt="Profile Image" width="150">
@else
    <img src="{{ asset('default-avatar.png') }}" alt="Default Image" width="150">
@endif

💡 Real-World Example Analogy

Think of your Laravel app as a digital passport system.
Uploading a profile image is like pasting a photo on your passport. It helps the system — and others — recognize and personalize your experience.

Just like in real life, you need a clear and secure way to store and show that photo — and Laravel provides all the tools you need!

🧼 Optional: Clean Code Tips

• Store uploaded images in separate folders per user (profile_images/user_123/)
• Resize/compress images using Intervention Image
• Always validate and sanitize files before saving

✅ Key Takeaways

• Use multipart/form-data and Laravel’s storeAs() method to save files securely
• Always validate file types and sizes
• Store file paths in the database, not the actual images
• Use php artisan storage:link to access images publicly
• Show uploaded images using asset('storage/…')

🎉 Conclusion

And there you go — you’ve just learned how to upload and display user profile images in Laravel 12 step-by-step! 🥳

This is an essential feature for any modern web app and opens the door to even more advanced media handling.

Got stuck somewhere? Let us know in the comments or reach out — happy coding! 👨‍💻👩‍💻