File Upload

File Upload - компонент для загрузки файлов с поддержкой drag & drop, множественной загрузки и валидации. Идеально подходит для загрузки изображений, документов и других типов файлов.

Базовый пример использования с drag & drop областью.

Варианты (Variants)

FileUpload поддерживает три варианта интерфейса:

Вариант	Описание
dnd-zone	Drag & drop область (по умолчанию)
button-zone	Drag & drop область с кнопкой внутри
button	Только кнопка загрузки

Типы загрузки

Drag & Drop

Перетаскивайте файлы в специальную область для загрузки.

Button Zone

Комбинация drag & drop области с кнопкой для выбора файлов.

Button Variant

Простая кнопка для выбора файлов без drag & drop области.

Ограничения файлов

Загрузка изображений

Ограничение по типу файлов (только изображения) и размеру.

Загрузка документов

Ограничение для загрузки только документов (PDF, DOC, DOCX).

Основные возможности

Controlled

Вы можете контролировать загруженные файлы используя свойства value и onFilesChange.

Disabled

Отключенное состояние блокирует загрузку файлов.

With Validation

Добавьте кастомную валидацию загруженных файлов.

Кастомизация

Custom Texts

Настройте тексты кнопок и заголовков с помощью свойства texts.

Custom Styled

Используйте classNames для кастомизации стилей компонента.

Интеграция с формами

React Hook Form

FileUpload легко интегрируется с React Hook Form через Controller.

Свойства

FileUpload Props

Атрибут	Тип	Описание	По умолчанию
type	`'single' \| 'multiple'`	Тип загрузки: одиночный или множественный	`'single'`
variant	`'dnd-zone' \| 'button-zone' \| 'button'`	Вариант интерфейса	`'dnd-zone'`
title	`string`	Заголовок, отображаемый в области загрузки	-
description	`string`	Описание, отображаемое в области загрузки	-
image	`ReactNode`	Кастомная иконка/изображение для области загрузки	-
maxFiles	`number`	Максимальное количество файлов (для `type="multiple"`)	`1` для single, `5` для multiple
maxSize	`number`	Максимальный размер файла в байтах	`5242880` (5 МБ)
accept	`string`	Допустимые типы файлов (например: `"image/*"`, `".pdf,.doc"`)	`"*"`
value	`FileWithPreview[]`	Массив загруженных файлов (для контролируемого компонента)	-
onFilesChange	`(files: FileWithPreview[]) => void`	Коллбэк при изменении списка файлов	-
onFilesAdded	`(files: FileWithPreview[]) => void`	Коллбэк при добавлении новых файлов	-
disabled	`boolean`	Отключить загрузку файлов	`false`
showFileList	`boolean`	Показать список загруженных файлов	`true`
texts	`FileUploadTexts`	Кастомные тексты для элементов интерфейса	См. ниже
classNames	`SlotsToClasses<FileUploadSlots>`	Кастомные классы для слотов	-

FileUploadTexts

Ключ	Описание	По умолчанию
uploadFile	Текст кнопки загрузки	`"Загрузить файл"`
addFiles	Текст кнопки добавления файлов	`"Добавить файлы"`
removeAll	Текст кнопки удаления всех файлов	`"Удалить все"`
files	Заголовок списка файлов	`"Файлы"`