Die meisten Nutzer haben keine Ahnung: Um eine Datei auf eine Website hochzuladen, müssen Sie nicht den winzigen „Datei auswählen"-Button anvisieren und sich durch den Dateimanager navigieren. Eine einzige Bewegung genügt, ziehen Sie die Datei aus Ihrem Datei-Explorer direkt auf diesen Button.

Das ist kein Plugin und auch nicht das Ergebnis eines cleveren Skripts. <input type="file">, ein Standard-HTML-Element, unterstützt Drag-and-Drop nativ auf Browserebene. Kein JavaScript, keine Bibliotheken, keine Drop-Zones. Das Verhalten ist in der HTML-Spezifikation beschrieben und funktioniert mindestens seit Mitte der 2010er Jahre.

Das Techblog-Team hat diesen Trick auf einem Dutzend Websites getestet. Er funktioniert überall dort, wo ein natives <input type="file"> zum Einsatz kommt: beim Hochladen von Plugins im WordPress-Admin, beim Senden von Scans an den technischen Support, beim Anhängen von Lebensläufen auf HR-Portalen. Keine Fehler, kein Herumtanzen mit dem Dateimanager.

💡 Kurzüberblick:

• Ziehen Sie eine Datei aus Ihrem Datei-Explorer auf den „Datei auswählen"-Button in einem beliebigen Formular, der Browser fügt die Datei automatisch in das Eingabefeld ein.
• Kein Code erforderlich: Das native <input type="file"> akzeptiert Dateien standardmäßig per Drag-and-Drop.
• Unterstützung für mehrere Dateien funktioniert über das multiple-Attribut: Wählen Sie eine Gruppe in Ihrem Datei-Explorer aus, ziehen Sie sie herüber, und der gesamte Stapel geht in einem Vorgang an den Server.
• Mobile Geräte unterstützen diesen Trick nicht: Touch-Oberflächen implementieren kein Ziehen zwischen Anwendungen.

Dieses kurze Video demonstriert, wie <input type="file"> funktioniert, und die grundlegenden Prinzipien von Datei-Uploads im Browser. Wenn Sie diese Grundlagen verstehen, wird klar, warum Drag-and-Drop auf den Button ohne zusätzlichen Code funktioniert.

Wo das funktioniert

Die Funktion arbeitet auf dem Desktop in allen modernen Browsern. Wir haben sie in Chrome, Firefox, Safari (macOS), Vivaldi und Edge auf Chromium getestet, die Datei wird in jedem dieser Browser korrekt übernommen. Laut Can I Use-Daten deckt die Unterstützung seit mehreren Jahren über 95% der Desktop-Nutzer ab.

Wenn das Feld das multiple-Attribut besitzt, können Sie eine ganze Gruppe von Dateien auf einmal ziehen. Der Browser fügt sie alle der Upload-Warteschlange hinzu, und nach dem Absenden des Formulars erhält der Server auf dem Standardweg ein Array von Dateien. In der Praxis beschleunigt das Medien-Uploads in WordPress radikal: Wählen Sie ein Dutzend Bilder in Ihrem Datei-Explorer aus, ziehen Sie sie auf den „Dateien auswählen"-Button in der Mediathek, und der gesamte Stapel geht an den Server. Kein mühsames Einzeln-Auswählen über einen Dialog.

Mobile Geräte unterstützen diesen Trick nicht. Touch-Oberflächen implementieren das Ziehen zwischen Anwendungen nicht in der Form, wie es auf dem Desktop existiert. Aber für Desktop-Nutzer spart jeder Upload 5-10 Sekunden und eliminiert die kognitive Last des Navigierens durch Ordnerbäume.

Wichtiger Vorbehalt: Der Trick funktioniert nur mit nativem <input type="file">. Wenn eine Website ein benutzerdefiniertes Element verwendet, ein gestyltes <div> oder <button>, das programmatisch den Dateidialog öffnet, funktioniert das Ziehen nicht. Ebenso: Wenn das JavaScript der Website dragover- und drop-Ereignisse auf Dokumentebene abfängt und e.preventDefault() aufruft, wird das native Verhalten des Browsers blockiert.

Warum niemand darüber spricht

Das Paradox: Die Funktion ist seit mindestens einem Jahrzehnt in Browsern vorhanden, aber der durchschnittliche Nutzer weiß nichts davon. Auch Entwickler sind sich dessen oft nicht bewusst: Die Gewohnheit, sofort zu Drag-and-Drop-Bibliotheken zu greifen, wiegt schwerer als der Wunsch, das native Verhalten zu prüfen.

Daher die Unmenge an Tutorials zu benutzerdefinierten Drop-Zones. Derselbe Artikel auf CSS-Tricks seziert detailliert eine JavaScript-Implementierung mit dragover- und drop-Handlern, die Dateien über FileReader einliest. Währenddessen verstaubt die grundlegende Fähigkeit des Browsers im Schatten.

Warum Entwickler immer noch eigene Drop-Zones schreiben:

• Visuelles Feedback. Der native Upload hebt den Button nicht hervor, wenn eine Datei darüber schwebt, und der Nutzer versteht nicht, dass Ziehen funktioniert. Eine benutzerdefinierte Drop-Zone bietet eine gestylte Umrandung, Hintergrundänderung, Animation.

• Vorschau und Validierung. Eine JavaScript-Implementierung zeigt eine Bildvorschau vor dem Upload, prüft Dateigröße und -typ clientseitig und zeigt einen Fortschrittsbalken an.

• Mehrere Zonen. Wenn eine Seite mehrere unabhängige Upload-Punkte hat, zum Beispiel ein Profilfoto und eine Galerie in einem persönlichen Konto, brauchen Sie eine klare Zuordnung der Datei zu einem bestimmten Feld.

Die native Unterstützung beseitigt diese Szenarien nicht. Aber in einfachen Formularen, ein Dokument an den technischen Support senden, einen Lebenslauf anhängen, ein Plugin im WordPress-Admin installieren, ist benutzerdefinierter Code schlicht nicht nötig. Der Browser kann bereits alles Nötige.

Wie Sie visuelles Feedback mit ein paar Zeilen hinzufügen

Wenn Sie das native Verhalten beibehalten, dem Nutzer aber einen visuellen Hinweis geben möchten, genügen minimales CSS und JavaScript. Der folgende Code hebt den Dateiauswahl-Button hervor, wenn eine gezogene Datei darüber schwebt, ohne den Upload-Mechanismus selbst anzutasten.

Erstellen Sie einen Wrapper um <input type="file"> im Markup:

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

Das Skript hängt sich an das gesamte Dokument, nicht an ein bestimmtes Eingabefeld, weil das dragover-Ereignis beim Betreten des Browserfensters ausgelöst wird. Wenn ein Ziehvorgang erkannt wird, wird dem Wrapper die Klasse drag-over hinzugefügt:

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
});

Die Klasse drag-over wird mit einer Zeile CSS gestaltet. Unten eine blaue gestrichelte Umrandung und eine leichte Hintergrundfüllung, die signalisiert: „Hier ablegen":

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

Die Datei landet weiterhin nativ im Eingabefeld. JavaScript tastet den Upload-Mechanismus nicht an, sondern fügt nur visuelles Feedback hinzu. Kein FileReader, kein manuell konstruiertes FormData.

Wenn Sie mehr benötigen, Validierung von Typ und Größe vor dem Absenden, Bildvorschau, Fortschrittsbalken,, dann ist es sinnvoll, sich in Richtung einer vollwertigen benutzerdefinierten Drop-Zone umzusehen. MDN und web.dev haben diesen Prozess glücklicherweise von Anfang bis Ende dokumentiert.

⁉️🤔 Häufig gestellte Fragen

Funktioniert das in WordPress?

Ja, der standardmäßige WordPress-Uploader (Plugins, Themes, Mediathek) basiert auf nativem <input type="file">. Das Ziehen funktioniert direkt im Admin ohne zusätzliche Plugins. Die einzige Nuance: Die Mediathek in der Rasteransicht verwendet eine benutzerdefinierte Drop-Zone über dem nativen Feld, daher ist das visuelle Feedback dort reichhaltiger, aber der grundlegende Mechanismus ist derselbe. Geprüft mit WordPress-Versionen von 5.0 bis 6.7.

Welche Dateiformate werden unterstützt?

Der Browser erlegt beim Ziehen keine Formatbeschränkungen auf: Die Datei wird unverändert an das Eingabefeld übergeben. Wenn das Feld ein accept-Attribut besitzt (zum Beispiel accept="image/*,.pdf"), greift die Filterung auf Eingabefeldebene genauso wie bei der Auswahl über den Dateidialog. Dateien nicht unterstützter Typen werden aus der Warteschlange ausgeblendet.

Ist das Ziehen sicher?

Absolut. Das Ziehen einer Datei auf <input type="file"> gewährt der Website keinen Zugriff auf das Dateisystem des Nutzers. Der Browser übergibt nur die Datei selbst (oder ein Array von Dateien mit multiple), nicht jedoch ihren Pfad auf der Festplatte. Das Sicherheitsmodell ist dasselbe wie beim Hochladen über den Standard-Auswahldialog: Die Website weiß nicht, aus welchem Ordner die Datei stammt, und kann keine anderen Dateien in der Nähe lesen.

Warum funktioniert das Ziehen auf manchen Websites nicht?

Zwei Gründe. Erstens: Die Website verwendet kein natives <input type="file">, sondern ein benutzerdefiniertes Element, ein gestyltes <div> oder <button>, das programmatisch den Dateidialog öffnet. An ein solches Element sind keine nativen Drag-and-Drop-Ereignisse gebunden. Zweitens: Das JavaScript der Website fängt dragover- und drop-Ereignisse auf Dokumentebene ab und ruft e.preventDefault() auf, wodurch das Standardverhalten des Browsers blockiert wird. In der Regel fangen Entwickler diese Ereignisse für ihre eigene Drop-Zone ab und rechnen nicht damit, dass dies den nativen Upload unterbricht.

Kann ich eine Datei von einem Browser in einen anderen ziehen?

Nein. Der Mechanismus funktioniert nur vom Dateimanager des Betriebssystems in das Browserfenster. Ziehen zwischen Tabs oder von einem Browser in einen anderen wird nicht unterstützt: Das Sicherheitsmodell des Browsers erlaubt keinen Zugriff auf das Dateisystem eines anderen Kontexts.

Was Sie verwenden sollten: Drop-Zone oder nativer Button

Der Trick, Dateien auf den Dateiauswahl-Button zu ziehen, spart Zeit und reduziert Reibungsverluste. Kein Griff zur Maus, kein Anvisieren des „Durchsuchen"-Buttons, kein Navigieren durch den Ordnerbaum. Eine Bewegung, und die Datei ist bereits im Formular.

Für einfache Szenarien, Hochladen von Dokumenten, Scans, Archiven, Installieren von Plugins in WordPress, ist das native Verhalten mit leichter visueller Anreicherung mehr als ausreichend. Bevor Sie Kilobyte an JavaScript für eine benutzerdefinierte Drop-Zone einbinden, prüfen Sie: Vielleicht reicht Ihrem Formular das, was der Browser bereits von Haus aus kann.

Wenn Sie WordPress-Websites administrieren, versuchen Sie bei Ihrem nächsten Update, ein Plugin oder Theme direkt auf den Upload-Button zu ziehen. Sie werden wahrscheinlich überrascht sein, wie viel einfacher das ist als das Navigieren im Dateimanager.