Missing Error Handling in Avatar Upload Components

[MrKalyanKing]

Description:

Two avatar upload components have incomplete error handling:

1. RoomAvatarEditor: Missing FileReader.onerror handler, causing silent failures when file reading errors occur
2. UserAvatarEditor: Missing error message when image format validation fails

Users receive no feedback when avatar uploads fail, leading to confusion.

Steps to reproduce:

Bug 1: RoomAvatarEditor - Missing FileReader Error Handling

1. Go to any room → Room Info → Edit
2. Open Browser DevTools Console (F12)
3. Try Simulated FileReader failure (I have tested locally)
4. Click "Upload" in Room Avatar section
5. Select any image file
6. Observe: No error message appears (Console shows "BUG: No onerror handler!")

Bug 2: UserAvatarEditor - Missing Format Validation Error

1. Go to http://localhost:3000/account/profile
2. Click "Upload" button
3. Select a non-image file (e.g., .txt file)
4. Observe: No error message appears, avatar doesn't change

Expected behavior:

• Error toast messages should appear when:
  • FileReader fails (corrupted files, too large, permission errors)
  • Image format validation fails (non-image files, invalid formats)
• Users should receive clear feedback about upload failures

Actual behavior:

• RoomAvatarEditor: No error message when FileReader fails
• UserAvatarEditor: No error message when format validation fails
• Both components fail silently, leaving users confused

Server Setup Information:

• Version of Rocket.Chat Server: develop
• License Type: Community
• Operating System: windows 11
• Deployment Method: Development (meteor)

Client Setup Information

• Desktop App or Browser Version: Chrome
• Operating System: Windows 11

Additional context

Solution:

• Use existing readFileAsDataURL utility (has proper error handling)
• Add error messages for format validation failures
• Ensure both components handle all error scenarios

Relevant logs:

Browser Console:

FileReader error occurred but NO onerror handler is registered!
BUG: No onerror handler!

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

RocketChat/homeserver#225 - fix: upload not working [merged]
#37447 - fix: Unhandled cross-origin error while rendering favicon badge [merged]
#37486 - fix: User Autocomplete's avatar being misaligned [merged]
#37550 - fix: upload handler loading file contents to memory twice [merged]
#37851 - fix: Wrong invite error message [merged]

👤 Suggested Assignees

• aleksandernsilva
• rodrigok
• d-gubert
• KevLehman

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[NobleCoder69]

I’d like to work on this please assign it to me.

[Tanishq-Mi]

Hi! I’ve successfully implemented the fixes for both Bug 1 (RoomAvatarEditor) and Bug 2 (UserAvatarEditor) locally. I have verified that:

The RoomAvatarEditor now uses readFileAsDataURL and correctly triggers a toast notification on FileReader failures.

The UserAvatarEditor now provides immediate user feedback via toast messages when invalid file formats (non-images) are selected.

I have my branch ready and can open a Pull Request immediately. Could you please assign this issue to me? Thank you!

[MrKalyanKing]

@Tanishq-Mi well sounds good.but I too have solution for this issue. I have requested to mentor about this issue they decide to assign to contributor. It is under the discussion with internal team I think.lets wait

[adityasuhane-06]

Hi! I've submitted PR #37908 to fix this issue with an improved approach:

• Refactored RoomAvatarEditor to use the readFileAsDataURL utility for consistency
• Both components now handle errors the same way (DRY principle)
• Distinguishes between file read errors (FileUpload_Error) and format validation errors (Avatar_format_invalid)

The implementation is cleaner and more maintainable than inline FileReader handlers. Ready for review!

[Raakshass]

Hi everyone! I have also implemented a fix for Bug 2 (UserAvatarEditor) and verified it locally with a red error toast for invalid formats. I've submitted PR #37909.

I see there are other PRs already, but I'm happy to provide my approach for review or help test the others if needed. Excited to contribute!

[aryanraj45]

hi I want to work on this isssue!!

[smirk-dev]

• Great issue! The error handling inconsistency between RoomAvatarEditor and UserAvatarEditor needs standardization. Here's my approach:

Root Cause:

• RoomAvatarEditor: Missing FileReader onerror handler (silent failures)
• UserAvatarEditor: Missing format validation error feedback

Implementation Strategy:

1. Unified Error Handler:

   • Create reusable hook: useAvatarUploadError()
   • Centralize error handling logic for both components
   • Leverage readFileAsDataUrl utility consistently

2. Error Categories:

   • FileReader errors: corrupted files, permission denied, aborted
   • Format validation: non-image files, invalid MIME types
   • Size validation: files exceeding max file size

3. User Feedback:

   • Use toast messages for each error type
   • Clear, localized error messages
   • Recovery suggestions in tooltips

4. Implementation:

   • Add onerror handler to FileReader in RoomAvatarEditor
   • Implement image type/size validation before upload
   • Apply DRY principle across both components
   • Use useCallback to prevent unnecessary re-renders

5. Testing:

   • Unit tests for each error scenario
   • Mock FileReader API
   • Test toast message display

Ready to coordinate on PR reviews and testing!