DEV - Connect Upload Profile Pic to the backend

[prooflesben]

Overview

This ticket implements the profile picture upload functionality by connecting the frontend to an existing backend route. The backend currently handles S3 bucket uploads and updates the user object in DynamoDB accordingly. The frontend needs to implement image cropping, validation, and ensure the uploaded image is properly formatted before sending to the backend.

Requirements

Image Processing & Cropping

• Implement image cropping using a library like react-easy-crop or cropperjs
• Crop the image to a perfect square format (the frontend will apply border-radius for circular display)
• Match the border-radius styling used elsewhere in the project for profile pictures
• The final uploaded image should be stored as a square, with circular styling applied via CSS

Image Validation

• Validate file types (acceptable extensions: [specify allowed formats, e.g., JPG, PNG, GIF])
• Enforce file size limits (specify maximum size, e.g., 5MB)
• Display appropriate error messages for invalid files

Backend Integration

• Connect to the existing profile picture upload endpoint
• Handle the API response and update the user object in the frontend state
• Implement error handling for failed uploads

UI/UX

• Follow the existing frontend design for the cropping interface
• Provide visual feedback during upload (loading states)
• Show success/error notifications

Profile Picture Fallback

• If the profile picture URL is invalid or fails to load, display the default profile picture
• Handle edge cases where the image fails to render

Tasks

1. Frontend Implementation

   • Integrate a cropping library (react-easy-crop recommended)
   • Build the cropping UI component matching the design reference
   • Implement file validation (type and size)
   • Process and prepare the cropped image for upload

2. API Integration

   • Connect to the existing profile picture upload endpoint
   • Handle success response and update user state
   • Implement error handling and user feedback

3. State Management

   • Update all user object references throughout the app:
     • User profile page
     • Grant POC (Point of Contact) displays
     • Any other components displaying user avatars

4. Error Handling & Fallbacks

   • Implement image load error handling
   • Add fallback to default profile picture when URL fails
   • Handle edge cases gracefully

Acceptance Criteria

• Users can successfully upload a profile picture through the UI
• Images are properly cropped to a square format before upload
• File validation works correctly (type and size restrictions)
• Upload progress/state is clearly communicated to the user
• All references to the user's profile picture update immediately after successful upload
• Default profile picture displays correctly when the uploaded image URL fails to load
• The circular styling matches the existing design system
• Error states are handled gracefully with user-friendly messages

Design Reference

Technical Notes

• The backend endpoint already exists and handles S3 uploads and DynamoDB updates
• The uploaded image should be square; circular styling will be applied via CSS
• Consider implementing client-side image compression if needed for larger files