added profile image upload func

Author: ZeeshanML

config.py

@@ -11,5 +11,7 @@ class Settings(BaseSettings):
     algorithm: str = "HS256"
     access_token_expire_minutes: int = 30
 
+    max_upload_size_bytes: int = 5 * 1024 * 1024
+
 
 settings = Settings() # Loaded from .env file

image_utils.py

@@ -0,0 +1,33 @@
+from fileinput import filename
+from pickletools import optimize
+from termios import IMAXBEL
+import uuid
+from io import BytesIO
+from pathlib import Path
+from PIL import Image, ImageOps
+
+PROFILE_PICS_DIR  = Path("media/profile_pics")
+
+def process_profile_image(content: bytes) -> str:
+    with Image.open(BytesIO(content)) as original:
+        img = ImageOps.exif_transpose(original)
+        img = ImageOps.fit(img, (300, 300), method=Image.Resampling.LANCZOS)
+
+        if img.mode in ("RGBA", "LA", "P"):
+            img = img.convert("RGB")
+
+        filename = f"{uuid.uuid4().hex}.jpg"
+        filepath = PROFILE_PICS_DIR / filename
+        PROFILE_PICS_DIR.mkdir(parents=True, exist_ok=True)
+        img.save(filepath, "JPEG", quality=85, optimize=True)
+
+    return filename
+
+
+def delete_profile_image(filename: str | None) -> None:
+    if filename is None:
+        return
+
+    filepath = PROFILE_PICS_DIR / filename
+    if filepath.exists():
+        filepath.unlink()

media/profile_pics/9aa3eafdc3f14cd88d848af00829e6e2.jpg

@@ -8,6 +8,7 @@ dependencies = [
     "aiosqlite>=0.22.1",
     "fastapi[standard]>=0.128.1",
     "greenlet>=3.3.1",
+    "pillow>=12.1.1",
     "pwdlib[argon2]>=0.3.0",
     "pydantic-settings>=2.12.0",
     "pyjwt>=2.11.0",

pyproject.toml

@@ -1,20 +1,21 @@
-from collections import UserDict
 from typing import Annotated
 from datetime import timedelta
-from unittest import result
 
-from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi import APIRouter, Depends, HTTPException, status, UploadFile
 from fastapi.security import OAuth2PasswordRequestForm
-from sqlalchemy import select, func
+from pydantic import HttpUrl
+from sqlalchemy import exc, select, func
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.orm import selectinload
+from PIL import UnidentifiedImageError
+from starlette.concurrency import run_in_threadpool
 
 from config import settings
 import models
 from database import get_db
 from schemas import PostResponse, UserCreate, UserPrivate, UserPublic, UserUpdate, Token
-
 from auth import create_access_token, hash_password, verify_password, CurrentUser
+from image_utils import delete_profile_image, process_profile_image
 
 router = APIRouter()
 
@@ -165,8 +166,6 @@ async def update_user(
         user.username = user_update.username
     if user_update.email is not None:
         user.email = user_update.email.lower()
-    if user_update.image_file is not None:
-        user.image_file = user_update.image_file
 
     await db.commit()
     await db.refresh(user)
@@ -192,5 +191,79 @@ async def delete_user(
             detail="User not found",
         )
 
+    old_filename = user.image_file
+
     await db.delete(user)
-    await db.commit()
+    await db.commit()
+
+    if old_filename:
+        delete_profile_image(old_filename)
+
+
+@router.patch("/{user_id}/picture", response_model=UserPrivate)
+async def upload_profile_picture(
+    user_id: int,
+    file: UploadFile,
+    current_user: CurrentUser,
+    db: Annotated[AsyncSession, Depends(get_db)],
+):
+    if current_user.id != user_id:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Not authorized to update this user's picture",
+        )
+
+    content = await file.read()
+
+    if len(content) > settings.max_upload_size_bytes:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"File too large. Maximum size is {settings.max_upload_size_bytes // (1024 * 1024)}MB",
+        )
+
+    try:
+        new_filename = await run_in_threadpool(process_profile_image, content)
+    except UnidentifiedImageError as err:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid image file. Please upload a valid image (JPEG, PNG, GIF, WebP).",
+        ) from err
+
+    old_filename = current_user.image_file
+
+    current_user.image_file = new_filename
+    await db.commit()
+    await db.refresh(current_user)
+
+    if old_filename:
+        delete_profile_image(old_filename)
+
+    return current_user
+
+@router.delete("/{user_id}/picture", response_model=UserPrivate)
+async def delete_user_picture(
+    user_id: int,
+    current_user: CurrentUser,
+    db: Annotated[AsyncSession, Depends(get_db)],
+):
+    if current_user.id != user_id:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Not authorized to delete this user's picture",
+        )
+
+    old_filename = current_user.image_file
+
+    if old_filename is None:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="No profile picture to delete",
+        )
+
+    current_user.image_file = None
+    await db.commit()
+    await db.refresh(current_user)
+
+    delete_profile_image(old_filename)
+
+    return current_user

routers/users.py

@@ -13,7 +13,6 @@ class UserCreate(UserBase):
 class UserUpdate(BaseModel):
     username: str | None = Field(default=None, min_length=1, max_length=50)
     email: EmailStr | None = Field(default=None, max_length=120)
-    image_file: str | None = Field(default=None, min_length=1, max_length=200)
 
 class Token(BaseModel):
     access_token: str

schemas.py

@@ -37,11 +37,26 @@ <h5>Update Profile</h5>
             </form>
         </div>
         <hr>
-        <!-- Profile Picture Section (Placeholder) -->
+        <!-- Profile Picture Section -->
         <div class="mb-4">
             <h5>Profile Picture</h5>
-            <p class="text-body-secondary">File upload coming in a future tutorial.</p>
-            <input type="file" class="form-control" disabled>
+            <!-- Preview container -->
+            <div class="mb-3">
+                <img id="imagePreview"
+                     class="rounded-circle d-none object-fit-cover"
+                     alt="Image preview"
+                     width="150"
+                     height="150">
+            </div>
+            <!-- File input and upload button -->
+            <div class="d-flex gap-2 align-items-start">
+                <input type="file"
+                       class="form-control file-input-sm"
+                       id="pictureInput"
+                       accept="image/*">
+                <button type="button" class="btn btn-primary" id="uploadPictureBtn" disabled>Upload</button>
+            </div>
+            <small class="text-body-secondary">Maximum file size: 5MB. Supported formats: JPEG, PNG, GIF, WebP.</small>
         </div>
         <hr>
         <!-- Password Reset Section (Placeholder) -->
@@ -141,6 +156,98 @@ <h5 class="modal-title" id="deleteAccountModalLabel">Delete Account?</h5>
     document.getElementById('email').value = user.email;
   }
 
+    // Image Preview Handler
+    const pictureInput = document.getElementById('pictureInput');
+    const imagePreview = document.getElementById('imagePreview');
+    const uploadBtn = document.getElementById('uploadPictureBtn');
+
+    pictureInput.addEventListener('change', (event) => {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          imagePreview.src = e.target.result;
+          imagePreview.classList.remove('d-none');
+        };
+        reader.readAsDataURL(file);
+
+        uploadBtn.disabled = false;
+      } else {
+        imagePreview.classList.add('d-none');
+        uploadBtn.disabled = true;
+      }
+    });
+
+  // Upload Profile Picture Handler
+  uploadBtn.addEventListener('click', async () => {
+    const token = getToken();
+    if (!token) {
+      window.location.href = '/login';
+      return;
+    }
+
+    const file = pictureInput.files[0];
+    if (!file) {
+      return;
+    }
+
+    // Use FormData for file uploads (not JSON)
+    const formData = new FormData();
+    formData.append('file', file);
+
+    uploadBtn.disabled = true;
+    uploadBtn.textContent = 'Uploading...';
+
+    try {
+      const response = await fetch(`/api/users/${currentUserId}/picture`, {
+        method: 'PATCH',
+        headers: {
+          // Don't set Content-Type — browser sets multipart boundary automatically
+          'Authorization': `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (response.status === 401) {
+        window.location.href = '/login';
+        return;
+      }
+
+      if (response.status === 403) {
+        document.getElementById('errorMessage').textContent =
+          'You are not authorized to update this profile picture.';
+        showModal('errorModal');
+        return;
+      }
+
+      if (response.ok) {
+        const data = await response.json();
+
+        clearUserCache();
+
+        document.getElementById('profileImage').src = data.image_path;
+
+        pictureInput.value = '';
+        imagePreview.classList.add('d-none');
+
+        document.getElementById('successMessage').textContent =
+          'Profile picture updated successfully!';
+        showModal('successModal');
+      } else {
+        const error = await response.json();
+        document.getElementById('errorMessage').textContent = getErrorMessage(error);
+        showModal('errorModal');
+      }
+    } catch (error) {
+      document.getElementById('errorMessage').textContent =
+        'Network error. Please check your connection and try again.';
+      showModal('errorModal');
+    } finally {
+      uploadBtn.disabled = pictureInput.files.length === 0;
+      uploadBtn.textContent = 'Upload';
+    }
+  });
+
   // Update Profile Form Handler
   const updateForm = document.getElementById('updateProfileForm');
   updateForm.addEventListener('submit', async (event) => {