Handled API for Multiple file upload

Author: kartikpersistent

.gitignore

@@ -5,7 +5,7 @@ __pycache__/
 
 # C extensions
 *.so
-
+/backend/graph
 # Distribution / packaging
 .Python
 build/

frontend/package.json

@@ -22,6 +22,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@types/node": "^20.11.10",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

frontend/src/components/DropZone.tsx

@@ -22,59 +22,69 @@ export default function DropZone() {
   const [isBackendConnected, setIsBackendConnected] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
 
-  const fileUpload = async (file: File, uid: string) => {
-    try {
-      setIsLoading(true);
-      setFilesdata((prevfiles) =>
-        prevfiles.map((curfile) => {
-          if (curfile.id == uid) {
-            return {
-              ...curfile,
-              status: 'Processing',
-            };
-          } else {
-            return curfile;
-          }
-        })
-      );
-
-      const apiResponse = await uploadAPI(file, userCredentials);
-
-      if (apiResponse.data != 'Failure') {
+  const fileUpload = async (file: File, uid: number) => {
+    if (filesdata[uid].status == 'None') {
+      const apirequests = [];
+      try {
+        setIsLoading(true);
         setFilesdata((prevfiles) =>
-          prevfiles.map((curfile) => {
-            if (curfile.id == uid) {
+          prevfiles.map((curfile, idx) => {
+            if (idx == uid) {
               return {
                 ...curfile,
-                processing: apiResponse?.data.processingTime.toFixed(2),
-                status: apiResponse?.data?.status,
-                NodesCount: apiResponse?.data?.nodeCount,
-                relationshipCount: apiResponse?.data?.relationshipCount,
+                status: 'Processing',
               };
             } else {
               return curfile;
             }
           })
         );
+        const apiResponse = await uploadAPI(file, userCredentials);
+        apirequests.push(apiResponse);
+        Promise.allSettled(apirequests)
+          .then((r) => {
+            r.forEach((apiRes) => {
+              if (apiRes.status === 'fulfilled' && apiRes.value) {
+                if (apiRes?.value?.data != 'Unexpected Error') {
+                  setFilesdata((prevfiles) =>
+                    prevfiles.map((curfile, idx) => {
+                      if (idx == uid) {
+                        return {
+                          ...curfile,
+                          processing: apiRes?.value?.data?.processingTime?.toFixed(2),
+                          status: apiRes?.value?.data?.status,
+                          NodesCount: apiRes?.value?.data?.nodeCount,
+                          relationshipCount: apiRes?.value?.data?.relationshipCount,
+                        };
+                      } else {
+                        return curfile;
+                      }
+                    })
+                  );
+                  setIsLoading(false);
+                } else {
+                  throw new Error('API Failure');
+                }
+              }
+            });
+          })
+          .catch((err) => console.log(err));
+      } catch (err) {
+        console.log(err);
         setIsLoading(false);
-      } else {
-        throw new Error('API Failure');
+        setFilesdata((prevfiles) =>
+          prevfiles.map((curfile, idx) => {
+            if (idx == uid) {
+              return {
+                ...curfile,
+                status: 'Failed',
+              };
+            } else {
+              return curfile;
+            }
+          })
+        );
       }
-    } catch (err) {
-      console.log(err);
-      setIsLoading(false);
-      setFilesdata((prevfiles) =>
-        prevfiles.map((curfile) => {
-          if (curfile.id == uid) {
-            return {
-              ...curfile,
-              status: 'Failed',
-            };
-          } else {
-            return curfile;
-          }
-        })
-      );
     }
   };
 
@@ -92,7 +102,9 @@ export default function DropZone() {
 
   useEffect(() => {
     if (files.length > 0) {
-      fileUpload(files[files.length - 1], filesdata[filesdata.length - 1].id);
+      for (let i = 0; i < files.length; i++) {
+        fileUpload(files[i], i);
+      }
     }
   }, [files]);
 

frontend/src/components/FileTable.tsx

@@ -1,7 +1,6 @@
 import { DataGrid } from '@neo4j-ndl/react';
 import { useState, useEffect } from 'react';
 import { useReactTable, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
-import { formatFileSize } from '../utils/utils';
 
 interface CustomFile extends Partial<globalThis.File> {
   processing: string;
@@ -21,7 +20,7 @@ export default function FileTable({ files }: { files: CustomFile[] | [] }) {
     }),
     columnHelper.accessor((row) => row.size, {
       id: 'fileSize',
-      cell: (info) => <i>{formatFileSize(info.getValue())}</i>,
+      cell: (info) => <i>{info.getValue()}kb</i>,
       header: () => <span>File Size</span>,
       footer: (info) => info.column.id,
     }),

frontend/src/services/HealthStatus.ts

@@ -1,13 +1,13 @@
 import axios from 'axios';
 import { url } from '../utils/utils';
 const healthStatus = async () => {
-  try {
-    const healthUrl = `${url()}health`;
-    const response = await axios.get(healthUrl);
-    return response;
-  } catch (error) {
-    console.log('API status error', error);
-    throw error;
-  }
-};
-export { healthStatus };
+    try {
+        const healthUrl = `${url()}/health`
+        const response = await axios.get(healthUrl);
+        return response
+    } catch (error) {
+        console.log("API status error", error)
+        throw error
+    }
+}
+export {healthStatus}

frontend/src/services/Upload.ts

@@ -5,13 +5,11 @@ const uploadAPI = async (file: any, userCredentials: any) => {
   console.log('check URL', url());
   try {
     const formData = new FormData();
-
     formData.append('file', file);
     formData.append('uri', userCredentials?.uri);
     formData.append('userName', userCredentials?.userName);
     formData.append('password', userCredentials?.password);
-
-    const response = await axios.post(`${url()}extract`, formData, {
+    const response = await axios.post(`${url()}/extract`, formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
       },

frontend/src/utils/utils.ts

@@ -2,11 +2,6 @@ export const url = () => {
   if (process.env.BACKEND_API_URL !== undefined) {
     return process.env.BACKEND_API_URL;
   }
-
-  const origin = window.location.origin.split('-');
-  origin[origin.length - 1] = '8000';
-  const finalURL = `${origin.join('-')}.app.github.dev`;
-  return finalURL;
 };
 
 export const formatFileSize = (bytes: any) => {

frontend/yarn.lock

@@ -1892,6 +1892,13 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/node@^20.11.10":
+  version "20.11.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.10.tgz#6c3de8974d65c362f82ee29db6b5adf4205462f9"
+  integrity sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
@@ -1942,7 +1949,7 @@
 
 "@types/uuid@^9.0.7":
   version "9.0.7"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.7.tgz#b14cebc75455eeeb160d5fe23c2fcc0c64f724d8"
+  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz"
   integrity sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==
 
 "@typescript-eslint/eslint-plugin@^6.0.0":
@@ -4524,6 +4531,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 update-browserslist-db@^1.0.13:
   version "1.0.13"
   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz"
@@ -4566,12 +4578,12 @@ usehooks-ts@2.9.1:
 
 uuid@^9.0.1:
   version "9.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
 vite@^4.4.5:
   version "4.5.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz"
   integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
   dependencies:
     esbuild "^0.18.10"