add endpoint for uploading profile pic signup

src/components/PodcasterRegister.tsx

@@ -15,6 +15,7 @@ import {
 import { useHistory } from "react-router-dom";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { useState } from "react";
+import axios from "axios";
 
 const PodcasterRegister = () => {
   const history = useHistory();
@@ -22,7 +23,7 @@ const PodcasterRegister = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [cover_art, setCoverArt] = useState("");
+  const [cover_art, setCoverArt] = useState<any>(null);
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
@@ -30,7 +31,12 @@ const PodcasterRegister = () => {
   const handleUsernameChange = (e) => setUsername(e.target.value);
   const handlePasswordChange = (e) => setPassword(e.target.value);
   const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);
-  const handleCoverArtChange = (e) => setCoverArt(e.target.value);
+  // const handleCoverArtChange = (e) => setCoverArt(e.target.value);
+  const handleCoverArtChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      setCoverArt(event.target.files[0]);
+    }
+  };
   const handleNameChange = (e) => setName(e.target.value);
   const handleDescriptionChange = (e) => setDescription(e.target.value);
 
@@ -64,35 +70,42 @@ const PodcasterRegister = () => {
   };
 
   const onSubmit = async () => {
-    const url = "http://localhost:3000";
-    const isPodcaster = true;
-    console.log(email);
+    // const url = "http://localhost:3000";
+    // const isPodcaster = true;
+    // console.log(email);
     try {
-      const res = await fetch(`${url}/api/v1/register/podcaster`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
+      const imageFormData = new FormData();
+      imageFormData.append("file", cover_art);
+      const imageUploadResponse = await axios.post(
+        "http://localhost:3000/api/v1/upload",
+        imageFormData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+          withCredentials: true,
+        }
+      );
+      const imageFilePath = `http://localhost:3000${imageUploadResponse.data.data.file_path}`;
+      const res = await axios.post(
+        "http://localhost:3000/api/v1/register/podcaster",
+        {
           username,
           email,
           password,
-          cover_art,
+          cover_art: imageFilePath,
           description,
           name,
-          isPodcaster,
-        }),
-        credentials: "include",
-      });
-
-      console.log(res);
-      if (!res.ok) {
-        const errorResponse = await res.json();
-        throw new Error(errorResponse.message || "Registration failed.");
-      }
-
-      const response = await res.json();
-      alert("Form submitted!");
+          isPodcaster: true,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          withCredentials: true,
+        }
+      );
+      alert("Registration successful!");
       history.push("/login");
     } catch (err) {
       console.error(err);
@@ -195,7 +208,6 @@ const PodcasterRegister = () => {
                   accept="image/*"
                   border="none"
                   padding="0"
-                  value={cover_art}
                   onChange={handleCoverArtChange}
                 ></Input>
               </FormControl>

src/components/ReviewerRegister.tsx

@@ -14,6 +14,7 @@ import {
 import { useHistory } from "react-router-dom";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { useState } from "react";
+import axios from "axios";
 
 const ReviewerRegister = () => {
   const history = useHistory();
@@ -21,13 +22,19 @@ const ReviewerRegister = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [profile_picture, setProfilePicture] = useState("");
+  const [profile_picture, setProfilePicture] = useState<any>(null);
 
   const handleEmailChange = (e) => setEmail(e.target.value);
   const handleUsernameChange = (e) => setUsername(e.target.value);
   const handlePasswordChange = (e) => setPassword(e.target.value);
   const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);
-  const handleProfilePictureChange = (e) => setProfilePicture(e.target.value);
+  const handleProfilePictureChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.files) {
+      setProfilePicture(event.target.files[0]);
+    }
+  };
 
   const [showPassword1, setShowPassword1] = useState(false);
   const [showPassword2, setShowPassword2] = useState(false);
@@ -57,33 +64,38 @@ const ReviewerRegister = () => {
   };
 
   const onSubmit = async () => {
-    const url = "http://localhost:3000";
-    const isPodcaster = false;
-    console.log(email);
     try {
-      const res = await fetch(`${url}/api/v1/register/reviewer`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
+      const imageFormData = new FormData();
+      imageFormData.append("file", profile_picture);
+      const imageUploadResponse = await axios.post(
+        "http://localhost:3000/api/v1/upload",
+        imageFormData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+          withCredentials: true,
+        }
+      );
+
+      const imageFilePath = `http://localhost:3000${imageUploadResponse.data.data.file_path}`;
+      const res = await axios.post(
+        "http://localhost:3000/api/v1/register/reviewer",
+        {
           username,
           email,
           password,
-          profile_picture,
-          isPodcaster,
-        }),
-        credentials: "include",
-      });
-
-      console.log(res);
-      if (!res.ok) {
-        const errorResponse = await res.json();
-        throw new Error(errorResponse.message || "Registration failed.");
-      }
-
-      const response = await res.json();
-      alert("Form submitted!");
+          profile_picture: imageFilePath,
+          isPodcaster: false,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          withCredentials: true,
+        }
+      );
+      alert("Registration successful!");
       history.push("/login");
     } catch (err) {
       console.error(err);
@@ -178,7 +190,6 @@ const ReviewerRegister = () => {
                   accept="image/*"
                   border="none"
                   padding="0"
-                  value={profile_picture}
                   onChange={handleProfilePictureChange}
                 ></Input>
               </FormControl>