feat: add profile avatar functionality to Laravel React starter kit

[bennajah]

feat: add profile avatar functionality to Laravel React 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

[haiffy420]

How did you manage to send multipart form data using the patch method?

I had to change the form method post and then add _method: 'patch' to the form data
profile.tsx

const { data, setData, post, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
        name: auth.user.name,
        email: auth.user.email,
        avatar: null,
        _method: 'patch',
    });

const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('profile.update'), {
            preserveScroll: true,
        });
    };

Finally, to prevent changing the user's avatar to null if user didn't upload any file
ProfileController.php

public function update(ProfileUpdateRequest $request): RedirectResponse
    {
        $request->user()->fill($request->validated());

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

        if ($request->avatar === null) {
            $request->user()->avatar = $request->user()->getOriginal('avatar');
        }

        if ($request->hasFile('avatar')) {
            if ($request->user()->avatar && Storage::exists($request->user()->avatar)) {
                Storage::delete($request->user()->avatar);
            }
            $request->user()->avatar = $request->file('avatar')->store('avatars', 'public');
        }

        $request->user()->save();

        return to_route('profile.edit');
    }

[bennajah]

@haiffy420
fixed in last commit

[tnylea]

@bennajah, looks very cool. I'll be testing this soon. Thanks!

[bennajah]

@tnylea
I have also made a PR for the Vue Starter Kit: laravel/vue-starter-kit#79

[lewislarsen]

Would be awesome to see this, I often need avatars in my projects. (and sometimes gravatar doesn't suffice!)

[tnylea]

@bennajah Really appreciate the contribution and thanks for adding a test to this as well 👏

Before we merge this in, can you resolve the conflict in the profile? tsx? Also, could you update the getAvatarAttribute() to use the up-to-date way to use accessors here: https://laravel.com/docs/12.x/eloquent-mutators#accessors-and-mutators? After you get that updated, I'll approve this PR, and we can merge it.

Also, I would like to eventually add the ability for users to crop their photos similar to this:

image-crop.mp4

But that can come later ;) Ok, if you can make those updates we can get this puppy in there. Thanks again!

[bennajah]

@tnylea The issue has been resolved! Additionally, I’ve implemented image cropping functionality using the react-image-crop library. It’s now fully integrated and working as expected. Let me know if you have any feedback or need further adjustments!

Recording.2025-03-20.012223.mp4

[tnylea]

Excellent! Thanks @bennajah. Can you remove the composer.lock that's why the CI test is failing. I'll give this another review tomorrow.

Great job 👏

[bennajah]

Excellent! Thanks @bennajah. Can you remove the composer.lock that's why the CI test is failing. I'll give this another review tomorrow.

Great job 👏

Done

[majweb]

Will the crop functionality work in the starter kit?

[bennajah]

Will the crop functionality work in the starter kit?

Currently only in react starter kit

[tnylea]

Hey @bennajah, I want to give you a quick update. I am working on an additional feature for each starter kit for this sprint. I would like to include this along with that new feature; this way, when we announce the latest additions, Profile Photo upload will be one of those new features. I'll be sure to give you a shout out on X 😉

I will be adding the Vue and Livewire avatar cropping so that way, this feature is similar in each of the stacks 👍

[majweb]

When are you planning the first additions?