trying to figure out image upload json error

Author: ElaineShu0312

csm_web/frontend/src/components/ImageUploader.tsx

@@ -1,3 +1,4 @@
+import Cookies from "js-cookie";
 import React, { useState } from "react";
 
 const ImageUploader = () => {
@@ -19,8 +20,12 @@ const ImageUploader = () => {
       const formData = new FormData();
       formData.append("file", file);
 
-      const response = await fetch("/upload_image/", {
+      const response = await fetch(`/profile/user/upload_image/`, {
         method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "X-CSRFToken": Cookies.get("csrftoken") ?? ""
+        },
         body: formData
       });
 

csm_web/frontend/src/components/UserProfile.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { PermissionError } from "../utils/queries/helpers";
 import { useUserInfo, useUserInfoUpdateMutation } from "../utils/queries/profiles";
+import ImageUploader from "./ImageUploader";
 import LoadingSpinner from "./LoadingSpinner";
 
 import "../css/base/form.scss";
@@ -116,6 +117,8 @@ 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="firstName" className="form-label">

csm_web/scheduler/urls.py

@@ -18,7 +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("user/upload_image/", views.upload_image, name="upload_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/user.py

@@ -142,7 +142,7 @@ def user_info(request):
 
 
 @api_view(["POST"])
-def upload_image(request, pk):
+def upload_image(request):
     """
     Uploads an image to the aws s3 bucket
     """
@@ -153,11 +153,7 @@ def upload_image(request, pk):
         )
     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 = request.user
 
     user.profile_image.save(image.name, image)