fix: pasting files not working (langflow-ai#2548)

* fix: pasting files not working * [autofix.ci] apply automated fixes * refactor: change new import --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: cristhianzl <[email protected]> Co-authored-by: anovazzi1 <[email protected]>
datastax · Jul 5, 2024 · 6f827ca · 6f827ca
1 parent 6488b02
commit 6f827ca
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -47,7 +47,7 @@ export default function InputFileComponent({
     setMyValue(value);
   }, [value]);
 
-  const mutation = usePostUploadFile();
+  const { mutate } = usePostUploadFile();
 
   const handleButtonClick = (): void => {
     // Create a file input element
@@ -66,7 +66,7 @@ export default function InputFileComponent({
       // Check if the file type is correct
       if (file && checkFileType(file.name)) {
         // Upload the file
-        mutation.mutate(
+        mutate(
           { file, id: currentFlowId },
           {
             onSuccess: (data) => {

diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx
@@ -67,7 +67,7 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
     setIsDragging(false);
   };
 
-  const mutation = usePostUploadFile();
+  const { mutate } = usePostUploadFile();
 
   const upload = async (file) => {
     if (file) {
@@ -83,7 +83,7 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
         document.body.appendChild(imgElement); // Add the image to the body or replace this with your desired location
       };
       fileReader.readAsDataURL(file);
-      mutation.mutate(
+      mutate(
         { file, id: currentFlowId },
         {
           onSuccess: (data) => {

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -1,6 +1,6 @@
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import useAlertStore from "@/stores/alertStore";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
   ALLOWED_IMAGE_INPUT_EXTENSIONS,
@@ -9,7 +9,6 @@ import {
   FS_ERROR_TEXT,
   SN_ERROR_TEXT,
 } from "../../../../../constants/constants";
-import { uploadFile } from "../../../../../controllers/API";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 import {
   ChatInputType,
@@ -22,7 +21,7 @@ import UploadFileButton from "./components/uploadFileButton";
 import { getClassNamesFilePreview } from "./helpers/get-class-file-preview";
 import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area";
 import useFocusOnUnlock from "./hooks/use-focus-unlock";
-export default function ChatInput({
+export default function ChattInput({
   lockChat,
   chatValue,
   sendMessage,
@@ -39,16 +38,33 @@ export default function ChatInput({
   const [inputFocus, setInputFocus] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const [id, setId] = useState<string>("");
 
   useFocusOnUnlock(lockChat, inputRef);
   useAutoResizeTextArea(chatValue, inputRef);
 
+  const { mutate, isPending } = usePostUploadFile();
+
   const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement> | ClipboardEvent,
   ) => {
-    const fileInput = event.target;
-    const file = fileInput.files?.[0];
+    let file: File | null = null;
+
+    if ("clipboardData" in event) {
+      const items = event.clipboardData?.items;
+      if (items) {
+        for (let i = 0; i < items.length; i++) {
+          const blob = items[i].getAsFile();
+          if (blob) {
+            file = blob;
+            break;
+          }
+        }
+      }
+    } else {
+      const fileInput = event.target as HTMLInputElement;
+      file = fileInput.files?.[0] ?? null;
+    }
+
     if (file) {
       const fileExtension = file.name.split(".").pop()?.toLowerCase();
 
@@ -65,18 +81,16 @@ export default function ChatInput({
 
       const uid = new ShortUniqueId();
       const id = uid.randomUUID(10);
-      setId(id);
 
       const type = file.type.split("/")[0];
-      const blob = file;
 
       setFiles((prevFiles) => [
         ...prevFiles,
-        { file: blob, loading: true, error: false, id, type },
+        { file, loading: true, error: false, id, type },
       ]);
 
-      mutation.mutate(
-        { file: blob, id: currentFlowId },
+      mutate(
+        { file, id: currentFlowId },
         {
           onSuccess: (data) => {
             setFiles((prev) => {
@@ -100,10 +114,17 @@ export default function ChatInput({
       );
     }
 
-    fileInput.value = "";
+    if ("target" in event && event.target instanceof HTMLInputElement) {
+      event.target.value = "";
+    }
   };
 
-  const mutation = usePostUploadFile();
+  useEffect(() => {
+    document.addEventListener("paste", handleFileChange);
+    return () => {
+      document.removeEventListener("paste", handleFileChange);
+    };
+  }, [handleFileChange, currentFlowId, lockChat]);
 
   const send = () => {
     sendMessage({

diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -165,6 +165,8 @@ export default function ChatView({
     setIsDragging(false);
   };
 
+  const { mutate } = usePostUploadFile();
+
   const handleFiles = (files, setFiles, currentFlowId, setErrorData) => {
     if (files) {
       const file = files?.[0];
@@ -192,7 +194,7 @@ export default function ChatView({
         { file: blob, loading: true, error: false, id, type },
       ]);
 
-      mutation.mutate(
+      mutate(
         { file: blob, id: currentFlowId },
         {
           onSuccess: (data) => {
@@ -218,8 +220,6 @@ export default function ChatView({
     }
   };
 
-  const mutation = usePostUploadFile();
-
   return (
     <div
       className="eraser-column-arrangement"