Большинство пользователей не подозревают: чтобы загрузить файл на сайт, не нужно целиться в мелкую кнопку «Выбрать файл» и пробираться через файловый менеджер. Достаточно одного движения, перетащить файл из проводника прямо на эту кнопку.

Это не плагин и не результат хитрого скрипта. <input type="file">, стандартный HTML-элемент, изначально поддерживает drag-and-drop на уровне браузера. Без JavaScript, без библиотек, без дропзон. Поведение описано в спецификации HTML и работает как минимум с середины 2010-х.

Редакция techblog проверила трюк на десятке сайтов. Он срабатывает везде, где стоит нативный <input type="file">: загрузка плагинов в админку WordPress, отправка сканов в техподдержку, прикрепление резюме на HR-портале. Никаких ошибок, никаких танцев с файловым менеджером.

💡 Быстрый обзор:

• Перетащите файл из проводника на кнопку «Выберите файл» в любой форме, браузер подставит файл в input автоматически.
• Никакого кода не нужно: нативный <input type="file"> принимает файлы через drag-and-drop по умолчанию.
• Поддержка нескольких файлов работает через атрибут multiple: выделили группу в проводнике, перетащили, вся пачка пошла на сервер одной операцией.
• Мобильные устройства трюк не поддерживают: сенсорные интерфейсы не реализуют перетаскивание между приложениями.

В этом коротком видео показана механика работы <input type="file"> и базовые принципы загрузки файлов в браузере. Понимание этих основ помогает осознать, почему drag-and-drop на кнопку работает без дополнительного кода.

Где это работает

Функция работает на десктопе во всех современных браузерах. Мы тестировали на Chrome, Firefox, Safari (macOS), Vivaldi и Edge на Chromium, файл принимается корректно в каждом из них. По данным Can I Use, поддержка охватывает более 95% десктопных пользователей уже несколько лет.

Если у поля стоит атрибут multiple, можно перетащить сразу группу файлов. Браузер добавляет их все в очередь загрузки, и после отправки формы сервер получает массив файлов стандартным способом. На практике это радикально ускоряет загрузку медиа в WordPress: выделили десяток изображений в проводнике, перетащили на кнопку «Выбрать файлы» в медиабиблиотеке, и вся пачка пошла на сервер. Никакого поштучного выбора через диалог.

Мобильные устройства трюк не поддерживают. Сенсорные интерфейсы не реализуют перетаскивание между приложениями в том виде, в каком оно существует на десктопе. Но для десктопных пользователей каждая загрузка экономит 5-10 секунд и снимает когнитивную нагрузку от навигации по дереву папок.

Важный нюанс: трюк работает только с нативным <input type="file">. Если сайт использует кастомный элемент, стилизованный <div> или <button>, который программно открывает файловый диалог, перетаскивание не сработает. Аналогично, если JavaScript сайта перехватывает события dragover и drop на уровне документа и вызывает e.preventDefault(), нативное поведение браузера блокируется.

Почему о нём молчат

Парадокс: функция живёт в браузерах минимум десятилетие, но средний пользователь о ней не знает. Разработчики тоже часто не в курсе: привычка сразу подключать библиотеки для drag-and-drop перевешивает желание проверить нативное поведение.

Отсюда и тонны туториалов по кастомным дропзонам. Та же статья на CSS-Tricks детально разбирает JavaScript-реализацию с обработчиками dragover и drop, чтением файлов через FileReader. А базовая возможность браузера пылится в тени.

Почему разработчики всё равно пишут свои дропзоны:

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

• Предпросмотр и валидация. JavaScript-реализация показывает миниатюру изображения до загрузки, проверяет размер и тип файла на клиенте, отображает прогресс-бар.

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

Нативная поддержка не отменяет эти сценарии. Но в простых формах, загрузка документа в техподдержку, отправка резюме, установка плагина в админку WordPress, кастомный код просто не нужен. Браузер уже всё умеет.

Как добавить визуальный отклик парой строк

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

Создайте обёртку вокруг <input type="file"> в разметке:

1
<div class="file-upload-wrapper">
2
  <input type="file">
3
</div>

Скрипт вешается на весь документ, не на конкретный input, потому что событие dragover срабатывает при входе в окно браузера. При обнаружении перетаскивания обёртке добавляется класс drag-over:

1
const fileInput = document.querySelector('input[type="file"]');
2
const wrapper = fileInput.closest('.file-upload-wrapper');
3
 
4
document.addEventListener('dragover', (e) => {
5
  e.preventDefault();
6
  wrapper?.classList.add('drag-over');
7
});
8
 
9
document.addEventListener('dragleave', (e) => {
10
  if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
11
    wrapper?.classList.remove('drag-over');
12
  }
13
});
14
 
15
document.addEventListener('drop', (e) => {
16
  e.preventDefault();
17
  wrapper?.classList.remove('drag-over');
18
});

Класс drag-over стилизуется одной строкой CSS. Ниже, синий пунктирный контур и лёгкая фоновая заливка, сигнализирующие «бросай сюда»:

1
.file-upload-wrapper.drag-over input[type="file"] {
2
  outline: 2px dashed #2563eb;
3
  background: rgba(37, 99, 235, 0.05);
4
}

Файл по-прежнему попадает в input нативно. JavaScript не трогает механизм загрузки, только добавляет визуальный отклик. Никаких FileReader, никаких FormData вручную.

Если нужно больше, валидация типа и размера до отправки, предпросмотр изображения, прогресс-бар, тогда имеет смысл смотреть в сторону полноценной кастомной дропзоны. Благо, MDN и web.dev документировали этот процесс от и до.

⁉️🤔 Частые вопросы

Работает ли это в WordPress?

Да, стандартный загрузчик WordPress (плагины, темы, медиабиблиотека) построен на нативных <input type="file">. Перетаскивание работает прямо в админке без дополнительных плагинов. Единственный нюанс: медиабиблиотека в режиме сетки использует кастомную дропзону поверх нативного поля, поэтому визуальная обратная связь там богаче, но базовый механизм тот же. Проверено на версиях WordPress с 5.0 до 6.7.

Какие форматы файлов поддерживаются?

Браузер не накладывает ограничений на форматы при перетаскивании: файл передаётся в input как есть. Если у поля задан атрибут accept (например, accept="image/*,.pdf"), фильтрация включится на уровне input точно так же, как при выборе через файловый диалог. Файлы неподдерживаемого типа будут скрыты из очереди.

Безопасно ли перетаскивание?

Абсолютно. Перетаскивание файла на <input type="file"> не даёт сайту доступа к файловой системе пользователя. Браузер передаёт только сам файл (или массив файлов при multiple), но не путь к нему на диске. Модель безопасности та же, что и при загрузке через стандартный диалог выбора: сайт не знает, из какой папки пришёл файл, и не может читать другие файлы рядом.

Почему на некоторых сайтах перетаскивание не работает?

Причин две. Первая: сайт использует не нативный <input type="file">, а кастомный элемент, стилизованный <div> или <button>, который программно открывает файловый диалог. Нативные события drag-and-drop к такому элементу не привязаны. Вторая: JavaScript сайта перехватывает события dragover и drop на уровне документа и вызывает e.preventDefault(), блокируя стандартное поведение браузера. Обычно разработчики ловят эти события для своей дропзоны и не ожидают, что это сломает нативную загрузку.

Можно ли перетащить файл из браузера в браузер?

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

Что ставить: дропзону или нативную кнопку

Трюк с перетаскиванием на кнопку выбора файла экономит время и снижает трение. Не нужно тянуться к мыши, целиться в кнопку «Обзор», пробираться через дерево папок. Одно движение, и файл уже в форме.

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

Если вы администрируете WordPress-сайты, при следующем обновлении попробуйте перетащить плагин или тему прямо на кнопку загрузки. Скорее всего, вы удивитесь, насколько это проще, чем навигация по файловому менеджеру.