From c2e1e2ef0623265bff6dafcde3735cb97f2c5734 Mon Sep 17 00:00:00 2001 From: mkoushan Date: Tue, 19 Nov 2024 21:57:57 +0330 Subject: [PATCH] Add batch upload script to ui - Closes #341 --- ui/src/pages/Documents/Upload.js | 68 +++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 22 deletions(-) diff --git a/ui/src/pages/Documents/Upload.js b/ui/src/pages/Documents/Upload.js index e768f8c8..f129abda 100644 --- a/ui/src/pages/Documents/Upload.js +++ b/ui/src/pages/Documents/Upload.js @@ -1,11 +1,27 @@ -import { useMemo, useState } from 'react'; -import { useDropzone } from 'react-dropzone'; -import Spinner from 'react-bootstrap/Spinner'; +import { useMemo, useState } from "react"; +import { useDropzone } from "react-dropzone"; +import Spinner from "react-bootstrap/Spinner"; import { toast } from "react-toastify"; import apiservice from "../../services/api.service"; import styles from "./Documents.module.scss"; +async function uploadFilesInBatches(files, uploadFolder, batchSize = 100) { + const totalFiles = files.length; + let uploadedCount = 0; + + while (uploadedCount < totalFiles) { + const batch = files.slice(uploadedCount, uploadedCount + batchSize); + try { + await apiservice.upload(uploadFolder, batch); + uploadedCount += batchSize; + } catch (e) { + console.error("Batch upload error:", e); + throw e; + } + } +} + export default function StyledDropzone(props) { const [uploading, setUploading] = useState(false); const uploadFolder = props.uploadFolder; @@ -14,41 +30,49 @@ export default function StyledDropzone(props) { try { setUploading(true); // TODO: add loading and error handling - await apiservice.upload(uploadFolder, acceptedFiles) + await uploadFilesInBatches(acceptedFiles, uploadFolder); // await delay(100) props.filesUploaded(); } catch (e) { - toast.error('upload error' + e.toString()) - } - finally{ + toast.error("upload error" + e.toString()); + } finally { setUploading(false); } - } + }; const { getRootProps, getInputProps, isDragActive, isDragAccept, - isDragReject - } = useDropzone({ accept: 'application/pdf, application/zip, application/epub+zip', onDropAccepted: onDrop }); + isDragReject, + } = useDropzone({ + accept: "application/pdf, application/zip, application/epub+zip", + onDropAccepted: onDrop, + maxSize: 1 * 1024 * 1024 * 1024, // 1GB + }); const className = useMemo(() => { - return `${styles.upload} - ${isDragActive ? styles.uploadActive : ''} - ${isDragAccept ? styles.uploadAccept : ''} - ${isDragReject ? styles.uploadReject : ''}` - }, [isDragActive, isDragReject, isDragAccept]) + return `${styles.upload} + ${isDragActive ? styles.uploadActive : ""} + ${isDragAccept ? styles.uploadAccept : ""} + ${isDragReject ? styles.uploadReject : ""}`; + }, [isDragActive, isDragReject, isDragAccept]); - const hint = "Drag 'n' drop some files here, or click to select files to upload" + const hint = + "Drag 'n' drop some files here, or click to select files to upload"; if (!uploading) { return ( -
- -

{ hint}

-
- ) +
+ +

{hint}

+
+ ); } else { - return
+ return ( +
+ +
+ ); } }