Merge pull request #2123 from gchq/feature/BAI-1672-add-new-file-button-to-files-tab

PE39806 · web-flow · commit 0c93fc474014 · 2025-04-08T09:25:04.000Z
Added the ability to upload files directly in the files tab for a model.
diff --git a/frontend/pages/model/[modelId]/release/new.tsx b/frontend/pages/model/[modelId]/release/new.tsx
@@ -7,6 +7,7 @@ import { CreateReleaseParams, postRelease } from 'actions/release'
 import { AxiosProgressEvent } from 'axios'
 import { useRouter } from 'next/router'
 import { FormEvent, useCallback, useMemo, useState } from 'react'
+import { FailedFileUpload, FileUploadProgress } from 'src/common/FileUploadProgressDisplay'
 import Loading from 'src/common/Loading'
 import Title from 'src/common/Title'
 import ReleaseForm from 'src/entry/model/releases/ReleaseForm'
@@ -15,9 +16,7 @@ import Link from 'src/Link'
 import MessageAlert from 'src/MessageAlert'
 import {
   EntryKind,
-  FailedFileUpload,
   FileInterface,
-  FileUploadProgress,
   FileWithMetadata,
   FlattenedModelImage,
   isFileInterface,
@@ -74,6 +73,7 @@ export default function NewRelease() {
     event.preventDefault()
 
     setFailedFileUploads([])
+    const failedFiles: FailedFileUpload[] = []
 
     if (!model) {
       return setErrorMessage('Please wait for the model to finish loading before trying to make a release.')
@@ -90,7 +90,6 @@ export default function NewRelease() {
     setErrorMessage('')
     setLoading(true)
 
-    const failedFiles: FailedFileUpload[] = []
     const successfulFiles: SuccessfulFileUpload[] = []
     for (const file of files) {
       if (isFileInterface(file)) {
@@ -125,6 +124,7 @@ export default function NewRelease() {
         }
       }
     }
+    setFailedFileUploads(failedFiles)
 
     const updatedSuccessfulFiles = successfulFiles.reduce(
       (updatedFiles, file) => {
@@ -137,11 +137,6 @@ export default function NewRelease() {
     )
     setSuccessfulFileUploads(updatedSuccessfulFiles)
 
-    if (failedFiles.length > 0) {
-      setFailedFileUploads(failedFiles)
-      return
-    }
-
     const release: CreateReleaseParams = {
       modelId: model.id,
       semver,
diff --git a/frontend/src/common/FileUploadProgressDisplay.tsx b/frontend/src/common/FileUploadProgressDisplay.tsx
@@ -0,0 +1,46 @@
+import { Stack, Typography } from '@mui/material'
+
+interface FileUploadProgressDisplayProps {
+  currentFileUploadProgress: FileUploadProgress
+  totalFilesToUpload: number
+  uploadedFiles: number
+}
+
+export interface FileUploadProgress {
+  fileName: string
+  uploadProgress: number
+}
+
+export interface FailedFileUpload {
+  fileName: string
+  error: string
+}
+
+export default function FileUploadProgressDisplay({
+  currentFileUploadProgress,
+  totalFilesToUpload,
+  uploadedFiles,
+}: FileUploadProgressDisplayProps) {
+  if (!currentFileUploadProgress) {
+    return <Typography>Could not determine file progress</Typography>
+  }
+  if (uploadedFiles && uploadedFiles === totalFilesToUpload) {
+    return <Typography>All files uploaded successfully.</Typography>
+  }
+  return currentFileUploadProgress.uploadProgress < 100 ? (
+    <Stack direction='row' spacing={1}>
+      <Typography fontWeight='bold'>
+        [File {uploadedFiles ? uploadedFiles + 1 : '1'} / {totalFilesToUpload}] -
+      </Typography>
+      <Typography fontWeight='bold'>{currentFileUploadProgress.fileName}</Typography>
+      <Typography>uploading {currentFileUploadProgress.uploadProgress}%</Typography>
+    </Stack>
+  ) : (
+    <Stack direction='row' spacing={1}>
+      <Typography fontWeight='bold'>
+        File {uploadedFiles ? uploadedFiles + 1 : '1'} / {totalFilesToUpload} -{currentFileUploadProgress.fileName}
+      </Typography>
+      <Typography>received - waiting for response from server...</Typography>
+    </Stack>
+  )
+}
diff --git a/frontend/src/entry/model/Files.tsx b/frontend/src/entry/model/Files.tsx
@@ -1,8 +1,14 @@
-import { Card, Container, Stack } from '@mui/material'
+import { LoadingButton } from '@mui/lab'
+import { Box, Button, Card, Container, LinearProgress, Stack } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { postFileForModelId } from 'actions/file'
 import { useGetModelFiles } from 'actions/model'
-import { useMemo } from 'react'
+import { AxiosProgressEvent } from 'axios'
+import { ChangeEvent, useCallback, useMemo, useState } from 'react'
 import EmptyBlob from 'src/common/EmptyBlob'
+import FileUploadProgressDisplay, { FailedFileUpload, FileUploadProgress } from 'src/common/FileUploadProgressDisplay'
 import Loading from 'src/common/Loading'
+import Restricted from 'src/common/Restricted'
 import FileDownload from 'src/entry/model/releases/FileDownload'
 import MessageAlert from 'src/MessageAlert'
 import { EntryInterface } from 'types/types'
@@ -12,9 +18,19 @@ type FilesProps = {
   model: EntryInterface
 }
 
+const Input = styled('input')({
+  display: 'none',
+})
+
 export default function Files({ model }: FilesProps) {
   const { entryFiles, isEntryFilesLoading, isEntryFilesError, mutateEntryFiles } = useGetModelFiles(model.id)
 
+  const [currentFileUploadProgress, setCurrentFileUploadProgress] = useState<FileUploadProgress | undefined>(undefined)
+  const [uploadedFiles, setUploadedFiles] = useState<string[]>([])
+  const [totalFilesToUpload, setTotalFilesToUpload] = useState(0)
+  const [isFilesUploading, setIsFilesUploading] = useState(false)
+  const [failedFileUploads, setFailedFileUploads] = useState<FailedFileUpload[]>([])
+
   const sortedEntryFiles = useMemo(() => [...entryFiles].sort(sortByCreatedAtDescending), [entryFiles])
 
   const entryFilesList = useMemo(
@@ -38,6 +54,59 @@ export default function Files({ model }: FilesProps) {
     [entryFiles.length, model.id, model.name, sortedEntryFiles, mutateEntryFiles],
   )
 
+  const handleAddNewFiles = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      setIsFilesUploading(true)
+      setFailedFileUploads([])
+      const failedFiles: FailedFileUpload[] = []
+      const files = event.target.files ? Array.from(event.target.files) : []
+      setTotalFilesToUpload(files.length)
+      for (const file of files) {
+        const handleUploadProgress = (progressEvent: AxiosProgressEvent) => {
+          if (progressEvent.total) {
+            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+            setCurrentFileUploadProgress({ fileName: file.name, uploadProgress: percentCompleted })
+          }
+        }
+
+        try {
+          const fileUploadResponse = await postFileForModelId(model.id, file, handleUploadProgress, '')
+          setCurrentFileUploadProgress(undefined)
+          if (fileUploadResponse) {
+            setUploadedFiles((uploadedFiles) => [...uploadedFiles, file.name])
+            mutateEntryFiles()
+          } else {
+            setCurrentFileUploadProgress(undefined)
+          }
+        } catch (e) {
+          if (e instanceof Error) {
+            failedFiles.push({ fileName: file.name, error: e.message })
+            setFailedFileUploads([...failedFileUploads, { fileName: file.name, error: e.message }])
+            setCurrentFileUploadProgress(undefined)
+          }
+        }
+      }
+      setUploadedFiles([])
+      setFailedFileUploads(failedFiles)
+      setTotalFilesToUpload(0)
+      setIsFilesUploading(false)
+    },
+    [model.id, mutateEntryFiles, failedFileUploads],
+  )
+
+  const failedFileList = useMemo(
+    () =>
+      failedFileUploads.map((file) => (
+        <div key={file.fileName}>
+          <Box component='span' fontWeight='bold'>
+            {file.fileName}
+          </Box>
+          {` - ${file.error}`}
+        </div>
+      )),
+    [failedFileUploads],
+  )
+
   if (isEntryFilesError) {
     return <MessageAlert message={isEntryFilesError.info.message} severity='error' />
   }
@@ -49,7 +118,41 @@ export default function Files({ model }: FilesProps) {
   return (
     <>
       <Container sx={{ my: 2 }}>
-        <Stack direction={{ xs: 'column' }} spacing={2} justifyContent='center' alignItems='center'>
+        <Stack direction={{ xs: 'column' }} spacing={4}>
+          <Box display='flex'>
+            <Box ml='auto'>
+              <Restricted action='createRelease' fallback={<Button disabled>Add new files</Button>}>
+                <>
+                  <label htmlFor='add-files-button'>
+                    <LoadingButton loading={isFilesUploading} fullWidth component='span' variant='outlined'>
+                      Add new files
+                    </LoadingButton>
+                  </label>
+                  <Input
+                    multiple
+                    id={'add-files-button'}
+                    type='file'
+                    onInput={handleAddNewFiles}
+                    data-test='uploadFileButton'
+                  />
+                </>
+              </Restricted>
+            </Box>
+          </Box>
+          {currentFileUploadProgress && (
+            <>
+              <LinearProgress
+                variant={currentFileUploadProgress.uploadProgress < 100 ? 'determinate' : 'indeterminate'}
+                value={currentFileUploadProgress.uploadProgress}
+              />
+              <FileUploadProgressDisplay
+                currentFileUploadProgress={currentFileUploadProgress}
+                uploadedFiles={uploadedFiles.length}
+                totalFilesToUpload={totalFilesToUpload}
+              />
+            </>
+          )}
+          {failedFileList}
           {entryFilesList}
         </Stack>
       </Container>
diff --git a/frontend/src/entry/model/releases/EditableRelease.tsx b/frontend/src/entry/model/releases/EditableRelease.tsx
@@ -12,16 +12,15 @@ import { AxiosProgressEvent } from 'axios'
 import { useRouter } from 'next/router'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import ConfirmationDialogue from 'src/common/ConfirmationDialogue'
+import { FailedFileUpload, FileUploadProgress } from 'src/common/FileUploadProgressDisplay'
 import Loading from 'src/common/Loading'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import ReleaseForm from 'src/entry/model/releases/ReleaseForm'
 import EditableFormHeading from 'src/Form/EditableFormHeading'
 import MessageAlert from 'src/MessageAlert'
 import {
   EntryKind,
-  FailedFileUpload,
   FileInterface,
-  FileUploadProgress,
   FileWithMetadata,
   FlattenedModelImage,
   isFileInterface,
diff --git a/frontend/src/entry/model/releases/ExistingFileSelector.tsx b/frontend/src/entry/model/releases/ExistingFileSelector.tsx
@@ -10,8 +10,10 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Stack,
   Typography,
 } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 import { useGetFilesForModel } from 'actions/file'
 import prettyBytes from 'pretty-bytes'
 import { useCallback, useMemo, useState } from 'react'
@@ -31,6 +33,7 @@ export default function ExistingFileSelector({ model, existingReleaseFiles, onCh
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const { files, isFilesLoading, isFilesError } = useGetFilesForModel(model.id)
   const [checkedFiles, setCheckedFiles] = useState<FileInterface[]>([])
+  const theme = useTheme()
 
   const handleAddFilesOnClick = () => {
     if (checkedFiles.length === 0) {
@@ -66,6 +69,23 @@ export default function ExistingFileSelector({ model, existingReleaseFiles, onCh
     [checkedFiles],
   )
 
+  const isFileDisabled = useCallback(
+    (file: FileInterface) => {
+      return (
+        existingReleaseFiles.find(
+          (existingFile) => isFileInterface(existingFile) && existingFile.name === file.name,
+        ) !== undefined ||
+        (checkedFiles.find(
+          (existingCheckedFile) => isFileInterface(existingCheckedFile) && existingCheckedFile.name === file.name,
+        ) !== undefined &&
+          checkedFiles.find(
+            (existingCheckedFile) => isFileInterface(existingCheckedFile) && existingCheckedFile._id === file._id,
+          ) === undefined)
+      )
+    },
+    [existingReleaseFiles, checkedFiles],
+  )
+
   const fileList = useMemo(() => {
     if (!files || files.length === 0) {
       return <EmptyBlob text='No existing files available' />
@@ -75,15 +95,7 @@ export default function ExistingFileSelector({ model, existingReleaseFiles, onCh
         <List>
           {files.map((file) => (
             <ListItem key={file._id} disablePadding>
-              <ListItemButton
-                dense
-                onClick={handleToggle(file)}
-                disabled={
-                  existingReleaseFiles.find(
-                    (existingFile) => isFileInterface(existingFile) && existingFile._id === file._id,
-                  ) !== undefined
-                }
-              >
+              <ListItemButton dense onClick={handleToggle(file)} disabled={isFileDisabled(file)}>
                 <ListItemIcon>
                   <Checkbox
                     edge='start'
@@ -99,11 +111,16 @@ export default function ExistingFileSelector({ model, existingReleaseFiles, onCh
                 </ListItemIcon>
                 <ListItemText
                   primary={
-                    <>
+                    <Stack>
                       <Typography color='primary' component='span'>
                         {file.name}
                       </Typography>
-                    </>
+                      {isFileDisabled(file) && (
+                        <Typography variant='caption' color={theme.palette.error.main}>
+                          A file with this name has either been selected, or is already on this release
+                        </Typography>
+                      )}
+                    </Stack>
                   }
                   secondary={`Added on ${formatDateString(file.createdAt.toString())} - ${prettyBytes(file.size)}`}
                 />
@@ -113,7 +130,7 @@ export default function ExistingFileSelector({ model, existingReleaseFiles, onCh
         </List>
       )
     }
-  }, [checkedFiles, existingReleaseFiles, files, handleToggle])
+  }, [checkedFiles, existingReleaseFiles, files, handleToggle, isFileDisabled, theme.palette.error.main])
 
   if (isFilesError) {
     return <MessageAlert message={isFilesError.info.message} severity='error' />
diff --git a/frontend/src/entry/model/releases/ReleaseForm.tsx b/frontend/src/entry/model/releases/ReleaseForm.tsx
diff --git a/frontend/types/types.ts b/frontend/types/types.ts
