"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 profileSchema = defineSchema({ fields: [ { type: "upload", name: "avatar", label: "Profile Picture", description: "Upload a profile photo", ui: { variant: "avatar", shape: "circle", size: "lg", accept: "image/*", }, }, { type: "text", name: "name", label: "Display Name", placeholder: "Your name", required: true, }, { type: "email", name: "email", label: "Email", placeholder: "you@example.com", required: true, }, ], }); type ProfileSchema = InferType; export default function ProfileUploadForm() { const handleSubmit = async ({ value }: { value: unknown }) => { const data = value as ProfileSchema; await new Promise((r) => setTimeout(r, 1000)); toast("Profile saved successfully!", { description: (

Check the console for the full File objects.

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

), }); }; return ( Profile Settings Avatar upload with circle preview layout ); }