From 71a81e24ecdcafa8851a746f47075ab17fdf8601 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 22 Nov 2024 07:44:59 -0700
Subject: [PATCH] Add ability to select file

---
 web/src/pages/FaceLibrary.tsx | 40 +++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 419692a0b..4a0dfa20e 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -1,12 +1,19 @@
 import { baseUrl } from "@/api/baseUrl";
 import Chip from "@/components/indicators/Chip";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import useOptimisticState from "@/hooks/use-optimistic-state";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop } from "react-device-detect";
+import { useForm } from "react-hook-form";
+import { FaPlus } from "react-icons/fa";
 import { LuTrash } from "react-icons/lu";
 import useSWR from "swr";
+import { z } from "zod";
 
 export default function FaceLibrary() {
   const [page, setPage] = useState<string>();
@@ -34,6 +41,24 @@ export default function FaceLibrary() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [faces]);
 
+  /**
+     * <Button className="flex gap-2" variant="select" size="sm">
+            <FaPlus />
+            Upload Image
+          </Button>
+     */
+
+  const formSchema = z.object({
+    image: z
+      .instanceof(File, { message: "Please select an image file." })
+      .refine((file) => file.size < 1000000, "Image size is too large."),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+  });
+
   return (
     <div className="flex size-full flex-col p-2">
       <div className="relative flex h-11 w-full items-center justify-between">
@@ -65,6 +90,21 @@ export default function FaceLibrary() {
             <ScrollBar orientation="horizontal" className="h-0" />
           </div>
         </ScrollArea>
+        <Form {...form}>
+          <form>
+            <FormField
+              control={form.control}
+              name="image"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input type="file" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
       </div>
       {pageToggle && (
         <div className="flex gap-2">