Основное
 Установка Версионирование Темизация Локализация Типографика Дизайн-токены Иконки Схематики Руководство по обновлению
Компоненты
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Updated Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Ellipsis center Empty state File upload Filter Bar Flag Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link Updated List Markdown Modal Navbar Notification Center Overflow items Overlay Updated Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Updated Tree select Username Updated
Другое
 Date formatter Filesize formatter Forms Number formatter Validation Умный поиск
Язык интерфейса и примеров
Русский, English
Версия
21.0.1
File upload
Исходный код

Локализация компонента

Если вычислять [localeOverrides] от активной локали, свои надписи продолжают следовать за setLocale(). Чтобы поменять их во всём приложении, зарегистрируйте их как данные локали через KBQ_LOCALE_DATA в корневых провайдерах — там их читает KbqLocaleService.

Add photos
Drag here or
StackBlitz

Привязка [localeOverrides] меняет только переданные надписи и только у этого компонента. Остальные остаются как есть и продолжают следовать за выбранным языком. Значение задаётся по секциям, поэтому надписи кладутся в fileUpload.single или fileUpload.multiple.

Submit security files
Drop reports here or
Drag here or
StackBlitz

Неопределенный индикатор прогресса

Пример загрузки файлов с неопределенным по завершенности прогрессом:

Drag here or
Drag here
or
StackBlitz

Сигналы

Пример загрузчика файлов с использованием signal. После загрузки файл подсвечивается как ошибочный - это симуляция обработки файла.

Drag here or
Drag here
or
StackBlitz

Реактивные формы

Пример загрузчика файлов с использованием FormControl.

Drag here or
StackBlitz

Валидация: дополнительные примеры

В примерах используется FileValidators - это набор статических методов для валидации поля загрузки файлов.

Обязательное поле

  • Один файл: Пример загрузчика, проверяющего, что файл обязательно должен быть загружен.
Drag here or
StackBlitz
  • Несколько файлов: Пример загрузчика, который требует обязательной загрузки нескольких файлов.
Drag here
or
StackBlitz

Валидация размера файла

  • Один файл: Пример загрузки одного файла с применением Reactive Forms для проверки данных.
Drag here or
The file size should not exceed 5 MB
StackBlitz
  • Несколько файлов: Пример загрузки нескольких файлов с использованием Reactive Forms и встроенной валидации.
Drag here
or
The file size should not exceed 5 MB
StackBlitz

Валидация типа или расширения файла

  • Один файл: Пример загрузки одного файла с применением Reactive Forms для проверки данных.
Drag here or
File with TXT extension is allowed
StackBlitz
  • Несколько файлов: Пример загрузки нескольких файлов с использованием Reactive Forms и валидации.
Drag here
or
Files with TXT extension are allowed
StackBlitz

Проверка файла: обязательность и расширение

  • Один файл: Пример загрузки одного файла с применением Reactive Forms для проверки данных.
Drag here or
Files with TXT extension are allowed
StackBlitz
  • Несколько файлов: Пример загрузки нескольких файлов с использованием Reactive Forms и валидации.
Drag here
or
Files with TXT extension are allowed
StackBlitz

Асинхронная валидация

  • Пример проверки контента при загрузке одного файла с использование Reactive Forms.
Drag here or
Only TXT files with up to 100 lines are allowed
StackBlitz

Примитивы

Пример демонстрирует применение примитивов компонента загрузки файлов.

Click to upload or drag and drop
StackBlitz

Дроп-зона

Drop files here
StackBlitz
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.