type file kann Drag & Drop ohne JavaScript
Wenn der Benutzer eine Datei ausgewählt hat, zeigen die Browser den Dateinamen und evtl. ein winziger Thumbnail (Safari).
Dabei bringt der Button einen weiteren Mehrwert mit, den viele einfach übersehen: Zusammen mit dem Text ist das Feld schon ohne jeglichen Eingriff »Drag & Drop«-fähig.
<input type="file" name="upload">
Es reicht aber schon, dem input-Element eine Hintergrundfarbe und etwas padding zu geben, um festzustellen, dass auch der angezeigte Text mit zum Eingabefeld gehört.
Ohne weitere Maßnahmen kann eine Datei direkt auf den Bereich gezogen werden.
input[name="upload"] {
background: #F8FADC;
padding: 18px 5px;
font-size: 1rem;
}
Das gilt auch für ein input type file-Element mit dem Attribut multiple, das den Upload mehrerer Dateien erlaubt.
Overlay für input type="file"
Für ein eigenes Design des File-Uploads verbergen Front-End-Entwickler das öde input-Element für den Datei-Upload und erzeugen einen eigenen Button.
<label for="file-upload" class="file-upload"> <span><img src="file-upload.svg" …> Datei laden</span> </label> <input id="file-upload" type="file"/>
input#file-upload[type="file"] {
display: none;
}
.file-upload {
border: 1px solid #ccc;
padding: 6px 12px;
cursor: pointer;
width: 300px;
height: 100px;
}
input type file und Sicherheit
Die Anpassung des input-Elements für den File-Upload ist aus Sicherheitsgründen eingeschränkt. Zwar kann ein Overlay über das Feld gelegt werden, aber dann wird seine Funktion eingeschränkt. Wenn das Feld auch ohne JavaScript funktionieren soll, kann ein Text darauf hinweisen, dass die Datei / die Dateien direkt auf das Feld gezogen werden können.
Um ein eigenes Design einzubringen und dem Benutzer bessere Informationen zum Upload zu bieten, muss am Ende doch JavaScript einspringen. Der JavaScript FileReader blendet die ausgewählten Dateien und ihre Vorschaubilder ein, um den Benutzer zu zeigen, dass er die richtigen Dateien ausgewählt hat.