diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json index 7e4e8d558..a0a0e5f92 100644 --- a/public/locales/en/uploadDatasetFiles.json +++ b/public/locales/en/uploadDatasetFiles.json @@ -60,5 +60,8 @@ "selectTags": "Select tags to add", "saveChanges": "Save Changes", "cancelChanges": "Cancel Changes" + }, + "alerts": { + "fileNameNotUnique": "File {{name}} was already added and is ignored" } } diff --git a/src/sections/upload-dataset-files/FileUploader.tsx b/src/sections/upload-dataset-files/FileUploader.tsx index 99846397a..b6e0c922a 100644 --- a/src/sections/upload-dataset-files/FileUploader.tsx +++ b/src/sections/upload-dataset-files/FileUploader.tsx @@ -4,6 +4,8 @@ import { ChangeEventHandler, DragEventHandler, useEffect, useRef, useState } fro import { Plus, X } from 'react-bootstrap-icons' import { FileUploadTools, FileUploaderState } from '../../files/domain/models/FileUploadState' import styles from './FileUploader.module.scss' +import { AlertVariant } from '@iqss/dataverse-design-system/src/lib/components/alert/AlertVariant' +import { useTranslation } from 'react-i18next' export interface FileUploaderProps { upload: (file: File) => void @@ -13,6 +15,7 @@ export interface FileUploaderProps { fileUploaderState: FileUploaderState cancelUpload: (file: File) => void cleanFileState: (file: File) => void + addAlert: (variant: AlertVariant, message: string) => void } export function FileUploader({ @@ -22,11 +25,13 @@ export function FileUploader({ selectText, fileUploaderState, cancelUpload, - cleanFileState + cleanFileState, + addAlert }: FileUploaderProps) { const theme = useTheme() const [files, setFiles] = useState([]) const [bgColor, setBackgroundColor] = useState(theme.color.primaryTextColor) + const { t } = useTranslation('uploadDatasetFiles') const addFiles = (selectedFiles: FileList | null) => { if (selectedFiles && selectedFiles.length > 0) { @@ -38,6 +43,8 @@ export function FileUploader({ if (!files.some((x) => FileUploadTools.key(x) === FileUploadTools.key(file))) { setFiles((oldFiles) => [...oldFiles, file]) upload(file) + } else { + addAlert('danger', t('alerts.fileNameNotUnique', { name: FileUploadTools.key(file) })) } } diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx index 6846a8a1c..e4665284b 100644 --- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx +++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx @@ -15,11 +15,19 @@ import { UploadedFiles } from './uploaded-files-list/UploadedFiles' import { addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles' import { Route } from '../Route.enum' import { Stack } from '@iqss/dataverse-design-system' +import { Alert } from '@iqss/dataverse-design-system' +import { AlertVariant } from '@iqss/dataverse-design-system/src/lib/components/alert/AlertVariant' interface UploadDatasetFilesProps { fileRepository: FileRepository } +interface FileUploadAlert { + key: string + variant: AlertVariant + message: string +} + export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDatasetFilesProps) => { const { setIsLoading } = useLoading() const { dataset, isLoading } = useDataset() @@ -27,6 +35,13 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat const [fileUploaderState, setState] = useState(FileUploadTools.createNewState([])) const [uploadingToCancelMap, setUploadingToCancelMap] = useState(new Map void>()) const navigate = useNavigate() + const [alerts, setAlerts] = useState([]) + let i = 0 + const addAlert = (variant: AlertVariant, message: string) => + setAlerts((current) => [ + ...current, + { key: (i++).toString(), variant: variant, message: message } + ]) const limit = 6 const semaphore = new Semaphore(limit) @@ -171,6 +186,11 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat actionItemText={t('breadcrumbActionItem')} />
+ {alerts.map((alert) => ( + + {alert.message} + + ))}