feat: add progress indicator for uploading files

frontend/src/components/navBar/NavBar.tsx

@@ -152,14 +152,12 @@ const NavBar = () => {
   const { classes, cx } = useStyles();
   const items = (
     <>
-      {(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
+      {(user ? authenticatedLinks : unauthenticatedLinks).map((link, i) => {
         if (link.component) {
           return (
-            <>
-              <Box pl={5} py={15}>
-                {link.component}
-              </Box>
-            </>
+            <Box pl={5} py={15} key={i}>
+              {link.component}
+            </Box>
           );
         }
         return (

frontend/src/components/upload/Dropzone.tsx

@@ -1,15 +1,9 @@
-import {
-  Button,
-  Center,
-  createStyles,
-  Group,
-  Text,
-  useMantineTheme,
-} from "@mantine/core";
+import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
 import getConfig from "next/config";
 import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { CloudUpload, Upload } from "tabler-icons-react";
+import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import toast from "../../utils/toast.util";
 
@@ -44,9 +38,8 @@ const Dropzone = ({
   setFiles,
 }: {
   isUploading: boolean;
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
-  const theme = useMantineTheme();
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
   return (
@@ -62,7 +55,11 @@ const Dropzone = ({
           if (files.length > 100) {
             toast.error("You can't upload more than 100 files per share.");
           } else {
-            setFiles(files);
+            const newFiles = files.map((file) => {
+              (file as FileUpload).uploadingProgress = 0;
+              return file as FileUpload;
+            });
+            setFiles(newFiles);
           }
         }}
         className={classes.dropzone}

frontend/src/components/upload/FileList.tsx

@@ -1,8 +1,9 @@
-import { ActionIcon, Loader, Table } from "@mantine/core";
+import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
-import { CircleCheck, Trash } from "tabler-icons-react";
+import { Trash } from "tabler-icons-react";
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+import UploadProgressIndicator from "./UploadProgressIndicator";
 
 const FileList = ({
   files,
@@ -15,19 +16,12 @@ const FileList = ({
     files.splice(index, 1);
     setFiles([...files]);
   };
-
   const rows = files.map((file, i) => (
     <tr key={i}>
       <td>{file.name}</td>
       <td>{byteStringToHumanSizeString(file.size.toString())}</td>
       <td>
-        {file.uploadingState ? (
-          file.uploadingState != "finished" ? (
-            <Loader size={22} />
-          ) : (
-            <CircleCheck color="green" size={22} />
-          )
-        ) : (
+        {file.uploadingProgress == 0 ? (
           <ActionIcon
             color="red"
             variant="light"
@@ -36,6 +30,8 @@ const FileList = ({
           >
             <Trash />
           </ActionIcon>
+        ) : (
+          <UploadProgressIndicator progress={file.uploadingProgress} />
         )}
       </td>
     </tr>

frontend/src/components/upload/UploadProgressIndicator.tsx

@@ -0,0 +1,20 @@
+import { RingProgress } from "@mantine/core";
+import { CircleCheck, CircleX } from "tabler-icons-react";
+
+const UploadProgressIndicator = ({ progress }: { progress: number }) => {
+  if (progress > 0 && progress < 100) {
+    return (
+      <RingProgress
+        sections={[{ value: progress, color: "victoria" }]}
+        thickness={3}
+        size={25}
+      />
+    );
+  } else if (progress == 100) {
+    return <CircleCheck color="green" size={22} />;
+  } else {
+    return <CircleX color="red" size={22} />;
+  }
+};
+
+export default UploadProgressIndicator;

frontend/src/pages/upload.tsx

@@ -28,39 +28,47 @@ const Upload = () => {
     security: ShareSecurity
   ) => {
     setisUploading(true);
-
     try {
-      files.forEach((file) => {
-        file.uploadingState = "inProgress";
-      });
-      setFiles([...files]);
+      setFiles((files) =>
+        files.map((file) => {
+          file.uploadingProgress = 1;
+          return file;
+        })
+      );
       const share = await shareService.create(id, expiration, security);
       for (let i = 0; i < files.length; i++) {
-        await shareService.uploadFile(share.id, files[i]);
+        const progressCallBack = (bytesProgress: number) => {
+          setFiles((files) => {
+            return files.map((file, callbackIndex) => {
+              if (i == callbackIndex) {
+                file.uploadingProgress = Math.round(
+                  (100 * bytesProgress) / files[i].size
+                );
+              }
+              return file;
+            });
+          });
+        };
 
-        files[i].uploadingState = "finished";
-        setFiles([...files]);
-        if (!files.some((f) => f.uploadingState == "inProgress")) {
+        try {
+          await shareService.uploadFile(share.id, files[i], progressCallBack);
+        } catch {
+          files[i].uploadingProgress = -1;
+        }
+
+        if (!files.some((f) => f.uploadingProgress != 100)) {
           await shareService.completeShare(share.id);
           setisUploading(false);
-          showCompletedUploadModal(
-            modals,
-
-            share
-          );
+          showCompletedUploadModal(modals, share);
           setFiles([]);
         }
       }
     } catch (e) {
-      files.forEach((file) => {
-        file.uploadingState = undefined;
-      });
       if (axios.isAxiosError(e)) {
         toast.error(e.response?.data?.message ?? "An unkown error occured.");
       } else {
         toast.error("An unkown error occured.");
       }
-      setFiles([...files]);
       setisUploading(false);
     }
   };

frontend/src/services/share.service.ts

@@ -68,10 +68,20 @@ const downloadFile = async (shareId: string, fileId: string) => {
   window.location.href = await getFileDownloadUrl(shareId, fileId);
 };
 
-const uploadFile = async (shareId: string, file: File) => {
+const uploadFile = async (
+  shareId: string,
+  file: File,
+  progressCallBack: (uploadingProgress: number) => void
+) => {
   var formData = new FormData();
   formData.append("file", file);
-  return (await api.post(`shares/${shareId}/files`, formData)).data;
+
+  return (
+    await api.post(`shares/${shareId}/files`, formData, {
+      onUploadProgress: (progressEvent) =>
+        progressCallBack(progressEvent.loaded),
+    })
+  ).data;
 };
 
 export default {

frontend/src/types/File.type.ts

@@ -1,2 +1 @@
-export type FileUpload = File & { uploadingState?: UploadState };
-export type UploadState = "finished" | "inProgress" | undefined;
+export type FileUpload = File & { uploadingProgress: number };