Загрузка файла FileUploader

Давно не обновляли

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Файл выбран:

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

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

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

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