fix: add comprehensive debugging and validation for avatar uploads

- Add detailed error extraction from API responses
- Validate file content is not empty before saving
- Verify file was actually saved to disk
- Check saved file size matches expectations
- Add extensive logging for debugging upload issues
- Improve error messages with specific details

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

api/src/rehearsalhub/routers/auth.py

@@ -116,9 +116,37 @@ async def upload_avatar(
     try:
         contents = await file.read()
         print(f"File size: {len(contents)} bytes")
+        print(f"File content preview: {contents[:50]}...")  # First 50 bytes for debugging
+        
+        # Validate that we actually got content
+        if len(contents) == 0:
+            print("Empty file content received")
+            raise HTTPException(
+                status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+                detail="Empty file content received"
+            )
+        
         with open(file_path, "wb") as buffer:
             buffer.write(contents)
         print("File saved successfully")
+        
+        # Verify file was saved
+        if not os.path.exists(file_path):
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail="Failed to verify saved file"
+            )
+        
+        file_size = os.path.getsize(file_path)
+        print(f"Saved file size: {file_size} bytes")
+        
+        if file_size == 0:
+            os.remove(file_path)
+            raise HTTPException(
+                status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+                detail="Saved file is empty"
+            )
+        
     except Exception as e:
         print(f"Failed to save file: {str(e)}")
         raise HTTPException(

web/src/pages/SettingsPage.tsx

@@ -218,17 +218,24 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                   qc.invalidateQueries({ queryKey: ['me'] });
                 } catch (err) {
                   console.error("Upload failed:", err);
+                  let errorMessage = 'Failed to upload avatar. Please try again.';
+                  
                   if (err instanceof Error) {
+                    errorMessage = err.message;
                     if (err.message.includes('413')) {
-                      setError('File too large. Maximum size is 5MB. Please choose a smaller image.');
+                      errorMessage = '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);
+                      errorMessage = 'Invalid image file. Please upload a valid image (JPG, PNG, etc.).';
                     }
-                  } else {
-                    setError('Failed to upload avatar. Please try again.');
+                  } else if (typeof err === 'object' && err !== null) {
+                    // Try to extract more details from the error object
+                    console.error("Error details:", JSON.stringify(err));
+                    if (err.status === 422 && err.data && err.data.detail) {
+                      errorMessage = err.data.detail;
                     }
+                  }
+                  
+                  setError(errorMessage);
                 } finally {
                   setUploading(false);
                 }