use react-dropzone with preview when uploading new face

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

@@ -1,6 +1,7 @@
 {
   "description": {
-    "addFace": "Walk through adding a new face to the Face Library."
+    "addFace": "Walk through adding a new collection to the Face Library.",
+    "placeholder": "Enter a name for this collection"
   },
   "details": {
     "person": "Person",
@@ -15,8 +16,8 @@
     "desc": "Upload an image to scan for faces and include for {{pageToggle}}"
   },
   "createFaceLibrary": {
-    "title": "Create Face Library",
-    "desc": "Create a new face library",
+    "title": "Create Collection",
+    "desc": "Create a new collection",
     "new": "Create New Face",
     "nextSteps": "It is recommended to use the Train tab to select and train images for each person as they are detected. When building a strong foundation it is strongly recommended to only train on images that are straight-on. Ignore images from cameras that recognize faces from an angle."
   },
@@ -28,7 +29,7 @@
   "selectFace": "Select Face",
   "deleteFaceLibrary": {
     "title": "Delete Name",
-    "desc": "Are you sure you want to delete {{name}}? This will permanently delete all associated faces."
+    "desc": "Are you sure you want to delete the collection {{name}}? This will permanently delete all associated faces."
   },
   "button": {
     "deleteFaceAttempts": "Delete Face Attempts",
@@ -36,6 +37,14 @@
     "uploadImage": "Upload Image",
     "reprocessFace": "Reprocess Face"
   },
+  "imageEntry": {
+    "validation": {
+      "selectImage": "Please select an image file."
+    },
+    "dropActive": "Drop the image here...",
+    "dropInstructions": "Drag and drop an image here, or click to select",
+    "maxSize": "Max size: {{size}}MB"
+  },
   "readTheDocs": "Read the documentation to view more details on refining images for the Face Library",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",

web/src/components/input/ImageEntry.tsx

@@ -1,38 +1,82 @@
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useCallback } from "react";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
-
+import { useTranslation } from "react-i18next";
+import { LuUpload, LuX } from "react-icons/lu";
 import { z } from "zod";
 
 type ImageEntryProps = {
   onSave: (file: File) => void;
   children?: React.ReactNode;
+  maxSize?: number;
+  accept?: Record<string, string[]>;
 };
-export default function ImageEntry({ onSave, children }: ImageEntryProps) {
+
+export default function ImageEntry({
+  onSave,
+  children,
+  maxSize = 10 * 1024 * 1024, // 10MB default
+  accept = { "image/*": [".jpeg", ".jpg", ".png", ".gif", ".webp"] },
+}: ImageEntryProps) {
+  const { t } = useTranslation(["views/faceLibrary"]);
+  const [preview, setPreview] = useState<string | null>(null);
+
   const formSchema = z.object({
-    file: z.instanceof(FileList, { message: "Please select an image file." }),
+    file: z.instanceof(File, { message: "Please select an image file." }),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
-  const fileRef = form.register("file");
 
-  // upload handler
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        const file = acceptedFiles[0];
+        form.setValue("file", file, { shouldValidate: true });
+
+        // Create preview
+        const objectUrl = URL.createObjectURL(file);
+        setPreview(objectUrl);
+
+        // Clean up preview URL when component unmounts
+        return () => URL.revokeObjectURL(objectUrl);
+      }
+    },
+    [form],
+  );
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject } =
+    useDropzone({
+      onDrop,
+      maxSize,
+      accept,
+      multiple: false,
+    });
 
   const onSubmit = useCallback(
     (data: z.infer<typeof formSchema>) => {
-      if (!data["file"] || Object.keys(data.file).length == 0) {
-        return;
-      }
-
-      onSave(data["file"]["0"]);
+      if (!data.file) return;
+      onSave(data.file);
     },
     [onSave],
   );
 
+  const clearSelection = () => {
+    form.reset();
+    setPreview(null);
+  };
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -42,16 +86,55 @@ export default function ImageEntry({ onSave, children }: ImageEntryProps) {
           render={() => (
             <FormItem>
               <FormControl>
-                <Input
-                  className="aspect-video h-40 w-full"
-                  type="file"
-                  {...fileRef}
-                />
+                <div className="w-full">
+                  {!preview ? (
+                    <div
+                      {...getRootProps()}
+                      className={cn(
+                        "flex h-40 flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors",
+                        isDragActive && "border-primary bg-primary/5",
+                        isDragReject && "border-destructive bg-destructive/5",
+                        "cursor-pointer hover:border-primary hover:bg-primary/5",
+                      )}
+                    >
+                      <input {...getInputProps()} />
+                      <LuUpload className="mb-2 h-10 w-10 text-muted-foreground" />
+                      <p className="text-center text-sm text-muted-foreground">
+                        {isDragActive
+                          ? t("imageEntry.dropActive")
+                          : t("imageEntry.dropInstructions")}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {t("imageEntry.maxSize", {
+                          size: Math.round(maxSize / (1024 * 1024)),
+                        })}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="relative h-40 w-full">
+                      <img
+                        src={preview}
+                        alt="Preview"
+                        className="h-full w-full rounded-lg border object-contain"
+                      />
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        size="icon"
+                        className="absolute right-2 top-2 size-5 rounded-full"
+                        onClick={clearSelection}
+                      >
+                        <LuX className="size-3" />
+                      </Button>
+                    </div>
+                  )}
+                </div>
               </FormControl>
+              <FormMessage />
             </FormItem>
           )}
         />
-        {children}
+        <div className="mt-4 flex justify-end">{children}</div>
       </form>
     </Form>
   );