How to Add User Profile Picture in Laravel FilamentPHP V3?

I was working on a project in Laravel using FilamentPHP v3 and decided to write this article to share how simple it is to add a user profile picture feature and display it as an avatar. Let’s dive in!

1. Add/Update Profile picture option:

Step 1: Update Your Database

First, we need to add a column to store the profile picture in the database. If you’re using a User model, add new migration:

php artisan make:migration add_avatar_to_users_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('avatar')->nullable()->after('password');
        });
    }

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

After this run the migration php artisan migrate.

Step 2: Update the User Model

Update your User model with the new fillable field:

protected $fillable = [
    ...
    'avatar'
];

Step 3: Create filament Profile page

Run this command to generate Profile page in filament:

php artisan make:filament-page Profile

This will generate app/Filament/Pages/Profile.php. In Profile.php use the following code:

<?php

namespace App\Filament\Pages;

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Pages\Auth\EditProfile;
use Illuminate\Support\Facades\Storage;
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;

class Profile extends EditProfile
{
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make()
                    ->schema([
                        Forms\Components\FileUpload::make('avatar')
                            ->image()
                            ->imageEditor()
                            ->circleCropper()
                            ->directory('avatars')
                            ->moveFiles()
                            ->columnSpanFull()
                            ->afterStateUpdated(function ($state) {
                                if (! $state instanceof TemporaryUploadedFile) return;
                                
                                // Delete old avatar if exists
                                $oldAvatar = auth()->user()->avatar;
                                if ($oldAvatar && Storage::exists($oldAvatar)) {
                                    Storage::delete($oldAvatar);
                                }
                            }),
                        $this->getNameFormComponent(),
                        $this->getEmailFormComponent(),
                        $this->getPasswordFormComponent(),
                        $this->getPasswordConfirmationFormComponent(),
                    ])
                    ->columns(1),
            ]);
    }
}

Step 4: Update the AdminPanelProvider

In your AdminPanelProvider ->profile() pass Profile::class we created above:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->profile(Profile::class, isSimple: false)

Make sure to import use App\Filament\Pages\Profile;

That’s it.

2. Display Profile picture in Avatar

Step 1: Update the User Model

Define avatar URL function in your User model:

public function getFilamentAvatarUrl(): ?string
{
    return $this->avatar ? Storage::url($this->avatar) : null;
}

Step 2: Create your custom GetAvatarProvider

Create app/Filament/AvatarProviders/GetAvatarProvider.php and paste the following code:

<?php

namespace App\Filament\AvatarProviders;

use Filament\AvatarProviders\Contracts\AvatarProvider;
use Illuminate\Database\Eloquent\Model;

class GetAvatarProvider implements AvatarProvider
{
    public function get(Model $record): string
    {
        if (method_exists($record, 'getFilamentAvatarUrl')) {
            return $record->getFilamentAvatarUrl() ?? $this->getDefaultAvatar($record);
        }

        return $this->getDefaultAvatar($record);
    }

    protected function getDefaultAvatar(Model $record): string
    {
        return 'https://ui-avatars.com/api/?name=' . urlencode($record->name) . '&color=FFFFFF&background=111827';
    }
}

Step 3: Update the AdminPanelProvider

Now simply call the GetAvatarProvider we just created

->defaultAvatarProvider(GetAvatarProvider::class)

and same make sure to import use App\Filament\AvatarProviders\GetAvatarProvider;.

Conclusion

In this article, we learned how to add and update a user profile picture feature in Laravel FilamentPHP v3 and display it as an avatar. With just a few steps, you can improve your application’s user interface and provide a personalized touch for your users.

If you found this article helpful, feel free to share it with others in the Laravel community. Happy coding!