Upload ​

Upload ist eine Komponente zum Hochladen von einer oder mehreren Dateien.

Overview ​

Intro ​

Untitled

Upload ist eine Komponente zum Hochladen von einer oder mehreren Dateien. Sie zeigt den Verlauf und den Status des Uploads für jede Datei an. Dateien können über die Schaltfläche "Hochladen" oder per Drag & Drop hochgeladen werden.

Verwendung ​

👍 Do👎 Don't
...wenn Dateien hochgeladen oder importiert werden sollen....wenn Dateien heruntergeladen werden sollen.

Guidelines ​

Aufbau ​

Die Komponente setzt sich zusammen aus einer „Drag & Drop“ Fläche, und einer Taste zum Hochladen der Datei.

Sie zeigt den Upload-Fortschritt und den Status jeder Datei an. Dateien können durch Klicken auf die Schaltfläche "Hochladen" oder durch Ziehen auf die Komponente hochgeladen werden.

Label, Helpertexte, Errortexte

Zur Anzeige des Labels, von Helpertexten und Errortexten muss die Upload Component innerhalb eines Custom Fields verwendet werden.

Varianten/Typen ​

Je nach Anwendungsfall kann eine oder mehrere Dateien hochgeladen/importiert werden (single file oder MultiFile Mode).

Single-File
Multi-File

Des Weiteren kann eingestellt werden, ob mehrere Dateien gleichzeitig oder hintereinander hochgeladen werden sollen. Auch die maximale Anzahl an hochgeladenen Dateien kann frei konfiguriert werden.

Beschränkungen beim Hochladen von Dateien ​

Es können drei Arten von Einschränkungen festgelegt werden: Dateiformat, Dateianzahl und Dateigröße.

Der Benutzer sollte jedoch im Voraus über etwaige Beschränkungen beim Hochladen von Dateien informiert werden. Die maximal zulässige Anzahl von Dateien, die Dateigröße und die Formatbeschränkungen sollten klar kommuniziert werden, um Ausnahmen/Fehler nach Möglichkeit zu vermeiden.

States ​

Anfangszustand ​

Upload ermöglicht es dem Benutzer, Dateien auf die Komponente zu ziehen, um sie hochzuladen.

Anfangszustand (Default)

Hochladevorgang ​

Die Komponente gibt dem Nutzer während des Hochladevorgangs Feedback. Es zeigt den Upload-Fortschritt der Datei durch einen Ladebalken an. Die Komponente zeigt dem Anwender auch die Zeit an und zeigt den verbleibenden Prozentsatz bevor die Datei hochgeladen wird

Upload_Loading

Datei wurde erfolgreich hochgeladen ​

Wenn die Datei erfolgreich hochgeladen wurde, erscheint diese unterhalb der Upload-Schaltfläche. Neben der Datei erscheint ein Icon („check Icon“) mit der Absicht, dem Nutzer zu bestätigen, dass die Datei korrekt hochgeladen wurde.

Eine Datei hat immer rechts einen Button zum Löschen/Entfernen (Mülleimer/Delete Icon). Diese Schaltfläche bricht die Aktion des Hochladens ab, und entfernt die Datei aus der Liste.

Die Schaltfläche Löschen/Entfernen ist die einzige verfügbare Aktion während und nach einem erfolgreichen Upload.

Datei erfolgreich hochgeladen

Fehler während des Hochladevorgangs ​

Wenn ein Fehler oder eine Ausnahme auftritt, zeigt die Komponente ein Icon zum Wiederholen des Vorgangs an („Retry Icon“), damit der Benutzer erneut versuchen kann, die Datei hochzuladen. Rechts erscheint ein Warnicon („error icon“). Dieser Fehlerzustand kann nur entstehen bevor die Datei importiert wird (z.B. Internetverbindung bricht ab während des Hochladens).

Error State

Fehlerzustand weil Komponente ein Pflichtfeld ist ​

Wenn die Komponente (Hochladen einer Datei) ein notwendiger Schritt ist, damit der Benutzer fortfahren kann, sollte die Komponente zu einem Pflichtfeld werden. In diesem Fall sollte die Fehlermeldung unterhalb der Komponente eingefügt werden.

Pflichtfeld

INFO

Ein Fehlerzustand, der nach dem Importieren entsteht (nach Validierung im Backend), sollte über ein Callout dargestellt werden.

Barrierefreiheit ​

Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lässt sich zwischen den einzelnen Feldern springen. Sobald der Fokus auf einem Steuerelement liegt, kann man es mit Enter bedienen (z.B.: Datei auswählen, Datei aus Liste entfernen oder Datei erneut hochladen).

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-upload--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fupload

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-upload-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.upload.Upload;
import com.vaadin.flow.component.upload.receivers.MultiFileMemoryBuffer;

Variants ​

Single File Mode ​

java
MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
Upload upload = new Upload(buffer);
upload.setMaxFiles(1);
upload.setDropAllowed(true);

upload.addSucceededListener(event -> {
    String fileName = event.getFileName();
    InputStream inputStream = buffer.getInputStream(fileName);
    // process file
});

Multiple File Mode ​

java
MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
Upload upload = new Upload(buffer);
upload.setMaxFiles(5);
upload.setDropAllowed(false);

File Type Restriction ​

java
MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
Upload upload = new Upload(buffer);
upload.setAcceptedFileTypes("application/pdf", "image/png", "image/jpeg");
upload.setMaxFileSize(5 * 1024 * 1024); // 5 MB