Profile Picture Upload (Cloudianry)

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Signup.js

@@ -5,6 +5,7 @@
 
 import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
+import { useToast } from "@chakra-ui/react";
 
 const Signup = () => {
 
@@ -14,12 +15,58 @@ const Signup = () => {
   const [confirmpassword, setConfirmpassword] = useState();
   const [password, setPassword] = useState();
   const [pic, setPic] = useState();
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
 
   const handleClick = () => setShow(!show);
 
-  const postDetails = (pics) => { };
-
-  const submitHandler = () => { };
+  const postDetails = (pics) => {
+    setLoading(true);
+    if (pics === undefined) {
+      toast({
+        title: "Please Select an Image!",
+        status: "warning",
+        duration: 5000, //How long message is displaying
+        isClosable: true,
+        position:"bottom",
+      });
+      return;
+        
+    }
+    if (pics.type === "image/jpeg" || pics.type === "image/png") {
+      const data = new FormData();
+      data.append("file", pics);
+      data.append("upload_preset", "chat-app");
+      data.append("cloud_name", "minocode");
+      //fetch("const data = new FormData();");
+      fetch("https://api.cloudinary.com/v1_1/minocode/image/upload", {
+        method: "post",
+        body: data,
+      }).then((res) => res.json())
+        .then(data => {
+          setPic(data.url.toString());
+          setLoading(false);
+        })
+        .catch((err) => {
+          console.log(err);
+          setLoading(false);
+        });
+    } else {
+      toast({
+        title: "Please Select an Image!",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position: "bottom",
+      });
+      setLoading(false);
+      return;
+    }
+   };
+
+  const submitHandler = () => {
+    
+   };
 
   return (
       //Use vstack to allign verticaly
@@ -97,6 +144,7 @@ const Signup = () => {
         width="100%"
         style={{ marginTop: 15 }}
         onClick={submitHandler}
+        isLoading={loading}
       
       >
         Sign Up