Avatar upload + dedicated endpoint for serving binary images from database

Author: chriscarrollsmith

routers/user.py

@@ -1,7 +1,8 @@
-from fastapi import APIRouter, Depends, HTTPException, Form
-from fastapi.responses import RedirectResponse
+from fastapi import APIRouter, Depends, HTTPException, Form, UploadFile, File
+from fastapi.responses import RedirectResponse, Response
 from pydantic import BaseModel, EmailStr
-from sqlmodel import Session
+from sqlmodel import Session, select
+from typing import Optional
 from utils.models import User
 from utils.auth import get_session, get_authenticated_user, verify_password
 
@@ -15,16 +16,33 @@ class UpdateProfile(BaseModel):
     """Request model for updating user profile information"""
     name: str
     email: EmailStr
-    avatar_url: str
+    avatar_url: Optional[str] = None
+    avatar_file: Optional[bytes] = None
+    avatar_content_type: Optional[str] = None
 
     @classmethod
     async def as_form(
         cls,
         name: str = Form(...),
         email: EmailStr = Form(...),
-        avatar_url: str = Form(...),
+        avatar_url: Optional[str] = Form(None),
+        avatar_file: Optional[UploadFile] = File(None),
     ):
-        return cls(name=name, email=email, avatar_url=avatar_url)
+        avatar_data = None
+        avatar_content_type = None
+
+        if avatar_file:
+            # Read the file content
+            avatar_data = await avatar_file.read()
+            avatar_content_type = avatar_file.content_type
+
+        return cls(
+            name=name,
+            email=email,
+            avatar_url=avatar_url if not avatar_file else None,
+            avatar_file=avatar_data,
+            avatar_content_type=avatar_content_type
+        )
 
 
 class UserDeleteAccount(BaseModel):
@@ -50,7 +68,17 @@ async def update_profile(
     # Update user details
     current_user.name = user_profile.name
     current_user.email = user_profile.email
-    current_user.avatar_url = user_profile.avatar_url
+
+    # Handle avatar update
+    if user_profile.avatar_file:
+        current_user.avatar_url = None
+        current_user.avatar_data = user_profile.avatar_file
+        current_user.avatar_content_type = user_profile.avatar_content_type
+    else:
+        current_user.avatar_url = user_profile.avatar_url
+        current_user.avatar_data = None
+        current_user.avatar_content_type = None
+
     session.commit()
     session.refresh(current_user)
     return RedirectResponse(url="/profile", status_code=303)
@@ -84,3 +112,24 @@ async def delete_account(
 
     # Log out the user
     return RedirectResponse(url="/auth/logout", status_code=303)
+
+
+@router.get("/avatar/{user_id}")
+async def get_avatar(
+    user_id: int,
+    session: Session = Depends(get_session)
+):
+    """Serve avatar image from database"""
+    user = session.exec(select(User).where(User.id == user_id)).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    if user.avatar_data:
+        return Response(
+            content=user.avatar_data,
+            media_type=user.avatar_content_type
+        )
+    elif user.avatar_url:
+        return RedirectResponse(url=user.avatar_url)
+    else:
+        raise HTTPException(status_code=404, detail="Avatar not found")

templates/users/profile.html

@@ -18,8 +18,8 @@ <h1 class="mb-4">User Profile</h1>
             <p><strong>Email:</strong> {{ user.email }}</p>
             <!-- Display user avatar or silhouette if no avatar is available -->
             <div class="mb-3">
-                {% if user.avatar_url %}
-                    <img src="{{ user.avatar_url }}" alt="User Avatar" class="img-thumbnail" width="150">
+                {% if user.avatar_url or user.avatar_data %}
+                    <img src="{{ url_for('get_avatar', user_id=user.id) }}" alt="User Avatar" class="img-thumbnail" width="150">
                 {% else %}
                     {{ render_silhouette(width=150, height=150) }}
                 {% endif %}
@@ -35,7 +35,7 @@ <h1 class="mb-4">User Profile</h1>
             Edit Profile
         </div>
         <div class="card-body">
-            <form action="{{ url_for('update_profile') }}" method="post">
+            <form action="{{ url_for('update_profile') }}" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                     <label for="name" class="form-label">Name</label>
                     <input type="text" class="form-control" id="name" name="name" value="{{ user.name }}">
@@ -45,8 +45,20 @@ <h1 class="mb-4">User Profile</h1>
                     <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}">
                 </div>
                 <div class="mb-3">
-                    <label for="avatar_url" class="form-label">Avatar URL</label>
-                    <input type="url" class="form-control" id="avatar_url" name="avatar_url" value="{{ user.avatar_url }}">
+                    <label class="form-label">Avatar</label>
+                    <div class="mb-2">
+                        <label for="avatar_type" class="form-label">Choose avatar type:</label>
+                        <select class="form-select" id="avatar_type" onchange="toggleAvatarInput()">
+                            <option value="url">URL</option>
+                            <option value="file">Upload File</option>
+                        </select>
+                    </div>
+                    <div id="url_input" class="mb-2">
+                        <input type="url" class="form-control" id="avatar_url" name="avatar_url" value="{{ user.avatar_url or '' }}">
+                    </div>
+                    <div id="file_input" class="mb-2" style="display: none;">
+                        <input type="file" class="form-control" id="avatar_file" name="avatar_file" accept="image/*">
+                    </div>
                 </div>
                 <button type="submit" class="btn btn-primary">Save Changes</button>
             </form>
@@ -103,5 +115,39 @@ <h1 class="mb-4">User Profile</h1>
             editProfile.style.display = 'block';
         }
     }
+
+    // Function to toggle between URL and file upload inputs
+    function toggleAvatarInput() {
+        var avatarType = document.getElementById('avatar_type').value;
+        var urlInput = document.getElementById('url_input');
+        var fileInput = document.getElementById('file_input');
+        var urlField = document.getElementById('avatar_url');
+        
+        if (avatarType === 'url') {
+            urlInput.style.display = 'block';
+            fileInput.style.display = 'none';
+            // Clear file input
+            document.getElementById('avatar_file').value = '';
+        } else {
+            urlInput.style.display = 'none';
+            fileInput.style.display = 'block';
+            // Clear URL input
+            urlField.value = '';
+        }
+    }
+
+    // Add form submission validation
+    document.querySelector('form[action="{{ url_for("update_profile") }}"]').addEventListener('submit', function(e) {
+        var avatarType = document.getElementById('avatar_type').value;
+        var urlField = document.getElementById('avatar_url');
+        var fileField = document.getElementById('avatar_file');
+
+        // Clear the unused field before submission
+        if (avatarType === 'url') {
+            fileField.value = '';
+        } else {
+            urlField.value = '';
+        }
+    });
 </script>
 {% endblock %}

utils/models.py

@@ -5,7 +5,7 @@
 from typing import Optional, List, Union
 from fastapi import HTTPException
 from sqlmodel import SQLModel, Field, Relationship
-from sqlalchemy import Column, Enum as SQLAlchemyEnum
+from sqlalchemy import Column, Enum as SQLAlchemyEnum, LargeBinary
 from sqlalchemy.orm import Mapped
 
 logger = getLogger("uvicorn.error")
@@ -181,6 +181,9 @@ class User(SQLModel, table=True):
     name: str
     email: str = Field(index=True, unique=True)
     avatar_url: Optional[str] = None
+    avatar_data: Optional[bytes] = Field(
+        default=None, sa_column=Column(LargeBinary))
+    avatar_content_type: Optional[str] = None
     created_at: datetime = Field(default_factory=utc_time)
     updated_at: datetime = Field(default_factory=utc_time)