Add User Profile Picture Upload and Display Across Application

[Riyanshu-256]

Problem Statement

Currently, user avatars are displayed inconsistently across the application:

• The Profile page shows the first letter of the user's name as an avatar.
• The Dashboard displays a static/dummy profile image.

This prevents users from personalizing their accounts and creates an inconsistent user experience.

Proposed Solution

Implement a profile picture upload feature that allows users to upload and manage their profile image.

Features

• Upload a profile picture from the Profile Settings page.
• Store the uploaded image URL in the database.
• Display the uploaded image across the application, including:
  • Profile page
  • Dashboard greeting section
  • Any future user avatar locations
• Show a default avatar when no profile image exists.

Suggested Implementation

Backend

• Add a profileImage field to the User schema.
• Create an API endpoint for image uploads.
• Store images using Cloudinary (or the project's existing image storage solution).
• Save only the image URL in the database.

Frontend

• Add an image upload component to the Profile page.
• Preview the selected image before upload.
• Replace the letter avatar with the uploaded profile image.
• Replace the Dashboard's dummy image with the uploaded profile image.

Acceptance Criteria

• Users can upload a profile picture.
• Uploaded images are validated for type and size.
• Profile picture persists after page refresh and re-login.
• Profile page displays the uploaded image.
• Dashboard displays the uploaded image.
• Default avatar is shown when no profile image is available.
• UI updates immediately after a successful upload.

Screenshots

Benefits

• Improved personalization
• Better user experience
• Consistent avatar display across the platform
• More professional and modern UI

Additional Notes

The current implementation uses a letter-based avatar and a static placeholder image. Both should be replaced with the user's uploaded profile picture wherever applicable.

[Riyanshu-256]

Hi @aryandas2911,

I would like to work on this issue under GSSoC.

My approach will be:

• Add profile image upload functionality on the Profile page.
• Store the uploaded image URL in the database (using the project's preferred storage solution).
• Replace the current letter-based avatar with the uploaded profile picture.
• Display the profile picture consistently across the Profile page and Dashboard.
• Show a default avatar when no profile image is available.
• Add basic image validation for file type and size.

Please assign this issue to me. Thank you!

[prince-pokharna]

Hi @aryandas2911 I have gone through deeply through the project repo and would actually contribute to this issue with precision , Please assign the issue to me .

[github-actions]

Hi @Riyanshu-256, this issue appears inactive for 5+ days.

If you’re still working on it, reply here (with an update) to keep it assigned. Otherwise it may be unassigned after 10 days.

[Riyanshu-256]

Hi @aryandas2911,

I’m actively working on this issue and making progress on implementing the profile picture upload and display functionality.

I’ll be pushing updates soon. Please keep this issue assigned to me.
Let me know if you have any specific suggestions or requirements.

Thanks! 🙌