{
  "name": "file-upload-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers/zod",
    "zod"
  ],
  "registryDependencies": [
    "button",
    "file-upload",
    "form"
  ],
  "files": [
    {
      "path": "examples/file-upload-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { CloudUpload, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport * as z from \"zod\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  FileUpload,\n  FileUploadDropzone,\n  FileUploadItem,\n  FileUploadItemDelete,\n  FileUploadItemMetadata,\n  FileUploadItemPreview,\n  FileUploadList,\n  FileUploadTrigger,\n} from \"@/registry/bases/radix/ui/file-upload\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/radix/ui/form\";\n\nconst formSchema = z.object({\n  files: z\n    .array(z.custom<File>())\n    .min(1, \"Please select at least one file\")\n    .max(2, \"Please select up to 2 files\")\n    .refine((files) => files.every((file) => file.size <= 5 * 1024 * 1024), {\n      message: \"File size must be less than 5MB\",\n      path: [\"files\"],\n    }),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport default function FileUploadFormDemo() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      files: [],\n    },\n  });\n\n  const onSubmit = React.useCallback((data: FormValues) => {\n    toast(\"Submitted values:\", {\n      description: (\n        <pre className=\"mt-2 w-80 rounded-md bg-accent/30 p-4 text-accent-foreground\">\n          <code>\n            {JSON.stringify(\n              data.files.map((file) =>\n                file.name.length > 25\n                  ? `${file.name.slice(0, 25)}...`\n                  : file.name,\n              ),\n              null,\n              2,\n            )}\n          </code>\n        </pre>\n      ),\n    });\n  }, []);\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"files\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Attachments</FormLabel>\n              <FormControl>\n                <FileUpload\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  accept=\"image/*\"\n                  maxFiles={2}\n                  maxSize={5 * 1024 * 1024}\n                  onFileReject={(_, message) => {\n                    form.setError(\"files\", {\n                      message,\n                    });\n                  }}\n                  multiple\n                >\n                  <FileUploadDropzone className=\"flex-row flex-wrap border-dotted text-center\">\n                    <CloudUpload className=\"size-4\" />\n                    Drag and drop or\n                    <FileUploadTrigger asChild>\n                      <Button variant=\"link\" size=\"sm\" className=\"p-0\">\n                        choose files\n                      </Button>\n                    </FileUploadTrigger>\n                    to upload\n                  </FileUploadDropzone>\n                  <FileUploadList>\n                    {field.value?.map((file, index) => (\n                      <FileUploadItem key={index} value={file}>\n                        <FileUploadItemPreview />\n                        <FileUploadItemMetadata />\n                        <FileUploadItemDelete asChild>\n                          <Button\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-7\"\n                          >\n                            <X />\n                            <span className=\"sr-only\">Delete</span>\n                          </Button>\n                        </FileUploadItemDelete>\n                      </FileUploadItem>\n                    ))}\n                  </FileUploadList>\n                </FileUpload>\n              </FormControl>\n              <FormDescription>\n                Upload up to 2 images up to 5MB each.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"mt-4\">\n          Submit\n        </Button>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}