ref uploader name

web/apps/photos/src/components/Upload.tsx

@@ -238,7 +238,7 @@ export const Upload: React.FC<UploadProps> = ({
 
     const currentUploadPromise = useRef<Promise<void> | undefined>(undefined);
     const uploadRunning = useRef(false);
-    const uploaderNameRef = useRef<string>(null);
+    const uploaderNameRef = useRef("");
     const isDragAndDrop = useRef(false);
 
     /**
@@ -494,7 +494,7 @@ export const Upload: React.FC<UploadProps> = ({
                         publicCollectionGalleryContext.credentials.accessToken,
                     ),
                 );
-                uploaderNameRef.current = uploaderName;
+                uploaderNameRef.current = uploaderName ?? "";
                 showUploaderNameInput();
                 return;
             }
@@ -791,26 +791,18 @@ export const Upload: React.FC<UploadProps> = ({
         }
     };
 
-    const handlePublicUpload = async (
-        uploaderName: string,
-        skipSave?: boolean,
-    ) => {
-        try {
-            if (!skipSave) {
-                savePublicCollectionUploaderName(
-                    getPublicCollectionUID(
-                        publicCollectionGalleryContext.credentials.accessToken,
-                    ),
-                    uploaderName,
-                );
-            }
-            await uploadFilesToExistingCollection(
-                props.uploadCollection,
-                uploaderName,
-            );
-        } catch (e) {
-            log.error("public upload failed ", e);
-        }
+    const handlePublicUpload = async (uploaderName: string) => {
+        savePublicCollectionUploaderName(
+            getPublicCollectionUID(
+                publicCollectionGalleryContext.credentials.accessToken,
+            ),
+            uploaderName,
+        );
+
+        await uploadFilesToExistingCollection(
+            props.uploadCollection,
+            uploaderName,
+        );
     };
 
     const handleCollectionMappingSelect = (mapping: CollectionMapping) =>

web/packages/new/albums/components/UploaderNameInput.tsx

@@ -4,12 +4,18 @@ import {
     Dialog,
     DialogContent,
     DialogTitle,
+    Stack,
+    TextField,
     Typography,
     useMediaQuery,
 } from "@mui/material";
+import { FocusVisibleButton } from "ente-base/components/mui/FocusVisibleButton";
+import { LoadingButton } from "ente-base/components/mui/LoadingButton";
 import type { ModalVisibilityProps } from "ente-base/components/utils/modal";
-import SingleInputForm from "ente-shared/components/SingleInputForm";
+import log from "ente-base/log";
+import { useFormik } from "formik";
 import { t } from "i18next";
+import React from "react";
 
 type UploaderNameInput = ModalVisibilityProps & {
     /**
@@ -40,10 +46,26 @@ export const UploaderNameInput: React.FC<UploaderNameInput> = ({
     // Make the dialog fullscreen if it starts to get too squished.
     const fullScreen = useMediaQuery("(width < 400px)");
 
-    const handleSubmit = async (inputValue: string) => {
-        onClose();
-        await onSubmit(inputValue);
-    };
+    const formik = useFormik({
+        initialValues: { value: uploaderName },
+        onSubmit: async (values, { setFieldError }) => {
+            const value = values.value;
+            const setValueFieldError = (message: string) =>
+                setFieldError("value", message);
+
+            if (!value) {
+                setValueFieldError(t("required"));
+                return;
+            }
+            try {
+                await onSubmit(value);
+                onClose();
+            } catch (e) {
+                log.error(`Failed to submit input ${value}`, e);
+                setValueFieldError(t("generic_error"));
+            }
+        },
+    });
 
     return (
         <Dialog
@@ -67,18 +89,43 @@ export const UploaderNameInput: React.FC<UploaderNameInput> = ({
                 <Typography sx={{ color: "text.muted", pb: 1 }}>
                     {t("uploader_name_hint")}
                 </Typography>
-                <SingleInputForm
-                    hiddenLabel
-                    initialValue={uploaderName}
-                    callback={handleSubmit}
-                    placeholder={t("name_placeholder")}
-                    buttonText={t("add_photos_count", {
-                        count: uploadFileCount,
-                    })}
-                    fieldType="text"
-                    blockButton
-                    secondaryButtonAction={onClose}
-                />
+                <form onSubmit={formik.handleSubmit}>
+                    <TextField
+                        name="value"
+                        value={formik.values.value}
+                        onChange={formik.handleChange}
+                        type={"text"}
+                        fullWidth
+                        margin="normal"
+                        hiddenLabel
+                        aria-label={t("name")}
+                        placeholder={t("name_placeholder")}
+                        disabled={formik.isSubmitting}
+                        error={!!formik.errors.value}
+                        // As an exception, we don't use an space character
+                        // default here since that skews the look of the dialog
+                        // too much in the happy case. The downside is that
+                        // there will be a layout shift on errors.
+                        helperText={formik.errors.value}
+                    />
+                    <Stack sx={{ mt: 1.5, gap: 1 }}>
+                        <LoadingButton
+                            fullWidth
+                            type="submit"
+                            loading={formik.isSubmitting}
+                            color="accent"
+                        >
+                            {t("add_photos_count", { count: uploadFileCount })}
+                        </LoadingButton>
+                        <FocusVisibleButton
+                            fullWidth
+                            color="secondary"
+                            onClick={onClose}
+                        >
+                            {t("cancel")}
+                        </FocusVisibleButton>
+                    </Stack>
+                </form>
             </DialogContent>
         </Dialog>
     );