File upload: alert when a file could not be added for upload

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"
   }
 }

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<File[]>([])
   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) }))
     }
   }
 

src/sections/upload-dataset-files/UploadDatasetFiles.tsx

@@ -15,18 +15,33 @@ 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()
   const { t } = useTranslation('uploadDatasetFiles')
   const [fileUploaderState, setState] = useState(FileUploadTools.createNewState([]))
   const [uploadingToCancelMap, setUploadingToCancelMap] = useState(new Map<string, () => void>())
   const navigate = useNavigate()
+  const [alerts, setAlerts] = useState<FileUploadAlert[]>([])
+  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')}
           />
           <article>
+            {alerts.map((alert) => (
+              <Alert variant={alert.variant} key={alert.key}>
+                {alert.message}
+              </Alert>
+            ))}
             <Stack direction="vertical" gap={3}>
               <FileUploader
                 upload={upload}
@@ -180,6 +200,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
                 fileUploaderState={fileUploaderState}
                 cancelUpload={cancelUpload}
                 cleanFileState={cleanFileState}
+                addAlert={addAlert}
               />
               <UploadedFiles
                 fileUploadState={fileUploaderState.uploaded}