exported strings to englishConstants

src/pages/gallery/components/UploadProgress.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Alert, Modal, ProgressBar } from 'react-bootstrap';
+import constants from 'utils/strings/constants'
 
 export default function UploadProgress({ fileCounter, uploadStage, now, ...props }) {
     return (
@@ -17,10 +18,10 @@ export default function UploadProgress({ fileCounter, uploadStage, now, ...props
             </Modal.Header>
             <Modal.Body>
                 {now === 100 ? (
-                    <Alert variant='success'>Upload Completed</Alert>
+                    <Alert variant='success'>{constants.UPLOAD[3]}</Alert>
                 ) : (
                         <>
-                            <Alert variant='info'>{uploadStage} {fileCounter?.current} of {fileCounter?.total}</Alert>
+                            <Alert variant='info'>{constants.UPLOAD[uploadStage]} {fileCounter?.total != 0 ? `${fileCounter?.current} ${constants.OF} ${fileCounter?.total}` : ''}</Alert>
                             <ProgressBar animated now={now} />
                         </>
                     )}

src/services/uploadService.ts

@@ -74,10 +74,10 @@ class Queue<T> {
 }
 
 export enum UPLOAD_STAGES {
-    START = "Preparing to upload",
-    ENCRYPTION = "Encryting your files",
-    UPLOAD = "Uploading your Files",
-    FINISH = "Files Uploaded Successfully !!!"
+    START,
+    ENCRYPTION,
+    UPLOAD,
+    FINISH
 }
 
 class UploadService {

src/utils/strings/englishConstants.tsx

@@ -45,6 +45,13 @@ const englishConstants = {
     SELECT_COLLECTION: `Select/Click on Collection to upload`,
     CLOSE: 'Close',
     NOTHING_HERE: `nothing to see here! 👀`,
+    UPLOAD: {
+        0: "Preparing to upload",
+        1: "Encryting your files",
+        2: "Uploading your Files",
+        3: "Files Uploaded Successfully !!!"
+    },
+    OF: 'of'
 };
 
 export default englishConstants;