user avatar + api

Author: Lulu-The-Narwhal

backend/app/alembic/versions/a1b2c3d4e5f6_add_avatar_url_to_user.py

@@ -0,0 +1,25 @@
+"""Add avatar_url to User
+
+Revision ID: a1b2c3d4e5f6
+Revises: fe56fa70289e
+Create Date: 2026-02-05 10:00:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel.sql.sqltypes
+
+
+# revision identifiers, used by Alembic.
+revision = 'a1b2c3d4e5f6'
+down_revision = 'fe56fa70289e'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.add_column('user', sa.Column('avatar_url', sa.String(length=500), nullable=True))
+
+
+def downgrade():
+    op.drop_column('user', 'avatar_url')

backend/app/api/routes/users.py

@@ -1,7 +1,9 @@
 import uuid
+import shutil
+from pathlib import Path
 from typing import Any
 
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
 from sqlmodel import col, delete, func, select
 
 from app import crud
@@ -99,6 +101,38 @@ def update_user_me(
     return current_user
 
 
+@router.post("/me/avatar", response_model=UserPublic)
+def update_user_avatar(
+    *,
+    session: SessionDep,
+    current_user: CurrentUser,
+    file: UploadFile = File(...)
+) -> Any:
+    """
+    Upload user avatar.
+    """
+    # Ensure upload directory exists
+    upload_dir = Path("app/static/uploads")
+    upload_dir.mkdir(parents=True, exist_ok=True)
+    
+    # Generate unique filename
+    file_ext = Path(file.filename).suffix if file.filename else ""
+    file_name = f"{current_user.id}_{uuid.uuid4()}{file_ext}"
+    file_path = upload_dir / file_name
+    
+    with file_path.open("wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+        
+    # Update user profile
+    # Assuming served at /static/uploads/
+    avatar_url = f"/static/uploads/{file_name}"
+    current_user.avatar_url = avatar_url
+    session.add(current_user)
+    session.commit()
+    session.refresh(current_user)
+    return current_user
+
+
 @router.patch("/me/password", response_model=Message)
 def update_password_me(
     *, session: SessionDep, body: UpdatePassword, current_user: CurrentUser

backend/app/main.py

@@ -1,5 +1,7 @@
 import sentry_sdk
+import os
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
@@ -30,4 +32,11 @@ def custom_generate_unique_id(route: APIRoute) -> str:
         allow_headers=["*"],
     )
 
+# Mount static files
+upload_dir = "app/static"
+if not os.path.exists(upload_dir):
+    os.makedirs(upload_dir)
+
+app.mount("/static", StaticFiles(directory=upload_dir), name="static")
+
 app.include_router(api_router, prefix=settings.API_V1_STR)

backend/app/models.py

@@ -16,6 +16,7 @@ class UserBase(SQLModel):
     is_active: bool = True
     is_superuser: bool = False
     full_name: str | None = Field(default=None, max_length=255)
+    avatar_url: str | None = Field(default=None, max_length=500)
 
 
 # Properties to receive via API on creation

backend/app/static/uploads/5eaaec5c-84d0-480a-958c-d786840b12b8_c2917da5-1ca2-48bb-b8e9-5bb2ee73f909.JPG

@@ -81,6 +81,7 @@ services:
     # TODO: remove once coverage is done locally
     volumes:
       - ./backend/htmlcov:/app/backend/htmlcov
+      - ./backend/app/static:/app/backend/app/static
     environment:
       SMTP_HOST: "mailcatcher"
       SMTP_PORT: "1025"

compose.override.yml

@@ -11,6 +11,7 @@ services:
       timeout: 10s
     volumes:
       - app-db-data:/var/lib/postgresql/data/pgdata
+      - app-static-data:/app/backend/app/static
     env_file:
       - .env
     environment:
@@ -114,6 +115,9 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
+    
+    volumes:
+      - app-static-data:/app/backend/app/static
 
     build:
       context: .
@@ -167,6 +171,7 @@ services:
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.middlewares=https-redirect
 volumes:
   app-db-data:
+  app-static-data:
 
 networks:
   traefik-public:

compose.yml

@@ -75,6 +75,7 @@ export type UserPublic = {
     is_active?: boolean;
     is_superuser?: boolean;
     full_name?: (string | null);
+    avatar_url?: (string | null);
     id: string;
     created_at?: (string | null);
 };

frontend/src/client/types.gen.ts

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useState } from "react"
+import { useState, useRef, type ChangeEvent } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -34,6 +34,40 @@ const UserInformation = () => {
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
 
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append("file", file)
+
+    try {
+        const token = localStorage.getItem("access_token")
+        const response = await fetch(`${import.meta.env.VITE_API_URL}/api/v1/users/me/avatar`, {
+            method: "POST",
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+            body: formData,
+        })
+
+        if (!response.ok) {
+            throw new Error("Failed to upload avatar")
+        }
+        
+        showSuccessToast("Avatar updated successfully")
+        queryClient.invalidateQueries({ queryKey: ["currentUser"] })
+    } catch (error) {
+        showErrorToast("Error uploading avatar")
+    }
+  }
+
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     mode: "onBlur",
@@ -83,6 +117,37 @@ const UserInformation = () => {
   return (
     <div className="max-w-md">
       <h3 className="text-lg font-semibold py-4">User Information</h3>
+      
+      <div className="flex items-center gap-4 mb-6">
+          <div 
+              className="relative w-24 h-24 rounded-full overflow-hidden bg-gray-100 border border-gray-200"
+          >
+              {currentUser?.avatar_url ? (
+                  <img 
+                      src={`${import.meta.env.VITE_API_URL}${currentUser.avatar_url}`} 
+                      alt="Avatar" 
+                      className="w-full h-full object-cover"
+                  />
+              ) : (
+                  <div className="flex items-center justify-center h-full text-3xl font-bold text-gray-300 uppercase">
+                      {currentUser?.full_name?.charAt(0) || currentUser?.email?.charAt(0) || "?"}
+                  </div>
+              )}
+          </div>
+          <div className="flex flex-col gap-2">
+            <Button variant="outline" size="sm" onClick={handleAvatarClick}>
+                Change Avatar
+            </Button>
+            <input 
+                type="file" 
+                ref={fileInputRef} 
+                className="hidden" 
+                accept="image/*"
+                onChange={handleFileChange}
+            />
+          </div>
+      </div>
+
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}