Don't block file manager during upload/mass action

Also, restyle the file upload/mass action overlay to be elevated.
retrixe · Aug 9, 2023 · ad4e945 · ad4e945
1 parent 32aad0d
commit ad4e945
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/imports/dashboard/files/fileManager.tsx b/imports/dashboard/files/fileManager.tsx
@@ -97,7 +97,7 @@ const FileManager = (props: {
   const fetchFiles = useCallback(() => {
     ;(async () => {
       setFetching(true) // TODO: Make it show up after 1.0 seconds.
-      setError(null) // TODO: This isn't as clean as we would like..
+      setError(null)
       const files: any = await ky.get(`server/${server}/files?path=${euc(path)}`).json()
       if (files.error === 'This server does not exist!') setServerExists(false)
       else if (files.error === 'You are not authenticated to access this resource!') setAuthenticated(false)
@@ -238,10 +238,11 @@ const FileManager = (props: {
     }).catch(console.error) // Should not be called, ideally.
   }
   const handleFilesUpload = (files: FileList): void => {
+    if (overlay) return // TODO: Allow multiple file uploads/mass actions simultaneously in future.
     ;(async () => {
       for (let i = 0; i < files.length; i++) {
         const file = files[i]
-        setOverlay(file.name)
+        setOverlay(`Uploading ${file.name} to ${path}`)
         // Save the file.
         const formData = new FormData()
         formData.append('upload', file, file.name)
@@ -252,7 +253,7 @@ const FileManager = (props: {
         setOverlay('')
       }
       setMessage('Uploaded all files successfully!')
-      fetchFiles()
+      if (path === prevPath.current) fetchFiles() // prevPath is current path after useEffect call.
     })().catch(e => { console.error(e); setMessage(`Failed to upload files: ${e.message}`) })
   }
   // Single file logic.
@@ -519,10 +520,10 @@ const FileManager = (props: {
       )}
       {massActionMenuOpen && (
         <Menu open keepMounted anchorEl={massActionMenuOpen} onClose={() => setMassActionMenuOpen(null)}>
-          <MenuItem onClick={() => setMassActionDialogOpen('move')}>Move</MenuItem>
-          <MenuItem onClick={() => setMassActionDialogOpen('copy')}>Copy</MenuItem>
-          <MenuItem onClick={() => handleFilesDelete()}>Delete</MenuItem>
-          <MenuItem onClick={() => setMassActionDialogOpen('compress')}>Compress</MenuItem>
+          <MenuItem onClick={() => setMassActionDialogOpen('move')} disabled={!!overlay}>Move</MenuItem>
+          <MenuItem onClick={() => setMassActionDialogOpen('copy')} disabled={!!overlay}>Copy</MenuItem>
+          <MenuItem onClick={() => handleFilesDelete()} disabled={!!overlay}>Delete</MenuItem>
+          <MenuItem onClick={() => setMassActionDialogOpen('compress')} disabled={!!overlay}>Compress</MenuItem>
         </Menu>
       )}
       {selectedFile && (

diff --git a/imports/dashboard/files/overlay.tsx b/imports/dashboard/files/overlay.tsx
@@ -12,13 +12,14 @@ const OverlayContainer = styled.div({
   left: 0,
   right: 0,
   bottom: 0,
-  zIndex: 2000
+  zIndex: 2000,
+  pointerEvents: 'none'
 })
 
 const Overlay = ({ message }: { message: string }): JSX.Element => (
   <OverlayContainer>
     <div style={{ flex: 1 }} />
-    <Paper sx={{ height: '80px', m: '20px', p: '20px', ml: { xs: '20px', sm: '220px' } }}>
+    <Paper elevation={3} sx={{ height: '80px', m: '28px', p: '20px', ml: { xs: '28px', sm: '228px' } }}>
       <LinearProgress />
       <br />
       <Typography variant='body1'>{message}</Typography>