file-upload-form-demo

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import { CloudUpload, X } from "lucide-react";
5import * as React from "react";
6import { useForm } from "react-hook-form";
7import { toast } from "sonner";
8import * as z from "zod";
9import { Button } from "@/registry/bases/base/ui/button";
10import {
11  FileUpload,
12  FileUploadDropzone,
13  FileUploadItem,
14  FileUploadItemDelete,
15  FileUploadItemMetadata,
16  FileUploadItemPreview,
17  FileUploadList,
18  FileUploadTrigger,
19} from "@/registry/bases/base/ui/file-upload";
20import {
21  Form,
22  FormControl,
23  FormDescription,
24  FormField,
25  FormItem,
26  FormLabel,
27  FormMessage,
28} from "@/registry/bases/base/ui/form";
29 
30const formSchema = z.object({
31  files: z
32    .array(z.custom<File>())
33    .min(1, "Please select at least one file")
34    .max(2, "Please select up to 2 files")
35    .refine((files) => files.every((file) => file.size <= 5 * 1024 * 1024), {
36      message: "File size must be less than 5MB",
37      path: ["files"],
38    }),
39});
40 
41type FormValues = z.infer<typeof formSchema>;
42 
43export default function FileUploadFormDemo() {
44  const form = useForm<FormValues>({
45    resolver: zodResolver(formSchema),
46    defaultValues: {
47      files: [],
48    },
49  });
50 
51  const onSubmit = React.useCallback((data: FormValues) => {
52    toast("Submitted values:", {
53      description: (
54        <pre className="mt-2 w-80 rounded-md bg-accent/30 p-4 text-accent-foreground">
55          <code>
56            {JSON.stringify(
57              data.files.map((file) =>
58                file.name.length > 25
59                  ? `${file.name.slice(0, 25)}...`
60                  : file.name,
61              ),
62              null,
63              2,
64            )}
65          </code>
66        </pre>
67      ),
68    });
69  }, []);
70 
71  return (
72    <Form {...form}>
73      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md">
74        <FormField
75          control={form.control}
76          name="files"
77          render={({ field }) => (
78            <FormItem>
79              <FormLabel>Attachments</FormLabel>
80              <FormControl>
81                <FileUpload
82                  value={field.value}
83                  onValueChange={field.onChange}
84                  accept="image/*"
85                  maxFiles={2}
86                  maxSize={5 * 1024 * 1024}
87                  onFileReject={(_, message) => {
88                    form.setError("files", {
89                      message,
90                    });
91                  }}
92// … truncated