Laravel 12 File Storage: How to Add User Profile Pictures – A Real-World Example

In the first part of this blog (Laravel 12 File Storage), we covered the basics of Laravel's file storage system, including configuration, file operations, and working with cloud storage. Now, let’s dive into a real-world example to solidify your understanding. We’ll build a simple user profile system where users can upload and manage their profile pictures.

This example will cover:

1. Setting up the database and model.
2. Creating a form for file uploads.
3. Storing and retrieving profile pictures.
4. Displaying the profile picture on the user’s profile page.
5. Deleting the profile picture.

By the end of this tutorial, you’ll have a fully functional profile picture upload feature in your Laravel 12 application.

Table of Contents

1. Setting Up the Database
2. Creating the User Profile Form
3. Handling File Uploads
4. Displaying the Profile Picture
5. Deleting the Profile Picture
6. Conclusion

1. Setting Up the Database

First, let’s create a migration to add a profile_picture column to the users table.

Run the following Artisan command to create a migration:

php artisan make:migration add_profile_picture_to_users_table

In the migration file, add the profile_picture column:

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

public function down()
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('profile_picture');
    });
}

Run the migration to update the users table:

php artisan migrate

2. Creating the User Profile Form

Next, let’s create a form where users can upload their profile picture.

Blade Template (resources/views/profile/edit.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Profile</title>
</head>
<body>
    <h1>Edit Profile</h1>

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

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

        <label for="profile_picture">Profile Picture:</label>
        <input type="file" name="profile_picture" id="profile_picture">
        <br><br>

        <button type="submit">Update Profile</button>
    </form>

    <br>
    <a href="{{ route('profile.show') }}">Back to Profile</a>
</body>
</html>

3. Handling File Uploads

Now, let’s create the controller methods to handle the file upload.

Controller (app/Http/Controllers/ProfileController.php)

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class ProfileController extends Controller
{
    // Show the edit profile form
    public function edit()
    {
        return view('profile.edit');
    }

    // Update the user's profile picture
    public function update(Request $request)
    {
        $request->validate([
            'profile_picture' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $user = Auth::user();

        // Delete the old profile picture if it exists
        if ($user->profile_picture) {
            Storage::disk('public')->delete($user->profile_picture);
        }

        // Store the new profile picture
        $path = $request->file('profile_picture')->store('profile_pictures', 'public');
        $user->profile_picture = $path;
        $user->save();

        return redirect()->route('profile.edit')->with('success', 'Profile picture updated successfully!');
    }

    // Show the user's profile
    public function show()
    {
        $user = Auth::user();
        return view('profile.show', compact('user'));
    }

    // Delete the user's profile picture
    public function destroy()
    {
        $user = Auth::user();

        if ($user->profile_picture) {
            Storage::disk('public')->delete($user->profile_picture);
            $user->profile_picture = null;
            $user->save();
        }

        return redirect()->route('profile.edit')->with('success', 'Profile picture deleted successfully!');
    }
}

4. Displaying the Profile Picture

Let’s create a view to display the user’s profile.

Blade Template (resources/views/profile/show.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Profile</title>
</head>
<body>
    <h1>User Profile</h1>

    @if($user->profile_picture)
        <img src="{{ Storage::url($user->profile_picture) }}" alt="Profile Picture" width="200">
    @else
        <p>No profile picture uploaded.</p>
    @endif

    <br><br>
    <a href="{{ route('profile.edit') }}">Edit Profile</a>
</body>
</html>

5. Deleting the Profile Picture

To allow users to delete their profile picture, add a delete button to the edit profile form.

Updated Blade Template (resources/views/profile/edit.blade.php)

@if($user->profile_picture)
    <img src="{{ Storage::url($user->profile_picture) }}" alt="Profile Picture" width="200">
    <br><br>
    <form action="{{ route('profile.destroy') }}" method="POST">
        @csrf
        @method('DELETE')
        <button type="submit">Delete Profile Picture</button>
    </form>
@endif

6. Conclusion

In this real-world example, we built a user profile system with profile picture upload functionality. Here’s what we accomplished:

1. Added a profile_picture column to the users table.
2. Created a form for uploading profile pictures.
3. Stored and retrieved profile pictures using Laravel’s file storage system.
4. Displayed the profile picture on the user’s profile page.
5. Allowed users to delete their profile picture.

This example demonstrates how easy it is to handle file uploads and storage in Laravel 12. You can extend this functionality further by adding validation, supporting multiple file types, or integrating with cloud storage like Amazon S3.

Final Thoughts

Laravel’s file storage system is incredibly versatile and beginner-friendly. Whether you’re building a simple profile picture upload feature or a complex file management system, Laravel 12 has you covered. Keep experimenting and building, and you’ll soon master file storage in Laravel!

If you have any questions or need further clarification, feel free to leave a comment below. Happy coding!