Отправка файла на сервер FileUploader

Контрол для выбора пользователем файла на компьютере и отображения статуса его отправки на сервер.

Контрол может работать в двух режимах: синхронном – отправляет файлы на сервер вместе с данными формы по сабмиту и асинхронном – отправляет файлы на сервер сразу после их выбора и позволяет сразу отобразить прогресс. В каждом из этих режимов можно включить мультивыбор — когда контрол позволит выбрать и отобразит сразу несколько файлов.

Используйте этот вид контрола в формах, где файл отправляется на сервер вместе с остальными данными формы. Такой вид не подразумевает автоматический старт отправки и отображения процесса.

Когда мультивыбор отключен, можно выбрать только один файл. Клик в ссылку открывает диалог выбора нового файла взамен выбранного. Клик на крестик отменяет выбор и сбрасывает контрол. Так же можно перетащить новый файл в зону драг-н-дропа — выбранный ранее файл заменится новым.

Когда мультивыбор включен, выбранные файлы показываются новыми строками, выбор каждого можно отменить независимо от остальных. Контрол выбора всегда дублируется в конце списка:

Если есть такая возможность, выводите дополнительную информацию о выбранных файлах, превью картинки, иконку типа файла и его размер:

Пример заполненной формы с таким полем:

Такой режим можно использовать в формах, где файлы или данные формы отправляются на сервер и валидируются сразу после выбора. В нем возможен автоматический старт загрузки и отображения процесса:

В любой момент можно прервать и отменить отправку. При наведении на строку появляется крестик для отмены и удаления файла. При клике на крестик контрол возвращается в исходное состояние, отправка прекращается, если она завершилась — файл удаляется.

Если файл успешно отправлен спиннер меняется на галку:

В режиме мультивыбора контрол выбора всегда дублируется в конце списка:

Если есть возможность отображать прогресс отправки файла, можно заменить спиннеры на прогресс-ринг:

Или прогресс-бар:

При ошибках, которые относятся к конкретным файлам название файла подсвечивается красным, при наведении или фокусе на строку появляется тултип с текстом ошибки. Например, сервер вернул ошибку:

Если нужны файлы определенного формата ограничьте их на этапе выбора — это лучше чем показать ошибку после выбора. Если это невозможно — помечайте неправильный файл:

При общих ошибках, которые не могут быть отнесены к определенному файлу красным подсвечивается контрол выбора — появляется красная обводка как у полей с ошибкой. Например, когда превышен объем файлов:

Если есть ограничения по размеру и формату файлов, обозначайте сразу в виде комментария под контролом. При достижении лимита по количеству файлов — блокируйте контрол, не давая пользователю совершать лишнее действие, которое приведёт к ошибке. Предупредите пользователя об ограничениях — это сделает интерфейс дружелюбнее.

Состояние по умолчанию:

Наведение на контрол:

Вид при перетаскивании файлов:

Файл выбран:

Если имя файла не входит, скрываются символы в центре, а при наведении на контрол появлется хинт с полным именем:

В асинхронном варианте скрытие символов работает так же:

Фокус с клавиатуры:

Фокус с клавиатуры на списке выбранных файлов: