Поле загрузки файлов, которое мы заслужили

[ThisMan]

Без рабочей демки как то пресно(

[RadicalChild]

Добавил возможность скачать финальный билд, билд с проблемой с фокусом и билд с мерцанием!

[RadicalChild]

Теперь добавил возможность пощупать, не бейте!

[fhabr]

А что, с 2012го успел наступить невиданный прорыв в формах передачи файлов?

[Fragster]

Jquery протух, все используют habr.com/post/150594.

[Akuma]

Да ну, этот фреймворк уже такой старый. Статья 2012 года и в ней написано, что браузеры уже 10 лет его поддерживают. Как минимум 22 года. Дайте человеку попользоваться чем-то современным, стильным и молодежным.

[RadicalChild]

Действительно, тема стара как мир. Но вместе с ней стары и сопутствующие ей проблемы. Не вижу ничего плохого в том, чтобы «переиздавать» руководства, дополняя их чем-то свежим. Например, толкового объяснения, а уж тем более решения тех багов, на которые я указал в этой статье, я в интернете, даже англоязычном, не нашел.

[KYuri]

Ну ничего, нормальные герои всегда идут в обход

Да, с фокусом тут действительно «в обход».

Я бы просто добавил в разметку аттрибут «tabindex»:

<input id="file-input" type="file" name="file" multiple tabindex="-1">
<label for="file-input" tabindex="0">Выберите файл</label>

И никаких заумных стилей, никакой борьбы с разными браузерами, никаких js-обработчиков…

[monochromer]

Только ни пробелом, ни enter'ом на такой label не нажать. Только мышкой.

[RadicalChild]

Попробовал, не помогло, но спасибо за вариант! Добавил возможность скачать билды: попробуйте сами, может я что-то не так делаю.

[KYuri]

Ваш «финальный», с tabindex-ом.
Чем не устраивает вариант с tabindex-ом?

[RadicalChild]

Да, я все же немного накосячил, но! Фокус действительно будет появляться, вот только, как заметил monochromer выше, нажиматься метка будет только мышью.

[psycho-coder]

А мы просто используем plupload.js, который может слать файлы кусками, и не выставлять max_upload_size в сотни МБ.

[Nice-L]

Ваши бы слова, да разработчикам ГИС ЖКХ в уши. Шаблоны по одному грузить — рутина. Встречая разработчиков, думающих об удобстве работы даже в таких, казалось бы, «мелочах» как-то даже вера в будущее просыпается.

[chelaxe]

Еще есть проблемы в ie9 где нет multiple и когда ajax с файлами таки не отправляется и ты используешь iframe. Еще в ie9 другой объект с файлами, там вроде размера нет и еще что-то, кто помнит напомните. Ох в свое время хлебнул для поддержки ie9 с этим полем загрузки файлов.

[monochromer]

Firefox по каким-то неведомым причинам отказывается применять свойства к метке при фокусе на input[type=file].

Если учитывать относительно современные версии Firefox, то баг можно вылечить с помощью css-псевдокласса :focus-within.

Сам баг: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196

[PaulZi]

Писал подобный велосипед:
github.com/paulzi/filestyler/blob/master/README.ru.md
Демо: paulzi.ru/github/filestyler/docs