18 - Add Profile Photo Upload

Add Profile Editing & Photo Upload

Now, you will give users the ability to edit their profile information and upload a custom profile picture, which will be synced to both Firestore and Storage.

→ In the AI Studio "Code assistant" prompt box, enter the following instructions:

💡

When a user clicks on their profile, let them edit their profile information and upload a photo. When a user uploads/deletes the photo, it should be synced with their Firebase Storage folder. Path: 'user_uploads/{uid}/'.

Automatically sync file information '/users/{uid}/' in users collection with all necessary fields. The profile picture should appear in their profile.

→ Send the prompt to the AI assistant.

Test the Profile Editing

Upload a Profile Photo:

In your app preview, log in.
Click your profile icon in the bottom-left corner.
An "Edit Profile" window will appear.
Click the "Click to image to upload or change photo" icon.
Select an image from your computer (e.g., a logo or a headshot).
Click "Save Changes".
Result: The modal will close, and your profile icon in the corner will update to the new image.

Check Firestore (Metadata):

Go to your Firebase Console > Firestore Database.
Navigate to users > {your-user-ID-document}.
You will see the photoURL field is now filled with a firebasestorage.googleapis.com link, pointing to the image you just uploaded.

Check Storage (The File):

Go to your Firebase Console > Storage.
Navigate to user_uploads > {your-user-ID-folder}.
You will now see the new profile_picture file stored in your bucket.