show count of files add during public upload

src/components/Upload/Uploader.tsx

@@ -83,6 +83,12 @@ interface Props {
 }
 
 export default function Uploader(props: Props) {
+    const appContext = useContext(AppContext);
+    const galleryContext = useContext(GalleryContext);
+    const publicCollectionGalleryContext = useContext(
+        PublicCollectionGalleryContext
+    );
+
     const [uploadProgressView, setUploadProgressView] = useState(false);
     const [uploadStage, setUploadStage] = useState<UPLOAD_STAGES>(
         UPLOAD_STAGES.START
@@ -106,8 +112,8 @@ export default function Uploader(props: Props) {
     const [importSuggestion, setImportSuggestion] = useState<ImportSuggestion>(
         DEFAULT_IMPORT_SUGGESTION
     );
-    const appContext = useContext(AppContext);
-    const galleryContext = useContext(GalleryContext);
+    const [electronFiles, setElectronFiles] = useState<ElectronFile[]>(null);
+    const [webFiles, setWebFiles] = useState([]);
 
     const toUploadFiles = useRef<File[] | ElectronFile[]>(null);
     const isPendingDesktopUpload = useRef(false);
@@ -116,23 +122,17 @@ export default function Uploader(props: Props) {
     const pickedUploadType = useRef<PICKED_UPLOAD_TYPE>(null);
     const zipPaths = useRef<string[]>(null);
     const currentUploadPromise = useRef<Promise<void>>(null);
-    const [electronFiles, setElectronFiles] = useState<ElectronFile[]>(null);
-    const [webFiles, setWebFiles] = useState([]);
+    const uploadRunning = useRef(false);
+    const uploaderNameRef = useRef<string>(null);
 
     const closeUploadProgress = () => setUploadProgressView(false);
     const showUserNameInputDialog = () => setUserNameInputDialogView(true);
-    const closeUserNameInputDialog = () => setUserNameInputDialogView(false);
 
     const setCollectionName = (collectionName: string) => {
         isPendingDesktopUpload.current = true;
         pendingDesktopUploadCollectionName.current = collectionName;
     };
 
-    const uploadRunning = useRef(false);
-    const publicCollectionGalleryContext = useContext(
-        PublicCollectionGalleryContext
-    );
-
     const handleChoiceModalClose = () => {
         setChoiceModalView(false);
         uploadRunning.current = false;
@@ -141,6 +141,11 @@ export default function Uploader(props: Props) {
         uploadRunning.current = false;
     };
 
+    const handleUserNameInputDialogClose = () => {
+        setUserNameInputDialogView(false);
+        uploadRunning.current = false;
+    };
+
     useEffect(() => {
         uploadManager.init(
             {
@@ -305,7 +310,6 @@ export default function Uploader(props: Props) {
                 [collection],
                 uploaderName
             );
-            toUploadFiles.current = null;
         } catch (e) {
             logError(e, 'Failed to upload files to existing collections');
         }
@@ -545,11 +549,8 @@ export default function Uploader(props: Props) {
                 const uploaderName = await getPublicCollectionUploaderName(
                     getPublicCollectionUID(publicCollectionGalleryContext.token)
                 );
-                if (!uploaderName) {
-                    showUserNameInputDialog();
-                } else {
-                    await handlePublicUpload(uploaderName, true);
-                }
+                uploaderNameRef.current = uploaderName;
+                showUserNameInputDialog();
                 return;
             }
             if (isPendingDesktopUpload.current) {
@@ -699,8 +700,10 @@ export default function Uploader(props: Props) {
             />
             <UserNameInputDialog
                 open={userNameInputDialogView}
-                onClose={closeUserNameInputDialog}
+                onClose={handleUserNameInputDialogClose}
                 onNameSubmit={handlePublicUpload}
+                toUploadFilesCount={toUploadFiles.current?.length}
+                uploaderName={uploaderNameRef.current}
             />
         </>
     );

src/components/UserNameInputDialog.tsx

@@ -5,7 +5,13 @@ import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
 import { Typography } from '@mui/material';
 import SingleInputForm from './SingleInputForm';
 
-export default function UserNameInputDialog({ open, onClose, onNameSubmit }) {
+export default function UserNameInputDialog({
+    open,
+    onClose,
+    onNameSubmit,
+    toUploadFilesCount,
+    uploaderName,
+}) {
     const handleSubmit = async (inputValue: string) => {
         onClose();
         await onNameSubmit(inputValue);
@@ -23,12 +29,13 @@ export default function UserNameInputDialog({ open, onClose, onNameSubmit }) {
                 {constants.PUBLIC_UPLOADER_NAME_MESSAGE}
             </Typography>
             <SingleInputForm
+                initialValue={uploaderName}
                 callback={handleSubmit}
                 placeholder={constants.ENTER_FILE_NAME}
-                buttonText={constants.CONTINUE}
+                buttonText={constants.ADD_X_PHOTOS(toUploadFilesCount)}
                 fieldType="text"
                 blockButton
-                secondaryButtonAction={() => {}}
+                secondaryButtonAction={onClose}
             />
         </DialogBox>
     );

src/utils/strings/englishConstants.tsx

@@ -879,6 +879,7 @@ const englishConstants = {
     YESTERDAY: 'Yesterday',
     AT: 'at',
     NAME_PLACEHOLDER: 'Name...',
+    ADD_X_PHOTOS: (x: number) => `Add ${x} ${x > 1 ? 'photos' : 'photo'}`,
 };
 
 export default englishConstants;