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; })