Отправка файла на сервер FileUploader
Контрол для выбора пользователем файла на компьютере и отображения статуса его отправки на сервер.
Синхронная и асинхронная отправка
Контрол может работать в двух режимах: синхронном – отправляет файлы на сервер вместе с данными формы по сабмиту и асинхронном – отправляет файлы на сервер сразу после их выбора и позволяет сразу отобразить прогресс. В каждом из этих режимов можно включить мультивыбор — когда контрол позволит выбрать и отобразит сразу несколько файлов.
Синхронная отправка
Используйте этот вид контрола в формах, где файл отправляется на сервер вместе с остальными данными формы. Такой вид не подразумевает автоматический старт отправки и отображения процесса.
Когда мультивыбор отключен, можно выбрать только один файл. Клик в ссылку открывает диалог выбора нового файла взамен выбранного. Клик на крестик отменяет выбор и сбрасывает контрол. Так же можно перетащить новый файл в зону драг-н-дропа — выбранный ранее файл заменится новым.
![](img/file-uploader-img-01.png)
Когда мультивыбор включен, выбранные файлы показываются новыми строками, выбор каждого можно отменить независимо от остальных. Контрол выбора всегда дублируется в конце списка:
![](img/file-uploader-img-02.png)
Если есть такая возможность, выводите дополнительную информацию о выбранных файлах, превью картинки, иконку типа файла и его размер:
![](img/file-uploader-img-03.png)
Пример заполненной формы с таким полем:
![](img/file-uploader-img-04.png)
Асинхронная отправка
Такой режим можно использовать в формах, где файлы или данные формы отправляются на сервер и валидируются сразу после выбора. В нем возможен автоматический старт загрузки и отображения процесса:
![](img/file-uploader-img-05.png)
В любой момент можно прервать и отменить отправку. При наведении на строку появляется крестик для отмены и удаления файла. При клике на крестик контрол возвращается в исходное состояние, отправка прекращается, если она завершилась — файл удаляется.
![](img/file-uploader-img-06.png)
Если файл успешно отправлен спиннер меняется на галку:
![](img/file-uploader-img-07.png)
В режиме мультивыбора контрол выбора всегда дублируется в конце списка:
![](img/file-uploader-img-08.png)
Если есть возможность отображать прогресс отправки файла, можно заменить спиннеры на прогресс-ринг:
![](img/file-uploader-img-09.png)
Или прогресс-бар:
![](img/file-uploader-img-10.png)
Отображение ошибок
При ошибках, которые относятся к конкретным файлам название файла подсвечивается красным, при наведении или фокусе на строку появляется тултип с текстом ошибки. Например, сервер вернул ошибку:
![](img/file-uploader-img-12.png)
Если нужны файлы определенного формата ограничьте их на этапе выбора — это лучше чем показать ошибку после выбора. Если это невозможно — помечайте неправильный файл:
![](img/file-uploader-img-13.png)
При общих ошибках, которые не могут быть отнесены к определенному файлу красным подсвечивается контрол выбора — появляется красная обводка как у полей с ошибкой. Например, когда превышен объем файлов:
![](img/file-uploader-img-14.png)
Если есть ограничения по размеру и формату файлов, обозначайте сразу в виде комментария под контролом. При достижении лимита по количеству файлов — блокируйте контрол, не давая пользователю совершать лишнее действие, которое приведёт к ошибке. Предупредите пользователя об ограничениях — это сделает интерфейс дружелюбнее.
Дизайн
Состояние по умолчанию:
![](img/file-uploader-img-15.png)
Наведение на контрол:
![](img/file-uploader-img-16.png)
Вид при перетаскивании файлов:
![](img/file-uploader-img-17.png)
Файл выбран:
![](img/file-uploader-img-18.png)
Если имя файла не входит, скрываются символы в центре, а при наведении на контрол появлется хинт с полным именем:
![](img/file-uploader-img-19.png)
В асинхронном варианте скрытие символов работает так же:
![](img/file-uploader-img-20.png)
Фокус с клавиатуры:
![](img/file-uploader-img-21.png)
Фокус с клавиатуры на списке выбранных файлов:
![](img/file-uploader-img-22.png)