created component and view for testing the upload image pipeline

Author: ElaineShu0312

csm_web/frontend/src/components/ImageUploader.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+const ImageUploader = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [status, setStatus] = useState<string>("");
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!file) {
+      setStatus("Please select a file to upload");
+      return;
+    }
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/upload_image/", {
+        method: "POST",
+        body: formData
+      });
+
+      if (!response.ok) {
+        throw new 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>
+      <h1>Image Upload Tester</h1>
+      <input type="file" accept="image/*" onChange={handleFileChange} />
+      <button onClick={handleUpload}>Upload</button>
+      {status && <p>{status}</p>}
+    </div>
+  );
+};
+
+export default ImageUploader;

csm_web/scheduler/migrations/0034_user_profile_image_alter_user_bio_and_more.py

@@ -0,0 +1,36 @@
+# Generated by Django 4.2.7 on 2024-10-16 21:42
+
+from django.db import migrations, models
+
+import csm_web.settings
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("scheduler", "0033_user_bio_user_pronouns_user_pronunciation"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="profile_image",
+            field=models.ImageField(
+                blank=True, storage=csm_web.settings.ProfileImageStorage(), upload_to=""
+            ),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="bio",
+            field=models.CharField(blank=True, default="", max_length=500),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="pronouns",
+            field=models.CharField(blank=True, default="", max_length=20),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="pronunciation",
+            field=models.CharField(blank=True, default="", max_length=50),
+        ),
+    ]

csm_web/scheduler/models.py

@@ -55,8 +55,7 @@ class User(AbstractUser):
 
     pronouns = models.CharField(max_length=20, default="", blank=True)
     pronunciation = models.CharField(max_length=50, default="", blank=True)
-    # the upload_to field specifies subdivisions within S3 bucket
-    profile_image = models.ImageField(storage=ProfileImageStorage())
+    profile_image = models.ImageField(storage=ProfileImageStorage(), 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/urls.py

@@ -18,6 +18,7 @@
     path("user/", views.user_info, name="user"),
     path("user/<int:pk>/", views.user_retrieve, name="user_retrieve"),
     path("user/<int:pk>/update/", views.user_update, name="user_update"),
+    path("user/<int:pk>/upload_image/", views.upload_image, name="2upload_image"),
     path("matcher/active/", views.matcher.active),
     path("matcher/<int:pk>/slots/", views.matcher.slots),
     path("matcher/<int:pk>/preferences/", views.matcher.preferences),

csm_web/scheduler/views/__init__.py

@@ -6,4 +6,6 @@
 from .section import SectionViewSet
 from .spacetime import SpacetimeViewSet
 from .student import StudentViewSet
-from .user import UserViewSet, user_info, user_retrieve, user_update
+
+# from .test import upload_image
+from .user import UserViewSet, upload_image, user_info, user_retrieve, user_update

csm_web/scheduler/views/user.py

@@ -139,3 +139,28 @@ def user_info(request):
     """
     serializer = UserSerializer(request.user)
     return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+@api_view(["POST"])
+def upload_image(request, pk):
+    """
+    Uploads an image to the aws s3 bucket
+    """
+
+    if "file" not in request.FILES:
+        return Response(
+            {"error": "No file was uploaded"}, status=status.HTTP_400_BAD_REQUEST
+        )
+    image = request.FILES["file"]
+
+    # use pk to get a User
+    try:
+        user = User.objects.get(pk=pk)
+    except User.DoesNotExist:
+        return Response({"detail": "Not found."}, status=status.HTTP_404_NOT_FOUND)
+
+    user.profile_image.save(image.name, image)
+
+    return Response(
+        {"message": "File uploaded successfully"}, status=status.HTTP_200_OK
+    )