Feature/417 File upload integration

cypress.config.ts

@@ -15,7 +15,8 @@ export default defineConfig({
     supportFile: 'tests/support/e2e.ts',
     setupNodeEvents(on) {
       on('file:preprocessor', vitePreprocessor(path.resolve(__dirname, './vite.config.ts')))
-    }
+    },
+    defaultCommandTimeout: 10_000 // https://docs.cypress.io/guides/references/configuration#Timeouts
   },
   component: {
     indexHtmlFile: 'tests/support/component-index.html',

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr169.aa49f06",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr187.f29c0e6",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -44,7 +44,9 @@
     "typescript": "4.9.5",
     "use-deep-compare": "1.2.1",
     "vite-plugin-istanbul": "4.0.1",
-    "web-vitals": "2.1.4"
+    "web-vitals": "2.1.4",
+    "js-md5": "0.8.3",
+    "async-mutex": "0.5.0"
   },
   "scripts": {
     "start": "vite --base=/spa",

src/files/domain/models/FileUploadState.ts

@@ -1,4 +1,6 @@
+import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
 import { FileSize, FileSizeUnit } from './FileMetadata'
+import { UploadedFileDTOMapper } from '../../infrastructure/mappers/UploadedFileDTOMapper'
 
 export interface FileUploadState {
   progress: number
@@ -17,6 +19,7 @@ export interface FileUploadState {
   description?: string
   tags: string[]
   restricted: boolean
+  checksumValue?: string
 }
 
 export interface FileUploaderState {
@@ -94,6 +97,18 @@ export class FileUploadTools {
     return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
+  static checksum(
+    file: File,
+    checksumValue: string,
+    oldState: FileUploaderState
+  ): FileUploaderState {
+    const fileUploadState = oldState.state.get(this.key(file))
+    if (fileUploadState) {
+      fileUploadState.checksumValue = checksumValue
+    }
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
+  }
+
   static failed(file: File, oldState: FileUploaderState): FileUploaderState {
     const fileUploadState = oldState.state.get(this.key(file))
     if (fileUploadState) {
@@ -127,6 +142,21 @@ export class FileUploadTools {
     return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
+  static mapToUploadedFilesDTOs(state: FileUploadState[]): UploadedFileDTO[] {
+    return state.map((uploadedFile) =>
+      UploadedFileDTOMapper.toUploadedFileDTO(
+        uploadedFile.fileName,
+        uploadedFile.description,
+        uploadedFile.fileDir,
+        uploadedFile.tags,
+        uploadedFile.restricted,
+        uploadedFile.storageId as string,
+        uploadedFile.checksumValue as string,
+        uploadedFile.fileType === '' ? 'application/octet-stream' : uploadedFile.fileType // some browsers (e.g., chromium for .java files) fail to detect the mime type for some files and leave the fileType as an empty string, we use the default value 'application/octet-stream' in that case
+      )
+    )
+  }
+
   private static toNewState(
     file: File,
     oldState: FileUploaderState

src/files/domain/repositories/FileRepository.ts

@@ -7,7 +7,7 @@ import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { FilePreview } from '../models/FilePreview'
 import { FilesWithCount } from '../models/FilesWithCount'
 import { FileHolder } from '../models/FileHolder'
-import { FileUploadState } from '../models/FileUploadState'
+import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (
@@ -42,10 +42,5 @@ export interface FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ) => Promise<void>
-  addUploadedFiles: (datasetId: number | string, files: FileUploadState[]) => Promise<void>
-  addUploadedFile: (
-    datasetId: number | string,
-    file: FileHolder,
-    storageId: string
-  ) => Promise<void>
+  addUploadedFiles: (datasetId: number | string, files: UploadedFileDTO[]) => Promise<void>
 }

src/files/domain/useCases/addUploadedFiles.ts

@@ -1,31 +1,16 @@
-import { FileUploadState } from '../models/FileUploadState'
+import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
 import { FileRepository } from '../repositories/FileRepository'
 
 export function addUploadedFiles(
   fileRepository: FileRepository,
   datasetId: number | string,
-  files: FileUploadState[],
+  files: UploadedFileDTO[],
   done: () => void
 ): void {
   fileRepository
     .addUploadedFiles(datasetId, files)
+    .then(done)
     .catch((error: Error) => {
       throw new Error(error.message)
     })
-    .finally(done)
-}
-
-export function addUploadedFile(
-  fileRepository: FileRepository,
-  datasetId: number | string,
-  file: File,
-  storageId: string,
-  done: () => void
-): void {
-  fileRepository
-    .addUploadedFile(datasetId, { file: file }, storageId)
-    .catch((error: Error) => {
-      throw new Error(error.message)
-    })
-    .finally(done)
 }

src/files/infrastructure/FileJSDataverseRepository.ts

@@ -15,6 +15,8 @@ import {
   getFileDownloadCount,
   getFileUserPermissions,
   uploadFile as jsUploadFile,
+  addUploadedFilesToDataset,
+  UploadedFileDTO,
   ReadError
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
@@ -31,7 +33,6 @@ import { FilePermissions } from '../domain/models/FilePermissions'
 import { JSFilePermissionsMapper } from './mappers/JSFilePermissionsMapper'
 import { FilesWithCount } from '../domain/models/FilesWithCount'
 import { FileHolder } from '../domain/models/FileHolder'
-import { FileUploadState } from '../domain/models/FileUploadState'
 
 const includeDeaccessioned = true
 
@@ -300,13 +301,7 @@ export class FileJSDataverseRepository implements FileRepository {
       })
   }
 
-  addUploadedFiles(_datasetId: number | string, _files: FileUploadState[]): Promise<void> {
-    // TODO: not yet implemented
-    return new Promise<void>(() => {})
-  }
-
-  addUploadedFile(datasetId: number | string, file: FileHolder, storageId: string): Promise<void> {
-    return new Promise<void>(() => {})
-    // return addUploadedFilesToDataset.execute(datasetId, file.file)
+  addUploadedFiles(datasetId: number | string, uploadedFiles: UploadedFileDTO[]): Promise<void> {
+    return addUploadedFilesToDataset.execute(datasetId, uploadedFiles)
   }
 }

src/files/infrastructure/mappers/UploadedFileDTOMapper.ts

@@ -0,0 +1,26 @@
+import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
+
+export class UploadedFileDTOMapper {
+  static toUploadedFileDTO(
+    fileName: string,
+    description: string | undefined,
+    fileDir: string,
+    tags: string[],
+    restricted: boolean,
+    storageId: string,
+    checksumValue: string,
+    fileType: string
+  ): UploadedFileDTO {
+    return {
+      fileName: fileName,
+      description: description,
+      directoryLabel: fileDir,
+      categories: tags,
+      restrict: restricted,
+      storageId: storageId,
+      checksumValue: checksumValue,
+      checksumType: 'md5',
+      mimeType: fileType
+    }
+  }
+}

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

@@ -6,7 +6,7 @@ import { FileUploadTools, FileUploaderState } from '../../files/domain/models/Fi
 import styles from './FileUploader.module.scss'
 
 export interface FileUploaderProps {
-  upload: (files: File[]) => void
+  upload: (file: File) => void
   cancelTitle: string
   info: string
   selectText: string
@@ -30,21 +30,14 @@ export function FileUploader({
 
   const addFiles = (selectedFiles: FileList | null) => {
     if (selectedFiles && selectedFiles.length > 0) {
-      setFiles((alreadyAdded) => {
-        const selectedFilesArray = Array.from(selectedFiles)
-        const selectedFilesSet = new Set(selectedFilesArray.map((x) => FileUploadTools.key(x)))
-        const alreadyAddedFiltered = alreadyAdded.filter(
-          /* istanbul ignore next */
-          (x) => !selectedFilesSet.has(FileUploadTools.key(x))
-        )
-        return [...alreadyAddedFiltered, ...selectedFilesArray]
-      })
+      Array.from(selectedFiles).forEach((file) => addFile(file))
     }
   }
 
   const addFile = (file: File) => {
     if (!files.some((x) => FileUploadTools.key(x) === FileUploadTools.key(file))) {
       setFiles((oldFiles) => [...oldFiles, file])
+      upload(file)
     }
   }
 
@@ -106,15 +99,11 @@ export function FileUploader({
   }
 
   useEffect(() => {
-    upload(files)
-  }, [files, upload])
-
-  useEffect(() => {
-    setFiles((newFiles) =>
-      newFiles.filter((x) => {
-        const res = !FileUploadTools.get(x, fileUploaderState).removed
+    setFiles((currentFiles) =>
+      currentFiles.filter((file) => {
+        const res = !FileUploadTools.get(file, fileUploaderState).removed
         if (!res) {
-          cleanFileState(x)
+          cleanFileState(file)
         }
         return res
       })