diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index be321594f4..c8f2d3e3d3 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -861,15 +861,14 @@ const Page: React.FC = () => {
             }}
         >
             <FullScreenDropZone
-                {...{ getDragAndDropRootProps }}
+                getInputProps={getDragAndDropInputProps}
+                getRootProps={getDragAndDropRootProps}
                 message={
                     watchFolderView
                         ? t("watch_folder_dropzone_hint")
                         : undefined
                 }
             >
-                <input {...getDragAndDropInputProps()} />
-
                 {blockingLoad && <TranslucentLoadingOverlay />}
                 <PlanSelector
                     {...planSelectorVisibilityProps}
diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx
index b170192ca1..a6212f42a7 100644
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -490,8 +490,10 @@ export default function PublicCollectionGallery() {
 
     return (
         <PublicCollectionGalleryContext.Provider value={context}>
-            <FullScreenDropZone {...{ getDragAndDropRootProps }}>
-                <input {...getDragAndDropInputProps()} />
+            <FullScreenDropZone
+                getInputProps={getDragAndDropInputProps}
+                getRootProps={getDragAndDropRootProps}
+            >
                 <NavbarBase
                     sx={{
                         mb: "16px",
diff --git a/web/packages/gallery/components/FullScreenDropZone.tsx b/web/packages/gallery/components/FullScreenDropZone.tsx
index eab7da7be2..a226c7d600 100644
--- a/web/packages/gallery/components/FullScreenDropZone.tsx
+++ b/web/packages/gallery/components/FullScreenDropZone.tsx
@@ -5,10 +5,14 @@ import React, { useCallback, useEffect, useState } from "react";
 import type { DropzoneState } 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}.
      */
-    getDragAndDropRootProps: DropzoneState["getRootProps"];
+    getRootProps: DropzoneState["getRootProps"];
     /**
      * Optional override to the message show to the user when a drag is in
      * progress.
@@ -33,7 +37,7 @@ interface FullScreenDropZoneProps {
  */
 export const FullScreenDropZone: React.FC<
     React.PropsWithChildren<FullScreenDropZoneProps>
-> = ({ getDragAndDropRootProps, message, children }) => {
+> = ({ getInputProps, getRootProps, message, children }) => {
     const [isDragActive, setIsDragActive] = useState(false);
 
     const onDragEnter = useCallback(() => setIsDragActive(true), []);
@@ -50,10 +54,8 @@ export const FullScreenDropZone: React.FC<
 
     return (
         <>
-            <Stack
-                sx={{ flex: 1 }}
-                {...getDragAndDropRootProps({ onDragEnter })}
-            >
+            <input {...getInputProps()} />
+            <Stack sx={{ flex: 1 }} {...getRootProps({ onDragEnter })}>
                 {isDragActive && (
                     <DropZoneOverlay
                         onDrop={onDragLeave}