@letar/forms

File Upload

Upload files with button, dropzone, or input variants

Basic Upload

const Schema = z.object({
  avatar: z.any().optional().meta({
    ui: { title: 'Profile Photo' },
  }),
})

<Form.Field.FileUpload name="avatar" accept="image/*" />

Multiple Files

<Form.Field.FileUpload name="documents" maxFiles={5} />

Dropzone Variant

<Form.Field.FileUpload name="files" variant="dropzone" accept="image/*,.pdf" maxSize={5 * 1024 * 1024} />

Props

PropTypeDescription
acceptstringAccepted file types (image/*, .pdf)
maxFilesnumberMaximum number of files
maxSizenumberMaximum file size in bytes
variant'button' | 'dropzone'Upload UI variant

On this page