Większość użytkowników nie podejrzewa: aby wgrać plik na stronę, nie trzeba celować w malutki przycisk „Wybierz plik" i przedzierać się przez menedżer plików. Wystarczy jeden ruch, przeciągnąć plik z eksploratora wprost na ten przycisk.

To nie wtyczka ani wynik sprytnego skryptu. <input type="file">, standardowy element HTML, od samego początku obsługuje drag-and-drop na poziomie przeglądarki. Bez JavaScript, bez bibliotek, bez dropzone. Zachowanie opisano w specyfikacji HTML i działa co najmniej od połowy lat 2010.

Redakcja techblog przetestowała ten trik na dziesięciu witrynach. Działa wszędzie tam, gdzie jest natywny <input type="file">: wgrywanie wtyczek w panelu administracyjnym WordPress, wysyłanie skanów do pomocy technicznej, dołączanie CV na portalu HR. Żadnych błędów, żadnych ceregieli z menedżerem plików.

💡 Szybki przegląd:

• Przeciągnij plik z eksploratora na przycisk „Wybierz plik" w dowolnym formularzu, przeglądarka automatycznie wstawi plik do input.
• Żaden kod nie jest potrzebny: natywny <input type="file"> domyślnie przyjmuje pliki przez drag-and-drop.
• Obsługa wielu plików działa przez atrybut multiple: zaznaczyli Państwo grupę w eksploratorze, przeciągnęli, cała paczka trafia na serwer w jednej operacji.
• Urządzenia mobilne nie obsługują tego triku: interfejsy dotykowe nie realizują przeciągania między aplikacjami.

W tym krótkim filmie pokazano mechanikę działania <input type="file"> i podstawowe zasady wgrywania plików w przeglądarce. Zrozumienie tych podstaw pomaga uświadomić sobie, dlaczego drag-and-drop na przycisk działa bez dodatkowego kodu.

Gdzie to działa

Funkcja działa na desktopie we wszystkich nowoczesnych przeglądarkach. Testowaliśmy na Chrome, Firefox, Safari (macOS), Vivaldi i Edge na Chromium, plik jest poprawnie przyjmowany w każdej z nich. Według danych Can I Use, wsparcie obejmuje ponad 95% użytkowników desktopowych już od kilku lat.

Jeśli pole ma atrybut multiple, można przeciągnąć od razu grupę plików. Przeglądarka dodaje je wszystkie do kolejki wysyłania, a po wysłaniu formularza serwer otrzymuje tablicę plików w standardowy sposób. W praktyce radykalnie przyspiesza to wgrywanie mediów w WordPress: zaznaczyli Państwo kilkanaście obrazów w eksploratorze, przeciągnęli na przycisk „Wybierz pliki" w bibliotece mediów i cała paczka trafia na serwer. Żadnego wybierania pojedynczo przez okno dialogowe.

Urządzenia mobilne nie obsługują tego triku. Interfejsy dotykowe nie realizują przeciągania między aplikacjami w takiej formie, w jakiej istnieje ono na desktopie. Ale dla użytkowników desktopowych każde wgranie oszczędza 5-10 sekund i zdejmuje obciążenie poznawcze związane z nawigacją po drzewie folderów.

Ważny niuans: trik działa tylko z natywnym <input type="file">. Jeśli strona używa niestandardowego elementu, ostylowanego <div> lub <button>, który programowo otwiera okno wyboru pliku, przeciąganie nie zadziała. Podobnie, jeśli JavaScript strony przechwytuje zdarzenia dragover i drop na poziomie dokumentu i wywołuje e.preventDefault(), natywne zachowanie przeglądarki jest blokowane.

Dlaczego się o nim nie mówi

Paradoks: funkcja istnieje w przeglądarkach co najmniej dekadę, ale przeciętny użytkownik o niej nie wie. Deweloperzy również często nie są świadomi: nawyk natychmiastowego podłączania bibliotek do drag-and-drop przeważa nad chęcią sprawdzenia natywnego zachowania.

Stąd tony tutoriali z niestandardowych dropzone. Ten sam artykuł na CSS-Tricks szczegółowo omawia implementację w JavaScript z handlerami dragover i drop, odczytywaniem plików przez FileReader. A podstawowa możliwość przeglądarki kurzy się w cieniu.

Dlaczego deweloperzy i tak piszą własne dropzone:

• Wizualna informacja zwrotna. Natywne wgrywanie nie podświetla przycisku podczas najechania plikiem i użytkownik nie rozumie, że przeciąganie zadziała. Niestandardowa dropzone daje stylizowany outline, zmianę tła, animację.

• Podgląd i walidacja. Implementacja w JavaScript pokazuje miniaturę obrazu przed wgraniem, sprawdza rozmiar i typ pliku po stronie klienta, wyświetla pasek postępu.

• Wiele stref. Gdy na stronie jest kilka niezależnych punktów wgrywania, na przykład zdjęcie profilowe i galeria w panelu klienta, potrzebne jest jednoznaczne powiązanie pliku z konkretnym polem.

Natywne wsparcie nie unieważnia tych scenariuszy. Ale w prostych formularzach, wgranie dokumentu do pomocy technicznej, wysłanie CV, instalacja wtyczki w panelu administracyjnym WordPress, niestandardowy kod po prostu nie jest potrzebny. Przeglądarka już wszystko potrafi.

Jak dodać wizualną informację zwrotną kilkoma linijkami

Jeśli trzeba zachować natywne zachowanie, ale dać użytkownikowi wizualną podpowiedź, wystarczy minimalny CSS i JavaScript. Poniższy kod podświetla przycisk wyboru pliku podczas najechania przeciąganym plikiem, nie dotykając samego mechanizmu wgrywania.

Proszę utworzyć opakowanie wokół <input type="file"> w znacznikach:

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

Skrypt jest podpinany do całego dokumentu, a nie do konkretnego inputa, ponieważ zdarzenie dragover jest wyzwalane przy wejściu do okna przeglądarki. Po wykryciu przeciągania do opakowania dodawana jest klasa 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
});

Klasa drag-over jest stylizowana jedną linijką CSS. Poniżej niebieski przerywany kontur i lekkie wypełnienie tła, które sygnalizują „upuść tutaj":

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

Plik nadal trafia do inputa natywnie. JavaScript nie dotyka mechanizmu wgrywania, tylko dodaje wizualną informację zwrotną. Żadnego FileReader, żadnego ręcznego FormData.

Jeśli potrzeba więcej, walidacja typu i rozmiaru przed wysłaniem, podgląd obrazu, pasek postępu, wtedy warto spojrzeć w stronę pełnoprawnej niestandardowej dropzone. Na szczęście MDN i web.dev udokumentowały ten proces od A do Z.

⁉️🤔 Często zadawane pytania

Czy to działa w WordPress?

Tak, standardowy uploader WordPress (wtyczki, motywy, biblioteka mediów) jest zbudowany na natywnych <input type="file">. Przeciąganie działa wprost w panelu administracyjnym bez dodatkowych wtyczek. Jedyny niuans: biblioteka mediów w trybie siatki używa niestandardowej dropzone nałożonej na natywne pole, dlatego wizualna informacja zwrotna jest tam bogatsza, ale podstawowy mechanizm jest ten sam. Sprawdzono na wersjach WordPress od 5.0 do 6.7.

Jakie formaty plików są obsługiwane?

Przeglądarka nie nakłada ograniczeń na formaty podczas przeciągania: plik jest przekazywany do inputa w niezmienionej postaci. Jeśli pole ma ustawiony atrybut accept (na przykład accept="image/*,.pdf"), filtrowanie włączy się na poziomie inputa tak samo, jak podczas wyboru przez okno dialogowe. Pliki nieobsługiwanego typu zostaną ukryte z kolejki.

Czy przeciąganie jest bezpieczne?

Absolutnie. Przeciągnięcie pliku na <input type="file"> nie daje stronie dostępu do systemu plików użytkownika. Przeglądarka przekazuje tylko sam plik (lub tablicę plików przy multiple), ale nie ścieżkę do niego na dysku. Model bezpieczeństwa jest taki sam, jak podczas wgrywania przez standardowe okno wyboru: strona nie wie, z którego folderu pochodzi plik, i nie może odczytać innych plików obok.

Dlaczego na niektórych stronach przeciąganie nie działa?

Są dwie przyczyny. Pierwsza: strona używa nie natywnego <input type="file">, a niestandardowego elementu, ostylowanego <div> lub <button>, który programowo otwiera okno wyboru pliku. Natywne zdarzenia drag-and-drop nie są powiązane z takim elementem. Druga: JavaScript strony przechwytuje zdarzenia dragover i drop na poziomie dokumentu i wywołuje e.preventDefault(), blokując standardowe zachowanie przeglądarki. Zazwyczaj deweloperzy łapią te zdarzenia dla swojej dropzone i nie spodziewają się, że zepsuje to natywne wgrywanie.

Czy można przeciągnąć plik z przeglądarki do przeglądarki?

Nie. Mechanizm działa tylko z menedżera plików systemu operacyjnego do okna przeglądarki. Przeciąganie między kartami lub z jednej przeglądarki do drugiej nie jest obsługiwane: model bezpieczeństwa przeglądarki nie daje dostępu do systemu plików innego kontekstu.

Co wybrać: dropzone czy natywny przycisk

Trik z przeciąganiem na przycisk wyboru pliku oszczędza czas i zmniejsza tarcie. Nie trzeba sięgać po mysz, celować w przycisk „Przeglądaj", przedzierać się przez drzewo folderów. Jeden ruch i plik jest już w formularzu.

Do prostych scenariuszy, wgrywania dokumentów, skanów, archiwów, instalacji wtyczek w WordPress, natywne zachowanie z lekkim wizualnym wzmocnieniem jest więcej niż wystarczające. Zanim podłączą Państwo kilobajty JavaScriptu do niestandardowej dropzone, proszę sprawdzić: być może Państwa formularzowi wystarczy to, co przeglądarka już potrafi.

Jeśli administrują Państwo stronami WordPress, przy następnej aktualizacji proszę spróbować przeciągnąć wtyczkę lub motyw wprost na przycisk wgrywania. Najprawdopodobniej zdziwią się Państwo, o ile jest to prostsze niż nawigacja w menedżerze plików.