feat: allow webp upload for project/profile avatars

[aditya-mitra]

support webp images for project logos and profile avatars

feat.mp4

Summary by CodeRabbit

• New Features
  • Added WebP image format support for file uploads, expanding the range of image formats users can upload.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The ProfileAvatar component now accepts WebP image format in addition to existing supported image types. The change extends the ALLOWED_UPLOAD_TYPES configuration to include 'image/webp' MIME type.

Changes

Cohort / File(s)	Summary
WebP Format Support webapp/src/component/common/avatar/ProfileAvatar.tsx	Extended ALLOWED_UPLOAD_TYPES to accept 'image/webp' format

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• Single-file modification with no logic changes
• Simple MIME type list extension
• No control flow or behavioral impact

Poem

🐰 A whisker-twitch of joy, I say,
WebP formats come to play,
One line added, simple, light,
More avatar formats—pure delight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: allow webp upload for project/profile avatars' directly and accurately describes the main change—adding WebP support to the ALLOWED_UPLOAD_TYPES for avatar components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between df527ba and 03240df.

📒 Files selected for processing (1)

• webapp/src/component/common/avatar/ProfileAvatar.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

webapp/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

webapp/**/*.{ts,tsx}: Use TypeScript path aliases (tg.component/, tg.service/, tg.hooks/, tg.views/, tg.globalContext/*) instead of relative imports
After backend API changes, regenerate TypeScript types by running npm run schema (and npm run billing-schema if applicable) in the webapp directory
Use typed React Query hooks from useQueryApi.ts for API communication, not raw React Query
Use Tolgee-specific hooks useReportEvent and useReportOnce from 'tg.hooks/useReportEvent' for business event tracking and analytics

Files:

• webapp/src/component/common/avatar/ProfileAvatar.tsx

webapp/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Always use data-cy attributes for E2E test selectors, never rely on text content

Files:

• webapp/src/component/common/avatar/ProfileAvatar.tsx

**/*.{ts,tsx,js,jsx,kt,kts}

⚙️ CodeRabbit configuration file

As part of review, please check if the file follows 'The Stepdown Rule': The most important, high-level concepts should be at the top (like a newspaper headline and opening paragraph). Details should increase as you read downward. Functions should be ordered so that a caller appears before the functions it calls. When working with JavaScript components, we allow the main component to live at the bottom of the file as an exception to the rule.

Files:

• webapp/src/component/common/avatar/ProfileAvatar.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-28T15:12:44.060Z

Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use TypeScript path aliases (tg.component/*, tg.service/*, tg.hooks/*, tg.views/*, tg.globalContext/*) instead of relative imports

Applied to files:

• webapp/src/component/common/avatar/ProfileAvatar.tsx

🧬 Code graph analysis (1)

webapp/src/component/common/avatar/ProfileAvatar.tsx (1)

webapp/src/views/projects/translations/Screenshots/Screenshots.tsx (1)

• ALLOWED_UPLOAD_TYPES (17-17)

🔇 Additional comments (1)

webapp/src/component/common/avatar/ProfileAvatar.tsx (1)

57-62: WebP addition is correct, but verify browser fallback handling and backend support.

The WebP MIME type is correct. However, WebP canvas encoding support varies by browser—Safari and older iOS versions don't support exporting WebP via canvas.toBlob(), though the browser will automatically fall back to PNG. Ensure the code handles this gracefully or feature-detects.

Additionally, verify:

1. Backend API accepts image/webp format
2. If there are other image upload components with similar constants (e.g., Screenshots.tsx mentioned in the original context), confirm they are intentionally inconsistent or should be updated for parity

---

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.}