Added logic to upload flow on drop

src/frontend/src/contexts/tabsContext.tsx

@@ -189,26 +189,28 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function processFlowEdges(flow) {
-    if(!flow.data || !flow.data.edges) return;
+    if (!flow.data || !flow.data.edges) return;
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555555" };
     });
   }
-  function updateDisplay_name(node:NodeType,template:APIClassType) {
-    node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
+  function updateDisplay_name(node: NodeType, template: APIClassType) {
+    node.data.node.display_name = template["display_name"]
+      ? template["display_name"]
+      : node.data.type;
   }
 
   function processFlowNodes(flow) {
-    if(!flow.data || !flow.data.nodes) return;
-    flow.data.nodes.forEach((node:NodeType) => {
+    if (!flow.data || !flow.data.nodes) return;
+    flow.data.nodes.forEach((node: NodeType) => {
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
         return;
       }
       if (Object.keys(template["template"]).length > 0) {
-        updateDisplay_name(node,template);
+        updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
@@ -217,11 +219,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeBaseClasses(node:NodeType,template:APIClassType) {
+  function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
     node.data.node.base_classes = template["base_classes"];
   }
 
-  function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) {
+  function updateNodeEdges(
+    flow: FlowType,
+    node: NodeType,
+    template: APIClassType
+  ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
         edge.sourceHandle = edge.sourceHandle
@@ -233,11 +239,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeDescription(node:NodeType,template:APIClassType) {
+  function updateNodeDescription(node: NodeType, template: APIClassType) {
     node.data.node.description = template["description"];
   }
 
-  function updateNodeTemplate(node:NodeType,template:APIClassType) {
+  function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
       node.data.node.template as APITemplateType
@@ -302,28 +308,39 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * If the file type is application/json, the file is read and parsed into a JSON object.
    * The resulting JSON object is passed to the addFlow function.
    */
-  function uploadFlow(newProject?: boolean) {
-    // create a file input
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".json";
-    // add a change event listener to the file input
-    input.onchange = (e: Event) => {
-      // check if the file type is application/json
-      if ((e.target as HTMLInputElement).files[0].type === "application/json") {
-        // get the file from the file input
-        const file = (e.target as HTMLInputElement).files[0];
-        // read the file as text
-        file.text().then((text) => {
-          // parse the text into a JSON object
-          let flow: FlowType = JSON.parse(text);
+  function uploadFlow(newProject?: boolean, file?: File) {
+    if (file) {
+      file.text().then((text) => {
+        // parse the text into a JSON object
+        let flow: FlowType = JSON.parse(text);
 
-          addFlow(flow, newProject);
-        });
-      }
-    };
-    // trigger the file input click event to open the file dialog
-    input.click();
+        addFlow(flow, newProject);
+      });
+    } else {
+      // create a file input
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      // add a change event listener to the file input
+      input.onchange = (e: Event) => {
+        // check if the file type is application/json
+        if (
+          (e.target as HTMLInputElement).files[0].type === "application/json"
+        ) {
+          // get the file from the file input
+          const currentfile = (e.target as HTMLInputElement).files[0];
+          // read the file as text
+          currentfile.text().then((text) => {
+            // parse the text into a JSON object
+            let flow: FlowType = JSON.parse(text);
+
+            addFlow(flow, newProject);
+          });
+        }
+      };
+      // trigger the file input click event to open the file dialog
+      input.click();
+    }
   }
 
   function uploadFlows() {

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

@@ -37,6 +37,7 @@ const nodeTypes = {
 export default function Page({ flow }: { flow: FlowType }) {
   let {
     updateFlow,
+    uploadFlow,
     disableCopyPaste,
     addFlow,
     getNodeId,
@@ -219,7 +220,6 @@ export default function Page({ flow }: { flow: FlowType }) {
 
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
-    console.log(event.dataTransfer.types);
     if (event.dataTransfer.types.some((t) => t === "nodedata")) {
       event.dataTransfer.dropEffect = "move";
     } else {
@@ -283,7 +283,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         }
         setNodes((nds) => nds.concat(newNode));
       } else if (event.dataTransfer.types.some((t) => t === "Files")) {
-        console.log(event.dataTransfer.files.item(0));
+        uploadFlow(false, event.dataTransfer.files.item(0))
       }
     },
     // Specify dependencies for useCallback

src/frontend/src/types/tabs/index.ts

@@ -14,7 +14,7 @@ export type TabsContextType = {
   downloadFlow: (flow: FlowType) => void;
   downloadFlows: () => void;
   uploadFlows: () => void;
-  uploadFlow: (newFlow?: boolean) => void;
+  uploadFlow: (newFlow?: boolean, file?: File) => void;
   hardReset: () => void;
   //disable CopyPaste
   disableCopyPaste: boolean;