diff --git a/src/components/pages/upload/File/index.tsx b/src/components/pages/upload/File/index.tsx index 0315281a..f13650e6 100644 --- a/src/components/pages/upload/File/index.tsx +++ b/src/components/pages/upload/File/index.tsx @@ -14,22 +14,44 @@ import { import { Dropzone } from '@mantine/dropzone'; import { useClipboard } from '@mantine/hooks'; import { useModals } from '@mantine/modals'; -import { IconFiles, IconPhoto, IconUpload, IconX } from '@tabler/icons-react'; +import { IconDeviceSdCard, IconFiles, IconPhoto, IconUpload, IconX } from '@tabler/icons-react'; import Link from 'next/link'; import { useState } from 'react'; import { uploadFiles } from '../uploadFiles'; import ToUploadFile from './ToUploadFile'; +import { useConfig } from '@/components/ConfigProvider'; +import bytes from 'bytes'; +import { notifications } from '@mantine/notifications'; export default function UploadFile() { const theme = useMantineTheme(); const modals = useModals(); const clipboard = useClipboard(); + const config = useConfig(); const [files, setFiles] = useState([]); const [progress, setProgress] = useState(0); const [dropLoading, setLoading] = useState(false); + const aggregateSize = () => files.reduce((acc, file) => acc + file.size, 0); + const upload = () => { + const size = aggregateSize(); + if (size > config.files.maxFileSize) { + notifications.show({ + title: 'Upload may fail', + color: 'red', + icon: , + message: ( + <> + The upload may fail because the total size of the files you are trying to upload is{' '} + {bytes(size, { unitSeparator: ' ' })}, which is larger than the limit of{' '} + {bytes(config.files.maxFileSize, { unitSeparator: ' ' })} + + ), + }); + } + uploadFiles(files, { setFiles, setLoading, @@ -78,6 +100,9 @@ export default function UploadFile() { Attach as many files as you like, they will show up below to review before uploading. + + {bytes(config.files.maxFileSize, { unitSeparator: ' ' })} limit per file + @@ -103,7 +128,7 @@ export default function UploadFile() { size='xl' onClick={upload} > - Upload {files.length} files + Upload {files.length} files ({bytes(aggregateSize(), { unitSeparator: ' ' })}) );