Skip to content

Загрузка файлов

ts
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'] — это File | null; values['attachments'] — это File[] | null.

FormRenderer автоматически рендерит FileField с зоной drag-and-drop и списком файлов с кнопками удаления.

Опции поля FieldDefinition для файлов

accept

string

Передаётся в <input accept> — MIME-типы или расширения, например 'image/*,.pdf'.

multiple

boolean

Разрешить выбор нескольких файлов.

maxSize

number

Максимальный размер файла в байтах — только информационно; для реального ограничения используйте валидатор fileSize.

maxFiles

number

Максимальное количество файлов (актуально только при multiple: true) — только информационно; для реального ограничения используйте валидатор fileCount.

Сама валидация выполняется встроенными валидаторами fileType, fileSize и fileCountaccept/maxSize/maxFiles выше управляют только нативным диалогом выбора файла и сами по себе ничего не ограничивают.