sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement proper avatar upload and display

Browse Source 
- 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>
This commit is contained in:
Mistral Vibe
2026-03-30 19:27:35 +02:00
parent 184a288b7f
commit b59eb584a6
4 changed files with 103 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
api/src/rehearsalhub/main.py
View File

@@ -1,9 +1,11 @@
"""RehearsalHub FastAPI application entry point.""" """RehearsalHub FastAPI application entry point."""
from contextlib import asynccontextmanager from contextlib import asynccontextmanager
import os
from fastapi import FastAPI from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
from rehearsalhub.config import get_settings from rehearsalhub.config import get_settings
from rehearsalhub.routers import ( from rehearsalhub.routers import (
@@ -64,6 +66,11 @@ def create_app() -> FastAPI:
async def health(): async def health():
return {"status": "ok"} 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 return app

45
api/src/rehearsalhub/routers/auth.py
View File

@@ -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 from sqlalchemy.ext.asyncio import AsyncSession
import os
import uuid
from rehearsalhub.db.engine import get_session from rehearsalhub.db.engine import get_session
from rehearsalhub.db.models import Member from rehearsalhub.db.models import Member
@@ -62,3 +64,44 @@ async def update_settings(
else: else:
member = current_member member = current_member
return MemberRead.from_model(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)

40
test_websocket.html
View File

@@ -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>

68
web/src/pages/SettingsPage.tsx
View File

@@ -40,6 +40,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
const [ncUsername, setNcUsername] = useState(me.nc_username ?? ""); const [ncUsername, setNcUsername] = useState(me.nc_username ?? "");
const [ncPassword, setNcPassword] = useState(""); const [ncPassword, setNcPassword] = useState("");
const [avatarUrl, setAvatarUrl] = useState(me.avatar_url ?? ""); const [avatarUrl, setAvatarUrl] = useState(me.avatar_url ?? "");
const [uploading, setUploading] = useState(false);
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -120,17 +121,27 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
<input <input
type="file" type="file"
accept="image/*" accept="image/*"
onChange={(e) => { onChange={async (e) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (file) { if (file) {
// In a real app, you would upload the file to a server setUploading(true);
// and get a URL back. For now, we'll use a placeholder. try {
const reader = new FileReader(); const formData = new FormData();
reader.onload = (event) => { formData.append('file', file);
// This is a simplified approach - in production you'd upload to server
setAvatarUrl(event.target?.result as string); const response = await api.post<MemberRead>('/auth/me/avatar', formData, {
}; headers: {
reader.readAsDataURL(file); '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" }} style={{ display: "none" }}
@@ -146,13 +157,21 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
fontWeight: 600, fontWeight: 600,
fontSize: 14 fontSize: 14
}}> }}>
Upload Avatar {uploading ? "Uploading..." : "Upload Avatar"}
</label> </label>
<button <button
onClick={() => { onClick={async () => {
// Generate a new random avatar // Generate a new random avatar using user ID as seed for consistency
const randomSeed = Math.random().toString(36).substring(2, 15); const seed = Math.random().toString(36).substring(2, 15);
setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${randomSeed}&backgroundType=gradientLinear&size=128`); 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={{ style={{
background: "none", background: "none",
@@ -169,9 +188,26 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
</div> </div>
{avatarUrl && ( {avatarUrl && (
<div style={{ display: "flex", alignItems: "center", gap: 12 }}> <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 <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={{ style={{
background: "none", background: "none",
border: "none", border: "none",