File Upload

import { fileType, fileSize, fileCount } from '@macrulez/vue-form-schema'

const schema: FieldDefinition[] = [
  {
    type: 'file',
    name: 'avatar',
    label: 'Profile photo',
    accept: 'image/*',
    validators: [
      fileType(['image/'], 'Only images are accepted'),
      fileSize(2 * 1024 * 1024, 'Max 2 MB'),
    ],
  },
  {
    type: 'file',
    name: 'attachments',
    label: 'Attachments',
    multiple: true,
    validators: [fileCount(5, 'Up to 5 files')],
  },
]

values['avatar'] is File | null; values['attachments'] is File[] | null.

FormRenderer automatically renders FileField with a drag-and-drop zone and a file list with remove buttons.

FieldDefinition file options

accept

string

Passed to <input accept> — MIME types or extensions, e.g. 'image/*,.pdf'.

multiple

boolean

Allow selecting multiple files.

maxSize

number

Maximum file size in bytes — informational only; use the fileSize validator to actually enforce it.

maxFiles

number

Maximum number of files (only relevant when multiple: true) — informational only; use the fileCount validator to actually enforce it.

Validation itself is handled by the fileType, fileSize, and fileCount built-in validators — accept/maxSize/maxFiles above only control the native file picker and are not enforced on their own.