large file upload changes

Author: kartikpersistent

frontend/src/components/DropZone.tsx

@@ -1,15 +1,16 @@
+import axios from 'axios';
 import { Dropzone, Flex, Typography } from '@neo4j-ndl/react';
 import React, { useState, useEffect, FunctionComponent } from 'react';
 import Loader from '../utils/Loader';
 import { v4 as uuidv4 } from 'uuid';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import CustomAlert from './Alert';
-import { CustomFile, CustomFileBase, UserCredentials, alertStateType } from '../types';
+import { CustomFile, CustomFileBase, UploadResponse, alertStateType } from '../types';
 import { buttonCaptions, chunkSize } from '../utils/Constants';
+import { url } from '../utils/Utils';
 import { InformationCircleIconOutline } from '@neo4j-ndl/react/icons';
 import IconButtonWithToolTip from './IconButtonToolTip';
-import { uploadAPI } from '../utils/FileAPI';
 
 const DropZone: FunctionComponent = () => {
   const { filesData, setFilesData, model } = useFileContext();
@@ -50,7 +51,6 @@ const DropZone: FunctionComponent = () => {
             type: `${file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length).toUpperCase()}`,
             size: file.size,
             uploadprogess: file.size && file?.size < chunkSize ? 100 : 0,
-            // total_pages: 0,
             id: uuidv4(),
             ...defaultValues,
           });
@@ -121,11 +121,14 @@ const DropZone: FunctionComponent = () => {
           })
         );
         try {
-          const apiResponse=await uploadAPI(chunk,userCredentials as UserCredentials,model,chunkNumber,totalChunks,file.name)
+          const apiResponse = await axios.post<UploadResponse>(`${url()}/upload`, formData, {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          });
+
           if (apiResponse?.data.status === 'Failed') {
-            throw new Error(
-              JSON.stringify({ message: apiResponse.data.message, fileName: apiResponse.data.file_name })
-            );
+            throw new Error(`message:${apiResponse.data.message},fileName:${apiResponse.data.file_name}`);
           } else {
             if (apiResponse.data.data) {
               setFilesData((prevfiles) =>
@@ -134,7 +137,6 @@ const DropZone: FunctionComponent = () => {
                     return {
                       ...curfile,
                       uploadprogess: chunkNumber * chunkProgressIncrement,
-                      // total_pages: apiResponse.data.data.total_pages,
                     };
                   }
                   return curfile;
@@ -162,35 +164,24 @@ const DropZone: FunctionComponent = () => {
             uploadNextChunk();
           }
         } catch (error) {
-          if (error instanceof Error) {
-            setIsLoading(false);
-            if (error.name === 'AxiosError') {
-              setalertDetails({
-                showAlert: true,
-                alertType: 'error',
-                alertMessage: error.message,
-              });
-            } else {
-              const parsedError = JSON.parse(error.message);
-              setalertDetails({
-                showAlert: true,
-                alertType: 'error',
-                alertMessage: parsedError.message,
-              });
-            }
-            setFilesData((prevfiles) =>
-              prevfiles.map((curfile) => {
-                if (curfile.name == file.name) {
-                  return {
-                    ...curfile,
-                    status: 'Failed',
-                    type: `${file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length).toUpperCase()}`,
-                  };
-                }
-                return curfile;
-              })
-            );
-          }
+          setIsLoading(false);
+          setalertDetails({
+            showAlert: true,
+            alertType: 'error',
+            alertMessage: 'Error  Occurred',
+          });
+          setFilesData((prevfiles) =>
+            prevfiles.map((curfile) => {
+              if (curfile.name == file.name) {
+                return {
+                  ...curfile,
+                  status: 'Failed',
+                  type: `${file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length).toUpperCase()}`,
+                };
+              }
+              return curfile;
+            })
+          );
         }
       } else {
         setFilesData((prevfiles) =>
@@ -287,4 +278,4 @@ const DropZone: FunctionComponent = () => {
   );
 };
 
-export default DropZone;
+export default DropZone;