From 6182340bcf397f63273bde7a5f2b8e69aec6e162 Mon Sep 17 00:00:00 2001 From: d4nnyp73 Date: Thu, 7 Sep 2023 12:42:15 +0200 Subject: [PATCH 1/2] Added Progressbar during File Upload Added a visual Progressbar underneath the Dropzone to indicate the FileUpload-Progress --- .../pages/file-upload/components/Dropzone.tsx | 73 ++++++++----------- 1 file changed, 32 insertions(+), 41 deletions(-) diff --git a/frontend/src/renderer/pages/file-upload/components/Dropzone.tsx b/frontend/src/renderer/pages/file-upload/components/Dropzone.tsx index 78e245b..bb246d6 100644 --- a/frontend/src/renderer/pages/file-upload/components/Dropzone.tsx +++ b/frontend/src/renderer/pages/file-upload/components/Dropzone.tsx @@ -11,14 +11,17 @@ import { Dropzone } from '@mantine/dropzone'; import { IconCloudUpload, IconX, IconDownload } from '@tabler/icons-react'; import {apiCall} from "../../../utils/api"; import { Notifications } from '@mantine/notifications'; +import { Progress } from '@mantine/core'; +import axios from 'axios'; +import appConfig from '../../../config'; const useStyles = createStyles((theme) => ({ // Styles definition here })); - export function DropzoneButton({ onFilesUploaded }: { onFilesUploaded: (uploadedFiles: File[]) => void }) { + const [uploadProgress, setUploadProgress] = useState(0); const { classes, theme } = useStyles(); const openRef = useRef(); const [selectedFiles, setSelectedFiles] = useState([]); @@ -34,52 +37,38 @@ export function DropzoneButton({ onFilesUploaded }: { onFilesUploaded: (uploaded } }; - const handleFileUpload = () => { +const handleFileUpload = () => { if (selectedFiles.length > 0) { - const formData = new FormData(); - selectedFiles.forEach((file) => { - formData.append('files', file); - }); - setIsLoading(true); - // axios - // .post(`${config.REACT_APP_BACKEND_URL}/files/`, formData, { - // headers: { - // 'Content-Type': 'multipart/form-data', - // }, - // }) - // .then((response) => { - // // Handle API response data - // console.log(response.data); - // window.location.reload(); - // }) - // .catch((error) => { - // // Handle API request error - // console.error(error); - // }); - apiCall('/files', 'POST', formData, { + const formData = new FormData(); + selectedFiles.forEach((file) => { + formData.append('files', file); + }); + setIsLoading(true); + + const config = { + onUploadProgress: function(progressEvent: any) { + const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); + setUploadProgress(percentCompleted); + }, headers: { 'Content-Type': 'multipart/form-data', - }, - }) - .then((response) => { - // Handle API response data - console.log(response.data); - Notifications.show({ - title: 'File Upload Successful', - message: 'The file was successfully uploaded.', - color: 'green' + } + }; + + axios.post(`${appConfig.REACT_APP_BACKEND_URL}/files/`, formData, config) + .then(response => { + console.log(response.data); + window.location.reload(); + setUploadProgress(0); // Reset Progress Bar when done + }) + .catch(error => { + console.error(error); }); - onFilesUploaded(selectedFiles); // Call the callback function to update the state in the parent component - setSelectedFiles([]); - }) - .catch((error) => { - // Handle API request error - console.error(error); - }); - setIsLoading(false); + setIsLoading(false); } - }; +}; + const removeSelectedFile = (fileName: string) => { const newFiles = selectedFiles.filter((file) => file.name !== fileName); @@ -164,6 +153,8 @@ export function DropzoneButton({ onFilesUploaded }: { onFilesUploaded: (uploaded + + {selectedFiles.length > 0 && (