Added logic to upload flow on drop

src/frontend/src/contexts/tabsContext.tsx

@@ -196,7 +196,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
   function updateDisplay_name(node: NodeType, template: APIClassType) {
-    node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
+    node.data.node.display_name = template["display_name"]
+      ? template["display_name"]
+      : node.data.type;
   }
 
   function processFlowNodes(flow) {
@@ -221,7 +223,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     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
@@ -302,7 +308,15 @@ 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) {
+  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);
+      });
+    } else {
       // create a file input
       const input = document.createElement("input");
       input.type = "file";
@@ -310,11 +324,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       // 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") {
+        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];
+          const currentfile = (e.target as HTMLInputElement).files[0];
           // read the file as text
-        file.text().then((text) => {
+          currentfile.text().then((text) => {
             // parse the text into a JSON object
             let flow: FlowType = JSON.parse(text);
 
@@ -325,6 +341,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       // trigger the file input click event to open the file dialog
       input.click();
     }
+  }
 
   function uploadFlows() {
     // create a file input

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;