feat(users): Enhance profile picture upload with avatar cleanup

[codeunia-dev]

• Add deleteOldAvatar function to remove previous profile pictures from storage
• Implement automatic deletion of old avatar when uploading a new profile picture
• Add avatar deletion when removing profile picture
• Improve error handling for avatar storage operations
• Prevent storage accumulation of unused avatar files

Summary by CodeRabbit

• Bug Fixes
  • Ensured old profile pictures are properly deleted from storage when uploading new profile pictures or removing them entirely, preventing unnecessary storage usage.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Ready	Preview	Comment	Nov 3, 2025 5:46am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The PR adds a new internal helper function deleteOldAvatar() to ProfilePictureUpload.tsx that removes previous avatar files from storage before uploading or removing avatars. The helper parses the storage URL to derive the file path and calls storage.remove, with error handling that logs failures without blocking the primary workflow. It's invoked in both the crop-complete and avatar-removal operations.

Changes

Cohort / File(s)	Summary
Avatar cleanup enhancement components/users/ProfilePictureUpload.tsx	Added deleteOldAvatar() helper to remove previous avatar files from storage by parsing URLs and calling storage.remove with error logging. Integrated into handleCropComplete() to clean old avatar before uploading new cropped version, and into handleRemoveAvatar() to delete avatar file before clearing profile avatar_url.

Sequence Diagram

sequenceDiagram
    actor User
    participant Component as ProfilePictureUpload
    participant Storage
    participant Profile DB
    
    User->>Component: Crop or Remove Avatar
    
    alt Crop Flow
        Component->>Component: deleteOldAvatar(previewUrl)
        Component->>Storage: storage.remove(oldPath)
        Storage-->>Component: Success or Log Error
        Component->>Storage: Upload cropped avatar
        Component->>Storage: Get public URL
        Component->>Profile DB: Update avatar_url
    else Remove Flow
        Component->>Component: deleteOldAvatar(previewUrl)
        Component->>Storage: storage.remove(oldPath)
        Storage-->>Component: Success or Log Error
        Component->>Profile DB: Clear avatar_url
    end
    
    Component-->>User: Avatar updated/removed

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Area of focus: Verify the URL parsing logic in deleteOldAvatar() correctly extracts the storage path from the avatar URL
• Area of focus: Confirm that error handling in the helper does not inadvertently suppress critical issues or leave partial state

Possibly related PRs

• feat(users): Add comprehensive profile picture upload and cropping functionality #261: Directly modifies the same ProfilePictureUpload.tsx file and the avatar upload/removal flow; this PR extends that feature by adding cleanup logic for old avatars before updates.

Poem

🐰 A rabbit hops through digital fields,
Sweeping up old pictures with care,
Before new avatars arrive with pride,
Storage cleaned, no cruft left behind, ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/profilepicture

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e869f3d and ebc7199.

📒 Files selected for processing (1)

• components/users/ProfilePictureUpload.tsx (3 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}