Add ability to paste in image dropzone (#20310)

Primarily used in the face library, now users can use ctrl/meta-v to paste images from the clipboard in an image entry field

web/public/locales/en/views/faceLibrary.json

@@ -66,7 +66,7 @@
       "selectImage": "Please select an image file."
     },
     "dropActive": "Drop the image here…",
-    "dropInstructions": "Drag and drop an image here, or click to select",
+    "dropInstructions": "Drag and drop or paste an image here, or click to select",
     "maxSize": "Max size: {{size}}MB"
   },
   "nofaces": "No faces available",

web/src/components/input/ImageEntry.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -30,6 +30,23 @@ export default function ImageEntry({
 }: ImageEntryProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
   const [preview, setPreview] = useState<string | null>(null);
+  const dropzoneRef = useRef<HTMLDivElement>(null);
+
+  // Auto focus the dropzone
+  useEffect(() => {
+    if (dropzoneRef.current && !preview) {
+      dropzoneRef.current.focus();
+    }
+  }, [preview]);
+
+  // Clean up preview URL on unmount or preview change
+  useEffect(() => {
+    return () => {
+      if (preview) {
+        URL.revokeObjectURL(preview);
+      }
+    };
+  }, [preview]);
 
   const formSchema = z.object({
     file: z
@@ -52,9 +69,6 @@ export default function ImageEntry({
         // Create preview
         const objectUrl = URL.createObjectURL(file);
         setPreview(objectUrl);
-
-        // Clean up preview URL when component unmounts
-        return () => URL.revokeObjectURL(objectUrl);
       }
     },
     [form],
@@ -68,6 +82,31 @@ export default function ImageEntry({
       multiple: false,
     });
 
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const clipboardItems = Array.from(event.clipboardData.items);
+      for (const item of clipboardItems) {
+        if (item.type.startsWith("image/")) {
+          const blob = item.getAsFile();
+          if (blob && blob.size <= maxSize) {
+            const mimeType = blob.type.split("/")[1];
+            const extension = `.${mimeType}`;
+            if (accept["image/*"].includes(extension)) {
+              const fileName = blob.name || `pasted-image.${mimeType}`;
+              const file = new File([blob], fileName, { type: blob.type });
+              form.setValue("file", file, { shouldValidate: true });
+              const objectUrl = URL.createObjectURL(file);
+              setPreview(objectUrl);
+              return; // Take the first valid image
+            }
+          }
+        }
+      }
+    },
+    [form, maxSize, accept],
+  );
+
   const onSubmit = useCallback(
     (data: z.infer<typeof formSchema>) => {
       if (!data.file) return;
@@ -90,7 +129,12 @@ export default function ImageEntry({
           render={() => (
             <FormItem>
               <FormControl>
-                <div className="w-full">
+                <div
+                  className="w-full"
+                  onPaste={handlePaste}
+                  tabIndex={0}
+                  ref={dropzoneRef}
+                >
                   {!preview ? (
                     <div
                       {...getRootProps()}