dd

web/apps/photos/src/pages/gallery.tsx

@@ -107,15 +107,8 @@ import { Upload, type UploadTypeSelectorIntent } from "components/Upload";
 import SelectedFileOptions from "components/pages/gallery/SelectedFileOptions";
 import { t } from "i18next";
 import { useRouter, type NextRouter } from "next/router";
-import {
-    createContext,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react";
-import { useDropzone } from "react-dropzone";
+import { createContext, useCallback, useEffect, useRef, useState } from "react";
+import { FileWithPath } from "react-dropzone";
 import { Trans } from "react-i18next";
 import {
     constructEmailList,
@@ -195,19 +188,9 @@ const Page: React.FC = () => {
     const [collectionNamerView, setCollectionNamerView] = useState(false);
     const [shouldDisableDropzone, setShouldDisableDropzone] = useState(false);
     const [isPhotoSwipeOpen, setIsPhotoSwipeOpen] = useState(false);
-
-    const {
-        // A function to call to get the props we should apply to the container,
-        getRootProps: getDragAndDropRootProps,
-        // ... the props we should apply to the <input> element,
-        getInputProps: getDragAndDropInputProps,
-        // ... and the files that we got.
-        acceptedFiles: dragAndDropFilesReadOnly,
-    } = useDropzone({
-        noClick: true,
-        noKeyboard: true,
-        disabled: shouldDisableDropzone,
-    });
+    const [dragAndDropFiles, setDragAndDropFiles] = useState<FileWithPath[]>(
+        [],
+    );
 
     const syncInProgress = useRef(false);
     const syncInterval = useRef<ReturnType<typeof setInterval> | undefined>(
@@ -529,12 +512,6 @@ const Page: React.FC = () => {
         };
     }, [selectAll, clearSelection]);
 
-    // Create a regular array from the readonly array returned by dropzone.
-    const dragAndDropFiles = useMemo(
-        () => [...dragAndDropFilesReadOnly],
-        [dragAndDropFilesReadOnly],
-    );
-
     const showSessionExpiredDialog = () =>
         showMiniDialog(sessionExpiredDialogAttributes(logout));
 
@@ -860,13 +837,13 @@ const Page: React.FC = () => {
             }}
         >
             <FullScreenDropZone
-                getInputProps={getDragAndDropInputProps}
-                getRootProps={getDragAndDropRootProps}
                 message={
                     watchFolderView
                         ? t("watch_folder_dropzone_hint")
                         : undefined
                 }
+                disabled={shouldDisableDropzone}
+                onDrop={setDragAndDropFiles}
             >
                 {blockingLoad && <TranslucentLoadingOverlay />}
                 <PlanSelector

web/packages/gallery/components/FullScreenDropZone.tsx

@@ -2,17 +2,9 @@ import CloseIcon from "@mui/icons-material/Close";
 import { IconButton, Stack, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import React, { useCallback, useEffect, useState } from "react";
-import type { DropzoneState } from "react-dropzone";
+import { type FileWithPath, useDropzone } from "react-dropzone";
 
 interface FullScreenDropZoneProps {
-    /**
-     * The `getInputProps` function returned by a call to {@link useDropzone}.
-     */
-    getInputProps: DropzoneState["getInputProps"];
-    /**
-     * The `getRootProps` function returned by a call to {@link useDropzone}.
-     */
-    getRootProps: DropzoneState["getRootProps"];
     /**
      * Optional override to the message show to the user when a drag is in
      * progress.
@@ -20,6 +12,16 @@ interface FullScreenDropZoneProps {
      * Default: t("upload_dropzone_hint")
      */
     message?: string;
+    /**
+     * If `true`, then drag and drop functionality is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback invoked when the user drags and drops files.
+     *
+     * It will only be called if there is at least one file in {@link files}.
+     */
+    onDrop: (files: FileWithPath[]) => void;
 }
 
 /**
@@ -37,7 +39,26 @@ interface FullScreenDropZoneProps {
  */
 export const FullScreenDropZone: React.FC<
     React.PropsWithChildren<FullScreenDropZoneProps>
-> = ({ getInputProps, getRootProps, message, children }) => {
+> = ({ message, disabled, onDrop, children }) => {
+    const {
+        // A function to call to get the props we should apply to the container,
+        getRootProps,
+        // ... the props we should apply to the <input> element,
+        getInputProps,
+    } = useDropzone({
+        noClick: true,
+        noKeyboard: true,
+        disabled,
+        onDrop(acceptedFiles) {
+            // Invoked the `onDrop` callback only if there is at least 1 file.
+            if (acceptedFiles.length) {
+                // Create a regular array from the readonly array returned by
+                // dropzone.
+                onDrop([...acceptedFiles]);
+            }
+        },
+    });
+
     const [isDragActive, setIsDragActive] = useState(false);
 
     const onDragEnter = useCallback(() => setIsDragActive(true), []);