Add upload progress to attachment table (#9371)

src/frontend/src/tables/general/AttachmentTable.tsx

@@ -3,6 +3,8 @@ import { Badge, Group, Paper, Stack, Text } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { notifications } from '@mantine/notifications';
 import {
+  IconCircleCheck,
+  IconExclamationCircle,
   IconExternalLink,
   IconFileUpload,
   IconUpload,
@@ -13,6 +15,7 @@ import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { ActionButton } from '../../components/buttons/ActionButton';
 import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
+import { ProgressBar } from '../../components/items/ProgressBar';
 import { useApi } from '../../contexts/ApiContext';
 import { formatFileSize } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -89,6 +92,21 @@ function attachmentTableColumns(): TableColumn[] {
   ];
 }
 
+function UploadProgress({
+  filename,
+  progress
+}: {
+  filename: string;
+  progress: number;
+}) {
+  return (
+    <Stack gap='xs'>
+      <Text size='sm'>{t`Uploading file ${filename}`}</Text>
+      <ProgressBar value={progress} progressLabel={false} />
+    </Stack>
+  );
+}
+
 /**
  * Construct a table for displaying uploaded attachments
  */
@@ -130,15 +148,42 @@ export function AttachmentTable({
 
       setIsUploading(true);
 
+      const name: string = file.name;
+      const id: string = `attachment-upload-${model_type}-${model_id}-${file.name}`;
+
+      notifications.show({
+        id: id,
+        title: t`Uploading File`,
+        message: <UploadProgress filename={name} progress={0} />,
+        color: 'blue',
+        loading: true,
+        autoClose: false
+      });
+
       api
         .post(url, formData, {
-          timeout: 30 * 1000
+          timeout: 30 * 1000,
+          onUploadProgress: (progressEvent) => {
+            const progress = 100 * (progressEvent?.progress ?? 0);
+            notifications.update({
+              id: id,
+              title: t`Uploading File`,
+              color: 'blue',
+              loading: true,
+              autoClose: false,
+              message: <UploadProgress filename={name} progress={progress} />
+            });
+          }
         })
         .then((response) => {
-          notifications.show({
-            title: t`File uploaded`,
-            message: t`File ${file.name} uploaded successfully`,
-            color: 'green'
+          notifications.update({
+            id: id,
+            title: t`File Uploaded`,
+            message: t`File ${name} uploaded successfully`,
+            color: 'green',
+            autoClose: 3500,
+            icon: <IconCircleCheck />,
+            loading: false
           });
 
           table.refreshTable();
@@ -146,11 +191,15 @@ export function AttachmentTable({
           return response;
         })
         .catch((error) => {
-          console.error('error uploading attachment:', file, '->', error);
-          notifications.show({
+          console.error('Error uploading attachment:', file, '->', error);
+          notifications.update({
+            id: id,
             title: t`Upload Error`,
             message: t`File could not be uploaded`,
-            color: 'red'
+            color: 'red',
+            autoClose: 5000,
+            icon: <IconExclamationCircle />,
+            loading: false
           });
           return error;
         })