Поле выбора файла — элемент интерфейса, который позволяет пользователю загружать файлы, в контексте нашего учебника — на сайт. Это немного более сложный компонент, ведь он сочетает в себе стандартный механизм выбора файлов и возможность перетаскивания файлов в область загрузки.
Базовая анатомия
Поле выбора файла включает в себя кнопку выбора файла, текстовое описание поддерживаемых форматов и область для отображения загруженных файлов. В расширенном варианте добавляется область перетаскивания с визуальной подсказкой.
Области взаимодействия
Область перетаскивания делается достаточно большой для удобства использования, не меньше 100×100 пикселей. Кнопка выбора файла должна соответствовать вышеизложенным стандартам для области касания. Стоит продумать способ удаления и приемлемое расстояние между загруженными файлами.
Поле выбора файла имеет несколько состояний, которые помогают пользователю узнать, как работает процесс загрузки, и считывать доступные действия.
Default
В обычном состоянии компонент показывает кнопку выбора и описание допустимых типов файлов. Область перетаскивания стандартно имеет пунктирную границу.
Hover
При наведении на область загрузки должен появляться небольшой визуальный отклик, например, подсветка или изменение фона.
Active
Во время перетаскивания файла область загрузки должна активно реагировать, показывая готовность принять файл. Не забудьте о том, что в момент загрузки файла нам стоит еще раз подтвердить пользователю, что его файлы загружаются. Сделать это можно с помощью индикатора прогресса.
Disabled
Неактивное состояние возникает, когда загрузка файлов временно недоступна, и все интерактивные элементы должны это продемонстрировать.
