diff --git a/src/components/Upload/Uploader.tsx b/src/components/Upload/Uploader.tsx index 659d09352..984cf6358 100644 --- a/src/components/Upload/Uploader.tsx +++ b/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.START @@ -106,8 +112,8 @@ export default function Uploader(props: Props) { const [importSuggestion, setImportSuggestion] = useState( DEFAULT_IMPORT_SUGGESTION ); - const appContext = useContext(AppContext); - const galleryContext = useContext(GalleryContext); + const [electronFiles, setElectronFiles] = useState(null); + const [webFiles, setWebFiles] = useState([]); const toUploadFiles = useRef(null); const isPendingDesktopUpload = useRef(false); @@ -116,23 +122,17 @@ export default function Uploader(props: Props) { const pickedUploadType = useRef(null); const zipPaths = useRef(null); const currentUploadPromise = useRef>(null); - const [electronFiles, setElectronFiles] = useState(null); - const [webFiles, setWebFiles] = useState([]); + const uploadRunning = useRef(false); + const uploaderNameRef = useRef(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) { /> ); diff --git a/src/components/UserNameInputDialog.tsx b/src/components/UserNameInputDialog.tsx index 35c124ce1..df0e7814b 100644 --- a/src/components/UserNameInputDialog.tsx +++ b/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} {}} + secondaryButtonAction={onClose} /> ); diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 3bec84a0a..2d6121d1a 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/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;