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

Це не плагін і не результат хитрого скрипту. <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-сайти, під час наступного оновлення спробуйте перетягнути плагін або тему прямо на кнопку завантаження. Швидше за все, ви здивуєтеся, наскільки це простіше, ніж навігація файловим менеджером.