Fixed image validation with other minor fixes

Author: jacovkim

csm_web/csm_web/settings.py

@@ -11,7 +11,6 @@
 """
 
 import os
-from datetime import datetime
 
 import sentry_sdk
 from factory.django import DjangoModelFactory
@@ -185,18 +184,17 @@
 STATIC_URL = "/static/"
 
 
-# xTODO: make sure this actually works
 class ProfileImageStorage(S3Boto3Storage):
     bucket_name = "csm-web-profile-pictures"
-    file_overwrite = False
+    file_overwrite = True  # should be true so that we replace one profile for user
 
     def get_accessed_time(self, name):
         # Implement logic to get the last accessed time
-        return datetime.now()
+        raise NotImplementedError("This backend does not support this method.")
 
     def get_created_time(self, name):
         # Implement logic to get the creation time
-        return datetime.now()
+        raise NotImplementedError("This backend does not support this method.")
 
     def path(self, name):
         # S3 does not support file paths
@@ -254,6 +252,8 @@ def path(self, name):
     "DEFAULT_PERMISSION_CLASSES": ["rest_framework.permissions.IsAuthenticated"],
     "DEFAULT_PARSER_CLASSES": [
         "djangorestframework_camel_case.parser.CamelCaseJSONParser",
+        "rest_framework.parsers.FormParser",
+        "rest_framework.parsers.MultiPartParser",
     ],
 }
 

csm_web/frontend/src/components/ImageUploader.tsx

@@ -1,48 +1,63 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { fetchWithMethod, HTTP_METHODS } from "../utils/api";
 
-const MAX_FILE_SIZE_BYTES = 3 * 150 * 150;
+// file size limits
+const MAX_SIZE_MB = 2;
+const MAX_FILE_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
 
 const ImageUploader = () => {
   const [file, setFile] = useState<File | null>(null);
   const [status, setStatus] = useState<string>("");
 
+  // useEffect(() => {
+  //   if (file) {
+  //   }
+  // }, [file]);
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const selectedFile = e.target.files[0];
 
-      if (selectedFile.size > MAX_FILE_SIZE_BYTES) {
-        setStatus(`File size exceeds max limit of ${MAX_FILE_SIZE_BYTES}`);
+      if (selectedFile) {
+        if (selectedFile.size > MAX_FILE_SIZE_BYTES) {
+          setStatus(`File size exceeds max limit of ${MAX_SIZE_MB}MB.`);
+        } else {
+          setFile(selectedFile);
+          setStatus("");
+        }
       }
-      setFile(selectedFile);
-      setStatus("");
     }
   };
 
   const handleUpload = async () => {
-    if (!file) {
-      setStatus("Please select a file to upload");
-      return;
-    }
     try {
+      if (!file) {
+        setStatus("Please select a file to upload");
+        return;
+      }
       const formData = new FormData();
+
       formData.append("file", file);
 
       const response = await fetchWithMethod(`user/upload_image/`, HTTP_METHODS.POST, formData, true);
 
+      console.log(response);
+
       if (!response.ok) {
-        throw new Error("Failed to upload file");
+        const errorData = await response.json();
+        console.error("Error:", errorData.error || "Unknown error");
+        throw new Error(errorData.error || "Failed to upload file");
       }
-
-      const data = await response.json();
       setStatus(`File uploaded successfully`);
     } catch (error) {
       setStatus(`Upload failed: ${(error as Error).message}`);
     }
   };
+
   return (
     <div>
-      <input type="file" accept="image/*" onChange={handleFileChange} />
+      <h1>Image Upload Tester</h1>
+      <input type="file" onChange={handleFileChange} />
       <button onClick={handleUpload}>Upload</button>
       {status && <p>{status}</p>}
     </div>

csm_web/frontend/src/components/UserProfile.tsx

@@ -8,6 +8,15 @@ import LoadingSpinner from "./LoadingSpinner";
 import "../css/base/form.scss";
 import "../css/base/table.scss";
 
+interface UserInfo {
+  firstName: string;
+  lastName: string;
+  bio: string;
+  pronouns: string;
+  pronunciation: string;
+  profileImage: string;
+}
+
 const UserProfile: React.FC = () => {
   const { id } = useParams();
   let userId = Number(id);
@@ -16,12 +25,13 @@ const UserProfile: React.FC = () => {
   const updateMutation = useUserInfoUpdateMutation(userId);
   const [isEditing, setIsEditing] = useState(false);
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<UserInfo>({
     firstName: "",
     lastName: "",
     bio: "",
     pronouns: "",
-    pronunciation: ""
+    pronunciation: "",
+    profileImage: ""
   });
 
   const [showSaveSpinner, setShowSaveSpinner] = useState(false);
@@ -30,12 +40,14 @@ const UserProfile: React.FC = () => {
   // Populate form data with fetched user data
   useEffect(() => {
     if (requestedData) {
+      console.log(requestedData);
       setFormData({
         firstName: requestedData.firstName || "",
         lastName: requestedData.lastName || "",
         bio: requestedData.bio || "",
         pronouns: requestedData.pronouns || "",
-        pronunciation: requestedData.pronunciation || ""
+        pronunciation: requestedData.pronunciation || "",
+        profileImage: requestedData.profileImage || ""
       });
     }
   }, [requestedData]);
@@ -59,6 +71,7 @@ const UserProfile: React.FC = () => {
   // Handle input changes
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
+    console.log("Changes");
     setFormData(prev => ({
       ...prev,
       [name]: value
@@ -117,9 +130,18 @@ const UserProfile: React.FC = () => {
   return (
     <div id="user-profile-form">
       <h2 className="form-title">User Profile</h2>
-
-      <ImageUploader />
       <div className="csm-form">
+        <div className="form-item">
+          <label htmlFor="profile" className="form-label">
+            Profile Image
+          </label>
+          {isEditing ? (
+            <ImageUploader />
+          ) : (
+            // <p>{formData.profileImage}</p>
+            <img src={formData.profileImage} />
+          )}
+        </div>
         <div className="form-item">
           <label htmlFor="firstName" className="form-label">
             First Name:

csm_web/frontend/src/utils/api.tsx

@@ -35,8 +35,6 @@ export function fetchWithMethod(
   const normalizedEndpoint = endpointWithQueryParams(normalizeEndpoint(endpoint), queryParams);
 
   if (isFormData) {
-    console.log("test");
-    // print("test")
     return fetch(normalizedEndpoint, {
       method: method,
       credentials: "same-origin",

csm_web/frontend/src/utils/types.tsx

@@ -40,6 +40,7 @@ export interface UserInfo {
   pronouns: string;
   pronunciation: string;
   isEditable: boolean;
+  profileImage?: string;
 }
 
 /**

csm_web/scheduler/admin.py

@@ -204,13 +204,17 @@ class UserAdmin(BasePermissionModelAdmin):
         "first_name",
         "last_name",
         "priority_enrollment",
+        "bio",
+        "profile_image",
     )
 
     list_display = (
         "id",
         "name",
         "email",
         "priority_enrollment",
+        "bio",
+        "profile_image",
     )
     list_display_links = ("name",)
     list_filter = ("is_active",)

csm_web/scheduler/migrations/0035_alter_user_profile_image.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-11-21 00:21
+
+import scheduler.models
+import scheduler.storage
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("scheduler", "0034_user_profile_image_alter_user_bio_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="user",
+            name="profile_image",
+            field=models.ImageField(
+                blank=True,
+                storage=scheduler.storage.ProfileImageStorage(),
+                upload_to=scheduler.models.image_path,
+            ),
+        ),
+    ]

csm_web/scheduler/models.py

@@ -11,7 +11,7 @@
 from django.utils import functional, timezone
 from rest_framework.serializers import ValidationError
 
-from csm_web.settings import ProfileImageStorage
+from .storage import ProfileImageStorage
 
 logger = logging.getLogger(__name__)
 
@@ -50,12 +50,22 @@ def week_bounds(date):
     return week_start, week_end
 
 
+def image_path(instance, filename):
+    """Compute the full path for a profile image."""
+    # file will be uploaded to images/<user_id>/<file_name>
+    extension = filename.rsplit(".", 1)[-1]
+    return f"images/{instance.id}.{extension}"
+
+
 class User(AbstractUser):
     priority_enrollment = models.DateTimeField(null=True, blank=True)
 
     pronouns = models.CharField(max_length=20, default="", blank=True)
     pronunciation = models.CharField(max_length=50, default="", blank=True)
-    profile_image = models.ImageField(storage=ProfileImageStorage(), blank=True)
+    # uploaded_at = models.DateTimeField(auto_now_add=True)
+    profile_image = models.ImageField(
+        storage=ProfileImageStorage(), upload_to=image_path, blank=True
+    )
     bio = models.CharField(max_length=500, default="", blank=True)
 
     def can_enroll_in_course(self, course, bypass_enrollment_time=False):

csm_web/scheduler/serializers.py

@@ -176,6 +176,7 @@ class Meta:
             "bio",
             "pronunciation",
             "pronouns",
+            "profile_image",
         )
 
 

csm_web/scheduler/storage.py

@@ -0,0 +1,18 @@
+from storages.backends.s3boto3 import S3Boto3Storage
+
+
+class ProfileImageStorage(S3Boto3Storage):
+    bucket_name = "csm-web-profile-pictures"
+    file_overwrite = True  # should be true so that we replace one profile for user
+
+    def get_accessed_time(self, name):
+        # Implement logic to get the last accessed time
+        raise NotImplementedError("This backend does not support this method.")
+
+    def get_created_time(self, name):
+        # Implement logic to get the creation time
+        raise NotImplementedError("This backend does not support this method.")
+
+    def path(self, name):
+        # S3 does not support file paths
+        raise NotImplementedError("This backend does not support absolute paths.")