"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 gallerySchema = defineSchema({ fields: [ { type: "upload", name: "images", label: "Product Images", description: "Upload up to 6 product images", hasMany: true, max: 6, ui: { variant: "gallery", accept: "image/*", shape: "rounded", }, }, ], }); type GallerySchema = InferType; export default function GalleryUploadForm() { const handleSubmit = async ({ value }: { value: unknown }) => { const data = value as GallerySchema; await new Promise((r) => setTimeout(r, 1000)); const filesInfo = Array.isArray(data.images) ? data.images.map((img) => img instanceof File ? { name: img.name, size: img.size, type: img.type } : img, ) : []; toast("Images saved!", { description: (

Check the console for the full File objects.

            {JSON.stringify({ ...data, images: filesInfo }, null, 2)}

), }); }; return ( Product Gallery Multi-file upload with thumbnail grid preview ); }