diff --git a/src/frontend/src/tables/general/AttachmentTable.tsx b/src/frontend/src/tables/general/AttachmentTable.tsx
index 21aa0916ad..4902c1e8ed 100644
--- a/src/frontend/src/tables/general/AttachmentTable.tsx
+++ b/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 (
+
+ {t`Uploading file ${filename}`}
+
+
+ );
+}
+
/**
* 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: ,
+ 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:
+ });
+ }
})
.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: ,
+ 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: ,
+ loading: false
});
return error;
})