Attach cancel callback

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

@@ -26,7 +26,7 @@ import DiscFullIcon from "@mui/icons-material/DiscFull";
 import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Trans } from "react-i18next";
 import {
     getPublicCollectionUID,
@@ -205,12 +205,17 @@ export default function Uploader({
     const uploaderNameRef = useRef<string>(null);
     const isDragAndDrop = useRef(false);
 
+    const handleInputCancel = useCallback(() => {
+        console.log("cancel");
+    }, []);
+
     const {
         getInputProps: getFileSelectorInputProps,
         openSelector: openFileSelector,
         selectedFiles: fileSelectorFiles,
     } = useFileInput({
         directory: false,
+        onCancel: handleInputCancel,
     });
 
     const {
@@ -219,6 +224,7 @@ export default function Uploader({
         selectedFiles: folderSelectorFiles,
     } = useFileInput({
         directory: true,
+        onCancel: handleInputCancel,
     });
 
     const {
@@ -228,6 +234,7 @@ export default function Uploader({
     } = useFileInput({
         directory: false,
         accept: ".zip",
+        onCancel: handleInputCancel,
     });
 
     const electron = globalThis.electron;
@@ -851,33 +858,13 @@ const Inputs: React.FC<InputsProps> = ({
     getFileSelectorInputProps,
     getFolderSelectorInputProps,
     getZipFileSelectorInputProps,
-}) => {
-    const refFile = useRef(null);
-    const refFolder = useRef(null);
-    const refZip = useRef(null);
-
-    useEffect(() => {
-        const handleCancel = () => {
-            console.log("cancel");
-        };
-        [refFile, refFolder, refZip].map((ref) =>
-            ref.current?.addEventListener("cancel", handleCancel),
-        );
-        return () => {
-            [refFile, refFolder, refZip].map((ref) =>
-                ref.current?.removeEventListener("cancel", handleCancel),
-            );
-        };
-    }, []);
-
-    return (
-        <>
-            <input ref={refFile} {...getFileSelectorInputProps()} />
-            <input ref={refFolder} {...getFolderSelectorInputProps()} />
-            <input ref={refZip} {...getZipFileSelectorInputProps()} />
-        </>
-    );
-};
+}) => (
+    <>
+        <input {...getFileSelectorInputProps()} />
+        <input {...getFolderSelectorInputProps()} />
+        <input {...getZipFileSelectorInputProps()} />
+    </>
+);
 
 const desktopFilesAndZipItems = async (electron: Electron, files: File[]) => {
     const fileAndPaths: FileAndPath[] = [];

web/packages/gallery/components/utils/use-file-input.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface UseFileInputParams {
     /**
@@ -14,6 +14,11 @@ interface UseFileInputParams {
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept).
      */
     accept?: string;
+    /**
+     * A callback that is invoked when the user cancels on the file / directory
+     * dialog.
+     */
+    onCancel: () => void;
 }
 
 interface UseFileInputResult {
@@ -50,15 +55,25 @@ interface UseFileInputResult {
 export const useFileInput = ({
     directory,
     accept,
+    onCancel,
 }: UseFileInputParams): UseFileInputResult => {
     const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
     const inputRef = useRef<HTMLInputElement | undefined>(undefined);
 
+    useEffect(() => {
+        // React (as of 19) doesn't support attaching the onCancel event handler
+        // via props, so do it using its ref.
+        //
+        // https://github.com/facebook/react/issues/27858
+        inputRef.current!.addEventListener("cancel", onCancel);
+        return () => {
+            inputRef.current!.removeEventListener("cancel", onCancel);
+        };
+    }, [onCancel]);
+
     const openSelector = useCallback(() => {
-        if (inputRef.current) {
-            inputRef.current.value = "";
-            inputRef.current.click();
-        }
+        inputRef.current!.value = "";
+        inputRef.current!.click();
     }, []);
 
     const handleChange: React.ChangeEventHandler<HTMLInputElement> = (