"use client"; import { toast } from "sonner"; import { defineSchema, type InferType } from "@buildnbuzz/form-react"; import { Form, FormContent, FormFields, FormSubmit, FormReset, FormActions, } from "@/registry/shadcn/form"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; const documentSchema = defineSchema({ fields: [ { type: "upload", name: "document", label: "Upload Document", description: "PDF, Word, or text files (max 10MB)", maxSize: 10 * 1024 * 1024, ui: { variant: "dropzone", accept: ".pdf,.doc,.docx,.txt", dropzoneText: "Drop your document here or click to browse", }, }, { type: "textarea", name: "notes", label: "Additional Notes", placeholder: "Any notes about this document...", ui: { rows: 3, }, }, ], }); type DocumentSchema = InferType; export default function DocumentUploadForm() { const handleSubmit = async ({ value }: { value: unknown }) => { const data = value as DocumentSchema; await new Promise((r) => setTimeout(r, 1000)); toast("Document uploaded successfully!", { description: (

Check the console for the full File objects.

            
              {JSON.stringify(
                {
                  ...data,
                  document: data.document
                    ? data.document instanceof File
                      ? {
                          name: data.document.name,
                          size: data.document.size,
                          type: data.document.type,
                        }
                      : data.document
                    : null,
                },
                null,
                2,
              )}

), }); }; return ( Document Upload Drag-and-drop file upload with validation ); }