FileUpload

Зона drag&drop з валідацією й прев'ю — без власної upload-логіки.

Зона завантаження без магії: компонент валідує (тип, розмір), прев'юїть одиночний файл і віддає File[] у select. САМ upload не робить — бібліотека не знає вашого бекенду. Фетч, loading і progress керує споживач.

Приклад

Перетягніть файли сюди

або натисніть, щоб обрати

Зображення або PDF, до 10 МБ. Завантаження на сервер — на боці споживача.

API

Props

Назва	Тип	Типово	Опис
`accept`	`string`	`undefined`	Фільтр типів: `image/*,.pdf`. Валідація по MIME або розширенню.
`maxSizeMb`	`number`	`10`	Ліміт розміру файлу в МБ.
`label`	`string`	`"Перетягніть файли сюди"`	Заголовок зони.
`hint`	`string`	`undefined`	Підказка під зоною.
`progress`	`number`	`null`	Прогрес споживача 0–100 — показує смугу.
`error`	`string`	`undefined`	Текст помилки валідації споживача.
`multiple`	`boolean`	`false`	Дозволити кілька файлів.
`disabled`	`boolean`	`false`	—
`loading`	`boolean`	`false`	Стан завантаження споживача: зона показує спінер.

Події

Назва	Payload	Опис
`error`	`[message: string]`	Файл не пройшов валідацію (тип або розмір).
`select`	`[files: File[]]`	Валідні файли після перевірки accept і maxSizeMb.
`remove`	`[file: File]`	Одиночний файл видалено з локального прев'ю.

Слоти

Назва	Опис
`default`	Замінює зону цілком; `open` відкриває системний file picker.
`preview`	Власне прев'ю замість зображення.

Доступно через ref

Назва	Тип	Опис
`open`	`() => void`	Відкрити системний вибір файлу.

Коли використовувати

Аватарки, вкладки до сторінок, імпорт файлів. Прогрес-смуга з'являється, коли споживач передає progress під час запиту.

Коли НЕ використовувати

Не чекайте від компонента мережевих запитів — їх немає і не буде.

Для одного текстового поля «URL зображення» зона надлишкова — потрібен Input з підказкою.

Доступність

Зона — role="button" з tabindex=0: Enter і Space відкривають діалог, як і клік. Невалідний файл не зникає мовчки — error з назвою файлу читається через role="alert". Зона пов'язана з активною помилкою або підказкою через aria-describedby.

Власна зона через default slot отримує open, dragActive, loading і disabled; викликайте open() зі своєї кнопки. Той самий метод доступний через template ref компонента.

Деталі реалізації

Локальне прев'ю — URL.createObjectURL без читання файлу в пам'ять; попередній URL відкликається при новому файлі й у onBeforeUnmount — без цього витік пам'яті. Видалення очищає нативний input, відкликає URL і емітить remove(file); для multiple=true список і далі контролює споживач.