upload agent image action

src/components/modals/agent_modal.tsx

@@ -29,8 +29,15 @@ export default function AgentModal(props: {
   showModal: boolean;
   setShowModal: Function;
   onUpdateAgent: Function;
+  onUploadImage: Function;
 }): JSX.Element {
-  const { agent, showModal, setShowModal, onUpdateAgent = () => {} } = props;
+  const {
+    agent,
+    showModal,
+    setShowModal,
+    onUpdateAgent = () => {},
+    onUploadImage = () => {},
+  } = props;
 
   const [isEdit, setEdit] = useState(false);
 
@@ -40,6 +47,8 @@ export default function AgentModal(props: {
     setTempAgent(agent);
   }, [agent]);
 
+  const [imageFile, setImageFile] = useState<Blob>();
+
   const [selectedImage, setSelectedImage] = useState<
     string | ArrayBuffer | null
   >(null);
@@ -53,10 +62,63 @@ export default function AgentModal(props: {
     };
 
     if (file) {
+      setImageFile(file);
       reader.readAsDataURL(file);
     }
   };
 
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const handleUploadImage = async () => {
+    setUploadLoading(true);
+    if (imageFile) {
+      const body = new FormData();
+      body.append("agent_id", agent.id as string);
+      body.append("image", imageFile);
+      const response = await fetch("/api/upload_agent_image", {
+        method: "POST",
+        body,
+      });
+      if (response.ok) {
+        response
+          .json()
+          .then((data) => {
+            if (data.success) {
+              setTempAgent({ ...tempAgent, image: data.url });
+              ReactSwal.fire({
+                title: "Finished",
+                text: "Agent image updated successfully",
+                icon: "success",
+              });
+              onUploadImage();
+            } else {
+              ReactSwal.fire({
+                title: "Error",
+                text: data.error,
+                icon: "error",
+              });
+            }
+          })
+          .catch((error) => {
+            ReactSwal.fire({
+              title: "Error",
+              text: error,
+              icon: "error",
+            });
+          })
+          .finally(() => {
+            setUploadLoading(false);
+          });
+      } else {
+        ReactSwal.fire({
+          title: "Error",
+          text: "An error occurred, try again.",
+          icon: "error",
+        });
+        setUploadLoading(false);
+      }
+    }
+  };
+
   const [updateAgent] = useMutation(UPDATE_AGENT);
   const [updateAgentLoading, setUpdateAgentLoading] = useState(false);
 
@@ -228,6 +290,20 @@ export default function AgentModal(props: {
                         accept="image/*"
                         onChange={handleImageChange}
                       />
+                      <div className="text-center py-1">
+                        <Button
+                          onClick={() => {
+                            handleUploadImage();
+                          }}
+                          loading={uploadLoading}
+                          disabled={uploadLoading || !selectedImage}
+                          color="blue"
+                          className="mx-auto"
+                          placeholder={undefined}
+                        >
+                          Upload
+                        </Button>
+                      </div>
                       {selectedImage && (
                         <img
                           // @ts-ignore
@@ -239,8 +315,8 @@ export default function AgentModal(props: {
                     </>
                   ) : (
                     <img
-                      src={agent?.image ?? "/sailor.png"}
-                      alt="Software Engineer"
+                      src={tempAgent?.image ?? "/agents_images/sailor.png"}
+                      alt="Agent Image"
                       className="w-7/12 mx-auto rounded-lg"
                     />
                   )}

src/components/modals/new_agent_modal.tsx

@@ -15,7 +15,6 @@ import {
   TESelect,
   TETextarea,
 } from "tw-elements-react";
-import TWFileInput from "../inputs/file";
 import { Button, Switch } from "@material-tailwind/react";
 import { useMutation } from "@apollo/client";
 import { CREATE_AGENT } from "@/utils/graphql_queries";
@@ -93,7 +92,7 @@ function NewAgentModal(props: {
             </TEModalHeader>
             <TEModalBody>
               <div className="sm:flex">
-                <div className="sm:w-1/2">
+                <div className="sm:w-1/2 mx-auto">
                   <div className="mb-4">
                     <label className="font-bold text-lg">Role:</label>
                     <TEInput
@@ -181,19 +180,6 @@ function NewAgentModal(props: {
                     />
                   </div>
                 </div>
-
-                <div className="m-4 sm:w-1/2">
-                  <label className="font-bold mx-2">Agent Image: </label>
-                  <TWFileInput accept="image/*" onChange={handleImageChange} />
-                  {selectedImage && (
-                    <img
-                      // @ts-ignore
-                      src={selectedImage}
-                      alt="Agent Image"
-                      className="mx-auto my-3 max-w-72 h-auto"
-                    />
-                  )}
-                </div>
               </div>
             </TEModalBody>