file image input

src/frontend/src/components/IOInputField/index.tsx

@@ -8,17 +8,23 @@ export default function IOInputField({
   updateValue,
 }: IOInputProps): JSX.Element | undefined {
   function handleInputType() {
+    console.log(inputType);
+
+    const handleUpdateValue = (e) => {
+      updateValue(e, "text");
+    };
+
     switch (inputType) {
       case "TextInput":
         return (
           <Textarea
             className="custom-scroll"
             placeholder={"Enter text..."}
-            value={field.value}
-            onChange={updateValue}
+            value={field?.value}
+            onChange={handleUpdateValue}
           />
         );
-      case "fileLoader":
+      case "FileLoader":
         return <IOFileInput field={field} updateValue={updateValue} />;
 
       default:
@@ -26,8 +32,8 @@ export default function IOInputField({
           <Textarea
             className="custom-scroll"
             placeholder={"Enter text..."}
-            value={field.value}
-            onChange={updateValue}
+            value={field?.value}
+            onChange={handleUpdateValue}
           />
         );
     }

src/frontend/src/components/IOInputs/FileInput/index.tsx

@@ -1,8 +1,151 @@
+import { Button } from "../../ui/button";
+
+import { useEffect, useState } from "react";
+import { BASE_URL_API } from "../../../constants/constants";
+import { uploadFile } from "../../../controllers/API";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { IOFileInputProps } from "../../../types/components";
+import IconComponent from "../../genericIconComponent";
 
 export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
   //component to handle file upload from chatIO
-  function handleCLick() {}
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
-  return <div></div>;
+  const [isDragging, setIsDragging] = useState(false);
+  const [filePath, setFilePath] = useState("");
+  const [image, setImage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (filePath) {
+      updateValue(filePath, "file");
+    }
+  }, [filePath]);
+
+  useEffect(() => {
+    if (field) {
+      const fileName = field.split("/")[1];
+      const flowFileId = currentFlowId.toString();
+      setImage(`${BASE_URL_API}files/images/${flowFileId}/${fileName}`);
+    }
+  }, []);
+
+  const dragOver = (e) => {
+    e.preventDefault();
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setIsDragging(true);
+    }
+  };
+
+  const dragEnter = (e) => {
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setIsDragging(true);
+    }
+    e.preventDefault();
+  };
+
+  const dragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const onDrop = (e) => {
+    e.preventDefault();
+
+    if (e.dataTransfer.files.length > 0) {
+      const file = e.dataTransfer.files[0];
+
+      upload(file);
+
+      const fileReader = new FileReader();
+      fileReader.onload = (event) => {
+        const imageDataUrl = event.target?.result as string;
+        setImage(imageDataUrl);
+      };
+      fileReader.readAsDataURL(file);
+    }
+    setIsDragging(false);
+  };
+
+  const upload = async (file) => {
+    if (file) {
+      // Check if a file was selected
+      const fileReader = new FileReader();
+      fileReader.onload = (event) => {
+        const imageDataUrl = event.target?.result as string;
+        setImage(imageDataUrl);
+
+        // Display the image on the screen
+        const imgElement = document.createElement("img");
+        imgElement.src = imageDataUrl;
+        document.body.appendChild(imgElement); // Add the image to the body or replace this with your desired location
+      };
+      fileReader.readAsDataURL(file);
+
+      uploadFile(file, currentFlowId)
+        .then((res) => res.data)
+        .then((data) => {
+          console.log("File uploaded successfully");
+          // Get the file name from the response
+          const { file_path, flowId } = data;
+          setFilePath(file_path);
+        })
+        .catch(() => {
+          console.error("Error occurred while uploading file");
+        });
+    }
+  };
+
+  const handleButtonClick = (): void => {
+    // Create a file input element
+    const input = document.createElement("input");
+    input.type = "file";
+    input.style.display = "none"; // Hidden from view
+    input.multiple = false; // Allow only one file selection
+    input.onchange = (event: Event): void => {
+      // Get the selected file
+      const file = (event.target as HTMLInputElement).files?.[0];
+      upload(file);
+    };
+    // Trigger the file selection dialog
+    input.click();
+  };
+
+  return (
+    <>
+      <div
+        onDragOver={dragOver}
+        onDragEnter={dragEnter}
+        onDragLeave={dragLeave}
+        onDrop={onDrop}
+        className={
+          "flex h-full w-full items-center justify-between" +
+          (isDragging
+            ? "flex h-28 flex-col items-center justify-center gap-4 text-xs font-light"
+            : "")
+        }
+      >
+        {!isDragging && (
+          <Button variant="primary" onClick={handleButtonClick}>
+            Upload or drop your file
+          </Button>
+        )}
+
+        {isDragging ? (
+          <>
+            <IconComponent name="ArrowUpToLine" className="h-5 w-5 stroke-1" />
+            "Drop your file here"
+          </>
+        ) : image ? (
+          <img
+            className="order-last h-12 w-12 rounded-full object-cover "
+            src={image ?? ""}
+          />
+        ) : (
+          <>
+            <IconComponent name="SunIcon" className="h-8 w-8 stroke-1" />
+          </>
+        )}
+      </div>
+    </>
+  );
 }

src/frontend/src/components/IOview/index.tsx

@@ -67,15 +67,26 @@ export default function IOView(): JSX.Element {
                   <div className="file-component-tab-column">
                     {node && (
                       <IOInputField
-                        field={node.data.node!.template["value"]}
+                        field={
+                          node.data.node!.template["value"] ||
+                          node.data.node!.template["file_path"]["value"]
+                        }
                         inputType={input.type}
-                        updateValue={(e) => {
-                          e.target.value;
-                          if (node) {
-                            let newNode = cloneDeep(node);
-                            newNode.data.node!.template["value"].value =
-                              e.target.value;
-                            setNode(node.id, newNode);
+                        updateValue={(e, type) => {
+                          if (type === "file") {
+                            if (node) {
+                              let newNode = cloneDeep(node);
+                              newNode.data.node!.template["file_path"].value =
+                                e;
+                              setNode(node.id, newNode);
+                            }
+                          } else {
+                            if (node) {
+                              let newNode = cloneDeep(node);
+                              newNode.data.node!.template["value"].value =
+                                e.target.value;
+                              setNode(node.id, newNode);
+                            }
                           }
                         }}
                       />

src/frontend/src/constants/constants.ts

@@ -519,6 +519,8 @@ export const ADMIN_HEADER_DESCRIPTION =
 
 export const BASE_URL_API = "/api/v1/";
 
+export const BACKEND_URL = "http://localhost:7860/";
+
 /**
  * URLs excluded from error retries.
  * @constant

src/frontend/src/controllers/API/index.ts

@@ -865,3 +865,7 @@ export async function postBuildVertex(
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   return await api.post(`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`);
 }
+
+export async function downloadImage({ flowId, fileName }): Promise<any> {
+  return await api.get(`${BASE_URL_API}files/images/${flowId}/${fileName}`);
+}

src/frontend/src/types/components/index.ts

@@ -650,10 +650,10 @@ export type dropdownButtonPropsType = {
 export type IOInputProps = {
   inputType: string;
   field: TemplateVariableType;
-  updateValue: (e: any) => void;
+  updateValue: (e: any, type: string) => void;
 };
 
 export type IOFileInputProps = {
   field: TemplateVariableType;
-  updateValue: (e: any) => void;
+  updateValue: (e: any, type: string) => void;
 };