Edited dragOver drop effect on dropping file, printed file dropped over the pane

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -219,62 +219,72 @@ export default function Page({ flow }: { flow: FlowType }) {
 
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
+    console.log(event.dataTransfer.types);
+    if (event.dataTransfer.types.some((t) => t === "nodedata")) {
+      event.dataTransfer.dropEffect = "move";
+    } else {
+      event.dataTransfer.dropEffect = "copy";
+    }
   }, []);
 
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();
-      takeSnapshot();
+      if (event.dataTransfer.types.some((t) => t === "nodedata")) {
+        takeSnapshot();
 
-      // Get the current bounds of the ReactFlow wrapper element
+        // Get the current bounds of the ReactFlow wrapper element
-      const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
+        const reactflowBounds =
+          reactFlowWrapper.current.getBoundingClientRect();
 
-      // Extract the data from the drag event and parse it as a JSON object
+        // Extract the data from the drag event and parse it as a JSON object
-      let data: { type: string; node?: APIClassType } = JSON.parse(
+        let data: { type: string; node?: APIClassType } = JSON.parse(
-        event.dataTransfer.getData("json")
+          event.dataTransfer.getData("nodedata")
-      );
+        );
 
-      // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
+        // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
-      // Calculate the position where the node should be created
+        // Calculate the position where the node should be created
-      const position = reactFlowInstance.project({
+        const position = reactFlowInstance.project({
-        x: event.clientX - reactflowBounds.left,
+          x: event.clientX - reactflowBounds.left,
-        y: event.clientY - reactflowBounds.top,
+          y: event.clientY - reactflowBounds.top,
-      });
+        });
 
-      // Generate a unique node ID
+        // Generate a unique node ID
-      let { type } = data;
+        let { type } = data;
-      let newId = getNodeId(type);
+        let newId = getNodeId(type);
-      let newNode: NodeType;
+        let newNode: NodeType;
 
-      if (data.type !== "groupNode") {
+        if (data.type !== "groupNode") {
-        // Create a new node object
+          // Create a new node object
-        newNode = {
+          newNode = {
-          id: newId,
-          type: "genericNode",
-          position,
-          data: {
-            ...data,
             id: newId,
-            value: null,
+            type: "genericNode",
-          },
+            position,
-        };
+            data: {
-      } else {
+              ...data,
-        // Create a new node object
+              id: newId,
-        newNode = {
+              value: null,
-          id: newId,
+            },
-          type: "genericNode",
+          };
-          position,
+        } else {
-          data: {
+          // Create a new node object
-            ...data,
+          newNode = {
             id: newId,
-            value: null,
+            type: "genericNode",
-          },
+            position,
-        };
+            data: {
+              ...data,
+              id: newId,
+              value: null,
+            },
+          };
 
-        // Add the new node to the list of nodes in state
+          // Add the new node to the list of nodes in state
+        }
+        setNodes((nds) => nds.concat(newNode));
+      } else if (event.dataTransfer.types.some((t) => t === "Files")) {
+        console.log(event.dataTransfer.files.item(0));
       }
-      setNodes((nds) => nds.concat(newNode));
     },
     // Specify dependencies for useCallback
     [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -40,7 +40,7 @@ export default function ExtraSidebar() {
     crt.classList.add("cursor-grabbing");
     document.body.appendChild(crt);
     event.dataTransfer.setDragImage(crt, 0, 0);
-    event.dataTransfer.setData("json", JSON.stringify(data));
+    event.dataTransfer.setData("nodedata", JSON.stringify(data));
   }
 
   function handleSearchInput(e: string) {