show count of files add during public upload
This commit is contained in:
parent
469af4ae4b
commit
fb2a437a7f
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue