FileUpload
Headless-компонент выбора и загрузки файлов из @reformer/cdk: Root / Trigger / Dropzone /
ItemGroup / Item (+ ItemPreview, ItemName, ItemSize, ItemProgress, ItemDeleteTrigger,
ItemRetryTrigger) / ClearTrigger. Видимой разметки и стилей не навязывает — её дают слоты и
ваша вёрстка. Готовый визуальный вариант — FileUpload из @reformer/ui-kit.
Работает в двух режимах значения поля:
- deferred —
uploaderне задан: значение поляFile[], файлы уходят на сервер при отправке формы (обычноFormData); - immediate — задан
uploader: файлы загружаются сразу при выборе, значение поля — сериализуемые дескрипторыRemoteFileRef[](только успешно загруженные). Они переживают черновики, JSON-схему и повторное открытие формы с уже загруженными файлами.
Пустой список эмитится как null, поэтому required() и валидаторы файлов из
@reformer/core/validators работают без изменений.
Что компонент берёт на себя:
- Отбор —
accept,maxFiles, лимиты размеров, дубликаты и свойvalidateдействуют на выбор в пикере, drag-and-drop и вставку из буфера. Отклонённый файл в значение не попадает — уходит вonRejectсо всеми нарушениями сразу. Текста у нарушения нет, толькоcodeиparams, как у правил ядра: текст даёт словарь формы черезuseIssueMessageResolver. - Загрузку — прогресс, повтор упавшей загрузки, отмена через
AbortSignalпри удалении строки и размонтировании. Загрузчик ваш: XHR, tus, presigned S3 — что угодно, возвращающее дескриптор. - Доступность — настоящий скрытый
<input type="file">(подпись, клик иfocus()работают нативно), роли списка и строк,aria-live-регион статусов на языке активной локали.
Для полностью своей разметки есть хук useFileUpload с prop-getters, а для тестов и своих обёрток —
чистое ядро состояния без React: fileUploadReducer, selectFiles, projectValue,
reconcileItems.
Variants — готовые конфигурации компонента: один и тот же компонент с разными преднастроенными пропсами. Витрина состояний (напр. обычный Select и Select с расширенной информацией — два варианта).
Examples — приёмы в коде: как решить задачу. Напр. как разные Data Provider’ы работают с компонентом (рецепты использования).