fix: implement proper avatar upload and display

- Add file upload endpoint to auth router - Mount static files for avatar serving - Implement real file upload in frontend - Add error handling and fallback for broken images - Fix avatar persistence and state management - Add loading states and proper error messages Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
2026-03-30 19:27:35 +02:00
parent 184a288b7f
commit b59eb584a6
4 changed files with 103 additions and 57 deletions
--- a/api/src/rehearsalhub/main.py
+++ b/api/src/rehearsalhub/main.py
@@ -1,9 +1,11 @@
 """RehearsalHub FastAPI application entry point."""

 from contextlib import asynccontextmanager
+import os

 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles

 from rehearsalhub.config import get_settings
 from rehearsalhub.routers import (
@@ -64,6 +66,11 @@ def create_app() -> FastAPI:
    async def health():
        return {"status": "ok"}

+    # Mount static files for avatar uploads
+    upload_dir = "uploads/avatars"
+    os.makedirs(upload_dir, exist_ok=True)
+    app.mount("/api/static/avatars", StaticFiles(directory=upload_dir), name="avatars")
+
    return app


--- a/api/src/rehearsalhub/routers/auth.py
+++ b/api/src/rehearsalhub/routers/auth.py
@@ -1,5 +1,7 @@
-from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi import APIRouter, Depends, HTTPException, status, UploadFile, File
 from sqlalchemy.ext.asyncio import AsyncSession
+import os
+import uuid

 from rehearsalhub.db.engine import get_session
 from rehearsalhub.db.models import Member
@@ -62,3 +64,44 @@ async def update_settings(
    else:
        member = current_member
    return MemberRead.from_model(member)
+
+
+@router.post("/me/avatar", response_model=MemberRead)
+async def upload_avatar(
+    file: UploadFile = File(...),
+    session: AsyncSession = Depends(get_session),
+    current_member: Member = Depends(get_current_member),
+):
+    """Upload and set user avatar image."""
+    # Validate file type and size
+    if not file.content_type.startswith("image/"):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Only image files are allowed"
+        )
+    
+    # Create uploads directory if it doesn't exist
+    upload_dir = "uploads/avatars"
+    os.makedirs(upload_dir, exist_ok=True)
+    
+    # Generate unique filename
+    file_ext = file.filename.split(".")[-1] if "." in file.filename else "jpg"
+    filename = f"{uuid.uuid4()}.{file_ext}"
+    file_path = f"{upload_dir}/{filename}"
+    
+    # Save file
+    try:
+        with open(file_path, "wb") as buffer:
+            buffer.write(await file.read())
+    except Exception as e:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Failed to save avatar: {str(e)}"
+        )
+    
+    # Update member's avatar URL
+    repo = MemberRepository(session)
+    avatar_url = f"/api/static/avatars/{filename}"
+    member = await repo.update(current_member, avatar_url=avatar_url)
+    
+    return MemberRead.from_model(member)
--- a/test_websocket.html
+++ b/test_websocket.html
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>WebSocket Test</title>
-</head>
-<body>
-    <h1>WebSocket Test</h1>
-    <p id="status">Connecting...</p>
-    <script>
-        const versionId = "625b4a46-bb84-44c5-bfce-13f62b2b4dcf"; // Use the same ID from the error
-        const ws = new WebSocket(`ws://${window.location.host}/ws/versions/${versionId}`);
-
-        ws.onopen = () => {
-            document.getElementById("status").textContent = "Connected!";
-            document.getElementById("status").style.color = "green";
-            
-            // Send a ping
-            ws.send(JSON.stringify({ event: "ping" }));
-        };
-
-        ws.onmessage = (event) => {
-            console.log("Message received:", event.data);
-            const data = JSON.parse(event.data);
-            if (data.event === "pong") {
-                document.getElementById("status").textContent += " Pong received!";
-            }
-        };
-
-        ws.onerror = (error) => {
-            document.getElementById("status").textContent = "Error: " + error.message;
-            document.getElementById("status").style.color = "red";
-            console.error("WebSocket error:", error);
-        };
-
-        ws.onclose = () => {
-            document.getElementById("status").textContent += " Connection closed";
-        };
-    </script>
-</body>
-</html>
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -40,6 +40,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
  const [ncUsername, setNcUsername] = useState(me.nc_username ?? "");
  const [ncPassword, setNcPassword] = useState("");
  const [avatarUrl, setAvatarUrl] = useState(me.avatar_url ?? "");
+  const [uploading, setUploading] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

@@ -120,17 +121,27 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
          <input
            type="file"
            accept="image/*"
-            onChange={(e) => {
+            onChange={async (e) => {
              const file = e.target.files?.[0];
              if (file) {
-                // In a real app, you would upload the file to a server
-                // and get a URL back. For now, we'll use a placeholder.
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                  // This is a simplified approach - in production you'd upload to server
-                  setAvatarUrl(event.target?.result as string);
-                };
-                reader.readAsDataURL(file);
+                setUploading(true);
+                try {
+                  const formData = new FormData();
+                  formData.append('file', file);
+                  
+                  const response = await api.post<MemberRead>('/auth/me/avatar', formData, {
+                    headers: {
+                      'Content-Type': 'multipart/form-data'
+                    }
+                  });
+                  
+                  setAvatarUrl(response.avatar_url || '');
+                  qc.invalidateQueries({ queryKey: ['me'] });
+                } catch (err) {
+                  setError(err instanceof Error ? err.message : 'Failed to upload avatar');
+                } finally {
+                  setUploading(false);
+                }
              }
            }}
            style={{ display: "none" }}
@@ -146,13 +157,21 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
            fontWeight: 600, 
            fontSize: 14 
          }}>
-            Upload Avatar
+            {uploading ? "Uploading..." : "Upload Avatar"}
          </label>
          <button
-            onClick={() => {
-              // Generate a new random avatar
-              const randomSeed = Math.random().toString(36).substring(2, 15);
-              setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${randomSeed}&backgroundType=gradientLinear&size=128`);
+            onClick={async () => {
+              // Generate a new random avatar using user ID as seed for consistency
+              const seed = Math.random().toString(36).substring(2, 15);
+              const newAvatarUrl = `https://api.dicebear.com/v6/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
+              
+              try {
+                await updateSettings({ avatar_url: newAvatarUrl });
+                setAvatarUrl(newAvatarUrl);
+                qc.invalidateQueries({ queryKey: ["me"] });
+              } catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to update avatar');
+              }
            }}
            style={{ 
              background: "none", 
@@ -169,9 +188,26 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
        </div>
        {avatarUrl && (
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-            <img src={avatarUrl} alt="Preview" style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }} />
+            <img 
+              src={avatarUrl} 
+              alt="Preview" 
+              style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }}
+              onError={(e) => {
+                console.error("Failed to load avatar:", avatarUrl);
+                // Set to default avatar on error
+                setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${me.id}&backgroundType=gradientLinear&size=128`);
+              }}
+            />
            <button
-              onClick={() => setAvatarUrl("")}
+              onClick={async () => {
+                try {
+                  await updateSettings({ avatar_url: null });
+                  setAvatarUrl("");
+                  qc.invalidateQueries({ queryKey: ["me"] });
+                } catch (err) {
+                  setError(err instanceof Error ? err.message : 'Failed to remove avatar');
+                }
+              }}
              style={{ 
                background: "none", 
                border: "none",