Verwendung
Die Upload-Komponente bietet die Möglichkeit, vorab definierte Dateiformate in das System hochzuladen. Sie besteht aus einem visuell klar gekennzeichneten und bei Interaktion hervorgehobenen Bereich, in dem Dokumente abgelegt werden können. Zusätzlich muss zwingend ein Tastatur-bedienbares Formularelement vom Typ input type="file" angeboten werden.
Die Komponente bietet diese Funktionalitäten:
- Hochladen einzelner Dateien per Button und Auswahldialog des jeweiligen Browsers bzw. Betriebssystems
- Paralleles Hochladen mehrerer Dateien gleichzeitig per Button und Auswahldialog
- Hochladen einzelner oder mehrerer Dateien über Drag and Drop in eine entsprechend gestaltete Fläche zur Ablage von Dateien (nur auf Geräten verfügbar, die dies unterstützen)
- Tabellarische Übersicht der hochgeladenen Dateien inkl. der Dateinamen und Dateigrößen sowie der Möglichkeit, einzelne Dateien zu löschen
Beschriftung
Wie alle Standard-Buttons besitzen auch solche zum Datei-Upload einen sichtbaren Text, der als ausreichende Beschreibung der Funktionalität dient. Darüber hinaus auch eine Auflistung der erlaubten Dateiformate erforderlich (z. B. .PDF, .DOCX).
Die erforderliche Einschränkung auf bestimmte Dateiformate, die akzeptiert werden (sogenannte “MIME-Types”) geschieht je nach fachlichem Bedarf individuell über die Administrations-Oberfläche und ist somit vom Design System nicht festlegbar.
Tooltips
Tooltips sind in der Upload-Komponente nicht vorgesehen, da genügend Platz zur Verfügung steht, um die erforderlichen Erklärungen z. B. zu erlaubten Dateiformaten stets sichtbar anzuzeigen.
Inaktive Elemente
Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Daten.
Readonly-File Uploads sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.
Interaction Design
Wenn Nutzende erlaubte Dateiformate per Drag and Drop hochladen, dann erhalten sie eine visuelle Bestätigung des Erfolgs in Form einer deutlichen Hervorhebung und Einfärbung der Komponente.
Wenn Nutzende nicht erlaubte Dateiformate per Drag and Drop hochladen wollen, dann erhalten Upload-Felder einen deutlich sichtbaren Fehler-Indikator in Form einer roten Einfärbung der Komponenten und unterstützend eine Mikro-Animation, die hier im Tab Design beschrieben ist. Gleichzeitig wird ein Fehlerhinweis eingeblendet, dass dieses Dateiformat nicht erlaubt ist.
Wenn Nutzende versuchen, nicht erlaubte Dateiformate über den Dateiauswahl-Dialog des Browsers hochzuladen, dann sind diese nicht auswählbar; ein weiterer Fehlerhinweis ist hier also nicht nötig.
Do’s and Dont’s
So:
- Erlaubte Dateiformate klar kommunizieren
- Maximale Dateigröße anzeigen
So nicht:
- Zu kleine Uploadfläche
- Dateiformate clientseitig nicht validiert
