Базовое описание
Компонент для выбора пользователем файла на гаджете и отправки его на сервер через интерфейс
Когда используем
Пример использования можно разделить на два типа. Единичная загрузка (Single uploader) и множественная, Multiuploader. Так же передача файлов может быть синхронной и асинхронной, это настраиваемый параметр.Синхронная – отправляет файлы на сервер вместе с данными формы по сабмиту. Асинхронная – отправляет файлы на сервер сразу после их выбора и позволяет сразу отображать прогресс.
Внешний вид
Внешний вид можно разделить на два два состояния, Single uploader и Multi uploader:
— Компонент представляет из себя область с пунктирной обводкой, ссылкой (Link, Link Button, Button) внутри (при кастомизации предусмотреть текстовые параметры расширение загружаемых файлов, размер) при нажатии на которую даёт возможность открыть шелл ОС.
— Предусмотрен ховер, по области и в момент использования DRAG AND DROP.
— Нумератор Items (приписка снизу Файл 1) формируются согласно числовому порядку, при сокращённом виде Items, данный формат можно опустить, оставив только имя самого файла.
— Компонент представляет из себя область с пунктирной обводкой, ссылкой (Link, Link Button, Button) внутри (при кастомизации предусмотреть текстовые параметры расширение загружаемых файлов, размер) при нажатии на которую даёт возможность открыть шелл ОС.
— Предусмотрен ховер, по области и в момент использования DRAG AND DROP.
— Нумератор Items (приписка снизу Файл 1) формируются согласно числовому порядку, при сокращённом виде Items, данный формат можно опустить, оставив только имя самого файла.
Single uploader
в Multi uploader
— Слишком много файлов ( валидация отрабатывает в случае загрузки ограниченного колличества файлов)
При асинхронной передаче файлов, Items сигнализирует цветом и снекбаром.
— Слишком много файлов ( валидация отрабатывает в случае загрузки ограниченного колличества файлов)
При асинхронной передаче файлов, Items сигнализирует цветом и снекбаром.
Принцип валидации ошибок одинаковый и не зависит от типа, по которому будет происходить загрузка.
— Тип файла (файл не того разрешения)
— Размер файла
— Не загруженный файл (в случае если загрузка обязательна)
При синхронной передачи файла, после сабмита отрабатываем дополнительно снекбар
Ошибки и валидации
Данный формат используется в формах, где файлы или данные формы отправляются на сервер и валидируются сразу после выбора. В нем возможен автоматический старт загрузки и отображения процесса. Предусмотреть настройку прогресса загрузки в кастомизируемых Items
В случае загрузки в режиме Multi Uploader В любой момент загрузки можно прерватьи отменить загрузку. При клике на крестик в Items, он пропадает, отправка прекращается.
В случае загрузки в режиме Multi Uploader В любой момент загрузки можно прерватьи отменить загрузку. При клике на крестик в Items, он пропадает, отправка прекращается.
Асинхронная отправка
Использование данного вида компонента подразумевает случай когда файл отправляется на сервер вместе с остальной информацией в данной контентной области. Такой вид не подразумевает автоматический старт отправки и отображения процесса.
Если требуется единичная загрузка файла, можно выбрать только один файл — Single Uploader. В айтеме предусмотрена возможность удалить выбранный файл. После удаления Single Uploader переходит в стейт компонента для загрузки. В который можно прикрепить новый файл,
а так же перетащить из шелла ОС в пунктирную область посредством DRAG AND DROP.
Если требуется единичная загрузка файла, можно выбрать только один файл — Single Uploader. В айтеме предусмотрена возможность удалить выбранный файл. После удаления Single Uploader переходит в стейт компонента для загрузки. В который можно прикрепить новый файл,
а так же перетащить из шелла ОС в пунктирную область посредством DRAG AND DROP.
Синхронная отправка
— В случае отсутствия файлов на сервере, состояние просмотра будет происходить в режиме «Read only». Превью картинки будет заменено на иконку файла, размер будет нулевой, а имя «file».
— В случае если у файла отсутствует имя файл, по умолчанию система выводит вместоимени файла «file»
— При клике на превью, все файлы открываются в режиме полного просмотра:
1) У jpg, png — просмотр осуществляется в превьюере
2) ПДФ и XLM открываются в нативном браузерном просмотрщике.
— В случае если у файла отсутствует имя файл, по умолчанию система выводит вместоимени файла «file»
— При клике на превью, все файлы открываются в режиме полного просмотра:
1) У jpg, png — просмотр осуществляется в превьюере
2) ПДФ и XLM открываются в нативном браузерном просмотрщике.
Дополнительно
1) Кастомизация Items
2) Кастомизация Uploader.
3) Комбинированный вид, кастомизация Items+Uploader.
3) Комбинированный вид, кастомизация Items+Uploader.
— Itemsрасполагаются ниже Uploader, до того момента пока не будет загруженно количество файлов заложенных в лимит загрузки. После чего компонент Uploader скрывается скрывается.
— Важной частью компонента является возможность кастомизации Items по таким параметрам как:
— Важной частью компонента является возможность кастомизации Items по таким параметрам как:
Multi uploader
— Компонент Uploader скрывается и на месте его появляется в Items загруженного файла.
