feat: add file upload to NewFindingForm

vacuumlabs · May 3, 2024 · 5974d8f · 5974d8f
1 parent e4eee1f
commit 5974d8f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/app/finding/new/page.tsx b/src/app/finding/new/page.tsx
@@ -8,7 +8,7 @@ const NewFindingPage = async () => {
   await prefetchGetPublicContests({type: 'current'})
 
   return (
-    <main className="flex max-w-screen-lg flex-col gap-8 px-10 py-[30px]">
+    <main className="flex max-w-screen-lg flex-col gap-8 px-10 pb-20 pt-10">
       <h1 className="text-3xl font-semibold">New Finding</h1>
       <HydrationBoundary>
         <NewFindingForm />

diff --git a/src/components/sections/finding/NewFindingForm.tsx b/src/components/sections/finding/NewFindingForm.tsx
@@ -24,10 +24,15 @@ import {FindingStatus} from '@/server/db/models'
 import {useGetPublicContests} from '@/lib/queries/contest/getContests'
 import {AsyncCombobox} from '@/components/ui/Combobox'
 import {toast} from '@/components/ui/Toast'
+import Dropzone from '@/components/ui/Dropzone'
 
-const formSchema = addFindingSchema.omit({
-  status: true,
-})
+const formSchema = addFindingSchema
+  .omit({
+    status: true,
+  })
+  .extend({
+    attachments: z.instanceof(File).array().optional(),
+  })
 
 type FormValues = z.infer<typeof formSchema>
 
@@ -54,14 +59,16 @@ const NewFindingForm = () => {
 
   const {handleSubmit} = form
 
-  const getOnSubmit = (status: AddFindingStatus) => (values: FormValues) => {
-    mutate(
-      {finding: {...values, status}, attachments: []},
-      {
-        onSuccess: () => toast({title: 'Finding added.'}),
-      },
-    )
-  }
+  const getOnSubmit =
+    (status: AddFindingStatus) =>
+    ({attachments, ...values}: FormValues) => {
+      mutate(
+        {finding: {...values, status}, attachments},
+        {
+          onSuccess: () => toast({title: 'Finding added.'}),
+        },
+      )
+    }
 
   return (
     <Form {...form}>
@@ -142,6 +149,22 @@ const NewFindingForm = () => {
           </FormItem>
         )}
       />
+      <FormField
+        control={form.control}
+        name="attachments"
+        render={({field}) => (
+          <FormItem>
+            <FormLabel>Attachments</FormLabel>
+            <FormControl>
+              <Dropzone
+                {...field}
+                message="Drag and drop or select multiple files"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
       <div className="flex gap-2">
         <Button
           variant="secondary"