From b20b98a17afd06cfda20af897bc92bad7fbe93ca Mon Sep 17 00:00:00 2001
From: Mistral Vibe <vibe@mistral.ai>
Date: Mon, 30 Mar 2026 19:49:39 +0200
Subject: [PATCH] fix: improve error handling for avatar uploads

- Change invalid file type error from 400 to 422 for better frontend handling
- Add specific error message for 422 responses in frontend
- Improve error message clarity
- Better error classification and user guidance

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 api/src/rehearsalhub/routers/auth.py |  4 ++--
 web/src/pages/SettingsPage.tsx       | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/api/src/rehearsalhub/routers/auth.py b/api/src/rehearsalhub/routers/auth.py
index 925a8ef..9417a7c 100644
--- a/api/src/rehearsalhub/routers/auth.py
+++ b/api/src/rehearsalhub/routers/auth.py
@@ -87,8 +87,8 @@ async def upload_avatar(
     if not file.content_type.startswith("image/"):
         print("Invalid file type")
         raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="Only image files are allowed"
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Only image files are allowed (JPG, PNG, GIF, etc.)"
         )
     
     # Validate file size (5MB limit for upload endpoint)
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 293f854..8a6bf24 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -218,10 +218,16 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                   qc.invalidateQueries({ queryKey: ['me'] });
                 } catch (err) {
                   console.error("Upload failed:", err);
-                  if (err instanceof Error && err.message.includes('413')) {
-                    setError('File too large. Maximum size is 5MB. Please choose a smaller image.');
+                  if (err instanceof Error) {
+                    if (err.message.includes('413')) {
+                      setError('File too large. Maximum size is 5MB. Please choose a smaller image.');
+                    } else if (err.message.includes('422')) {
+                      setError('Invalid image file. Please upload a valid image (JPG, PNG, etc.).');
+                    } else {
+                      setError(err.message);
+                    }
                   } else {
-                    setError(err instanceof Error ? err.message : 'Failed to upload avatar');
+                    setError('Failed to upload avatar. Please try again.');
                   }
                 } finally {
                   setUploading(false);