Issue #8 - [FEATURE] Add File Upload Support for Custom Profile Pictures

[rogelio-cmj]

Motivation

Currently, users can only select their profile picture from a predefined set of avatar options. This limitation prevents users from personalizing their profiles with their own images, which is a common expectation in modern web applications. Adding custom profile picture upload functionality will improve user experience by allowing users to express their identity and personalize their workspace.

Current Behavior

The profile settings form only allows users to select from a fixed set of predefined avatar images.

Reproduction Steps

1. Navigate to the dashboard settings page
2. Open the Profile section
3. Locate the avatar selection area in the profile form
4. Observe: Only predefined avatar options are available as radio button choices

Expected Behavior

Users should be able to upload their own profile picture from their local device in addition to selecting from predefined avatars. The upload functionality should handle image files, validate file size, and display the uploaded image as a preview.

Acceptance Criteria

• A new upload option appears in the avatar selection area alongside existing predefined avatars
• Clicking the upload option triggers a file picker that accepts image files
• Uploaded images are validated to ensure they don't exceed 2MB in size
• When an image is uploaded, it displays as a preview in the upload button area
• The uploaded image is properly saved and persists when the form is submitted
• The form correctly identifies and handles uploaded images versus predefined avatar selections

Steps To Test

1. Navigate to the profile settings page
2. Click on the new upload avatar option
3. Select an image file from your computer
4. Verify the image appears as a preview in the upload button
5. Save the profile form and verify the custom image persists
6. Refresh the page and confirm the uploaded image is still selected

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx