use shouldAllowNewUpload to prevent uploads

src/components/EmptyScreen.tsx

@@ -3,6 +3,7 @@ import { Button, styled, Typography } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { DeduplicateContext } from 'pages/deduplicate';
 import VerticallyCentered from './Container';
+import uploadManager from 'services/upload/uploadManager';
 
 const Wrapper = styled(VerticallyCentered)`
     & > svg {
@@ -34,12 +35,20 @@ export default function EmptyScreen({ openUploader }) {
                         {constants.UPLOAD_FIRST_PHOTO_DESCRIPTION()}
                     </Typography>
 
-                    <Button
-                        color="accent"
-                        onClick={openUploader}
-                        sx={{ mt: 4 }}>
-                        {constants.UPLOAD_FIRST_PHOTO}
-                    </Button>
+                    <span
+                        style={{
+                            cursor:
+                                !uploadManager.shouldAllowNewUpload() &&
+                                'not-allowed',
+                        }}>
+                        <Button
+                            color="accent"
+                            onClick={openUploader}
+                            disabled={!uploadManager.shouldAllowNewUpload()}
+                            sx={{ mt: 4 }}>
+                            {constants.UPLOAD_FIRST_PHOTO}
+                        </Button>
+                    </span>
                 </>
             )}
         </Wrapper>

src/components/Upload/UploadButton.tsx

@@ -3,6 +3,7 @@ import { IconButton, styled } from '@mui/material';
 import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
 import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
+import uploadManager from 'services/upload/uploadManager';
 
 const Wrapper = styled('div')`
     display: flex;
@@ -28,14 +29,23 @@ interface Iprops {
 }
 function UploadButton({ openUploader }: Iprops) {
     return (
-        <Wrapper onClick={openUploader}>
+        <Wrapper
+            style={{
+                cursor: !uploadManager.shouldAllowNewUpload() && 'not-allowed',
+            }}>
             <Button
+                onClick={openUploader}
+                disabled={!uploadManager.shouldAllowNewUpload()}
                 className="desktop-button"
                 color="secondary"
                 startIcon={<FileUploadOutlinedIcon />}>
                 {constants.UPLOAD}
             </Button>
-            <IconButton className="mobile-button">
+
+            <IconButton
+                onClick={openUploader}
+                disabled={!uploadManager.shouldAllowNewUpload()}
+                className="mobile-button">
                 <FileUploadOutlinedIcon />
             </IconButton>
         </Wrapper>

src/pages/gallery/index.tsx

@@ -564,9 +564,7 @@ export default function Gallery() {
     };
 
     const openUploader = () => {
-        if (!uploadInProgress) {
-            setUploadTypeSelectorView(true);
-        }
+        setUploadTypeSelectorView(true);
     };
 
     return (

src/services/upload/uploadManager.ts

@@ -545,6 +545,10 @@ class UploadManager {
         const updatedFile = await appendNewFilePath(decryptedFile, filePath);
         await updateFileMagicMetadata([updatedFile]);
     }
+
+    public shouldAllowNewUpload = () => {
+        return !this.uploadInProgress || watchFolderService.isUploadRunning();
+    };
 }
 
 export default new UploadManager();