feat: add profile avatar functionality to Laravel Livewire starter kit

[bennajah]

feat: add profile avatar functionality to Laravel Livewire starter kit

• Added profile_photo_path column to users migration
• Appended avatar to User model for profile photo handling
• Implemented getAvatarAttribute() accessor to fetch user's profile photo URL
• Enabled profile photo upload and deletion functionality

[Rattone]

I think this should be done for vue and react too

[bennajah]

I think this should be done for vue and react too

I have already do that
Check this
laravel/react-starter-kit#74

laravel/vue-starter-kit#79

[danielveselinov]

https://laravel.com/docs/12.x/eloquent-mutators#accessors-and-mutators

[danielveselinov]

@bennajah don't you think it would be great if you extract the main logic in a trait? And, instead of using the logic in the livewire itself to move it in the trait?

• The trait for example...

  /**
     * Update the user's profile photo.
     */
    public function updateProfilePhoto(UploadedFile $photo, string $storagePath = 'profile-photos'): void
    {
        tap($this->profile_photo_path, function ($previous) use ($photo, $storagePath) {
            $this->forceFill([
                'profile_photo_path' => $photo->storePublicly(
                    $storagePath, ['disk' => $this->profilePhotoDisk()]
                ),
            ])->save();

            if ($previous) {
                Storage::disk($this->profilePhotoDisk())->delete($previous);
            }
        });
    }

• The Livewire component method...

/**
     * Update the profile information for the currently authenticated user.
     */
    public function updateProfileInformation(): void
    {
        $user = Auth::user();

        $validated = $this->validate([
            'profile_photo_path' => ['nullable', 'image', 'max:5048'],

            'name' => ['required', 'string', 'max:255'],

            'email' => [
                'required',
                'string',
                'lowercase',
                'email',
                'max:255',
                Rule::unique(User::class)->ignore($user->id),
            ],
        ]);

        $user->fill($validated);

        if ($this->profile_photo_path) {
            $user->updateProfilePhoto($validated['profile_photo_path']);
        }

        if ($user->isDirty('email')) {
            $user->email_verified_at = null;
        }

        $user->save();

        $this->dispatch('profile-updated', name: $user->name);
    }

[tnylea]

@bennajah You're killing it 💪

Thanks for the Pull Requests. Yeah, in this one if you could also update the getAvatarAttribute accessor to use the latest syntax that would be great.

I also noticed that this one does not update the user menu avatar or remove the photo immediately without a page reload. The remove photo button was not showing until you refreshed it, too. Could you get that updated in this livewire version as well?

profile-photo-livewire.mp4

Really appreciate it!