feat(account): added user profile pictures in settings

[waleedlatif1]

Summary

added user profile pictures in settings, supports both blob & s3

Type of Change

• New feature

Testing

Tested manually.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sim	Ready	Preview	Comment	Sep 9, 2025 11:12pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Sep 9, 2025 11:12pm

[greptile-apps]

Greptile Summary

This PR introduces user profile picture functionality to the settings page, implementing a comprehensive upload system that supports both S3 and Azure Blob storage. The changes add a new profile picture upload component in the account settings modal, complete with hover effects, file validation (5MB limit, PNG/JPEG only), and proper error handling.

The implementation follows the established architecture patterns found throughout the codebase for file uploads. New environment variables (S3_PROFILE_PICTURES_BUCKET_NAME and AZURE_STORAGE_PROFILE_PICTURES_CONTAINER_NAME) and configuration objects were added to lib/uploads/setup.ts and lib/env.ts, mirroring the structure used for other file types like chat images and knowledge base files.

A custom React hook (useProfilePictureUpload) was created to encapsulate the upload logic, including file validation, preview generation using blob URLs, progress tracking, and proper cleanup of temporary resources. The hook implements a dual upload strategy that attempts presigned URL uploads first, then falls back to server-side upload if needed.

The presigned URL API (/api/files/presigned/route.ts) was extended with a new 'profile-pictures' upload type, including proper validation for image-only uploads and user authentication requirements. The user profile API (/api/users/me/profile/route.ts) was updated to accept an optional image field alongside the existing name field, with URL validation and database updates.

The changes maintain consistency with existing upload patterns while adding specific constraints appropriate for profile pictures, such as image-only validation and user authentication requirements. The implementation supports direct URL access for optimal performance when displaying profile pictures across the application.

Confidence score: 4/5

• This PR is safe to merge with good implementation quality and follows established patterns
• Score reflects well-structured code following existing conventions, though some areas could benefit from additional validation
• Pay close attention to account.tsx for potential null reference handling and the dual storage fallback logic in the upload hook

_{6 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}