Datei

Formularelemente - Kurzfassung

Das Datei-Element bietet dem Benutzer die Möglichkeit eine oder mehrere Dateien hochzuladen.

Das Datei-Element bietet dem Benutzer die Möglichkeit eine oder mehrere Dateien hochzuladen. Diese werden dann als einzelnes FileInfo -Objekt oder als Liste von FileInfo-Objekten (siehe auch Lobster Data Platform / Orchestration-Strukturvorlage FileInfo im _data Mapping bzw. Lobster_pro Vorlagen) in die Formulardaten geschrieben.
Ob das Hochladen mehrerer Dateien möglich sein soll, kann über die Option "Mehrfachauswahl erlauben" gesteuert werden.

Darstellung

images/download/attachments/113283841/image2018-12-7_10-38-13-version-1-modificationdate-1663679307550-api-v2.png

Benutzer können die Datei sowohl durch Klicken auf den Text auswählen oder via Drag&Drop auf die Komponente ziehen.

Konfiguration

Eigenschaft

Beschreibung

Download erlauben

Blendet dem Benutzer einen Download-Knopf ein, wenn eine Datei ausgewählt wurde.

images/download/attachments/113283841/image2018-12-7_10-42-1-version-1-modificationdate-1663679307542-api-v2.png

Durch Klicken auf den Download-Knopf wird die Datei direkt heruntergeladen.

Hinweis: Ist das "content" Feld der Elementdaten leer/null und im Feld "remoteFilePath" steht ein gültiger Server-Dateipfad (relativ zum Lobster Data Platform / Orchestration Upload-Verzeichnis), so benötigt der Benutzer zusätzlich das Recht Dateien lesen zu können (Verwaltung/System/Dateimanager/Lesen).

Wachsen für Drag&Drop

Aktiviert/Deaktiviert das automatische "Wachsen" der Dateikomponente, wenn eine Datei darüber gezogen wird

Datei/Zeichnung wechseln erlaubt

Erlaubt dem Benutzer das Wechseln zum Anzeigetyp "Zeichenfläche",
um eine Zeichnung oder Unterschrift direkt zu erfassen (siehe Darstellungstyp "Zeichenfläche").
Zum Wechseln wird dazu ein separater Knopf eingeblendet.

images/download/attachments/113283841/image2018-12-10_8-54-6-version-1-modificationdate-1663679307566-api-v2.png

Rahmen anzeigen

Nur aktiv, wenn die Option "Datei/Zeichnung wechseln erlaubt" aktiviert ist.
Legt fest, ob die Zeichenfläche mit einem Rahmen dargestellt werden soll.

Standard Dateiname

Legt den Namen der Datei fest, sollte dieser nicht ermittelt werden können.
Beispielsweise beim Erfassen einer Unterschrift oder wenn kein Dateiname gegeben ist
(z.B. beim Laden einer Datei aus den Formulardaten).

Hier kann auch ein Berechnungsausdruck hinterlegt werden.

Typfilter

Eine optionale komma-separierte Liste von Mime-Typen, welche als Dateityp-Filter im Dateiauswahldialog des Browsers gesetzt werden.
Die Mime-Typen sind in der Webwelt standardisiert und können durch eine kurze Internet-Recherche einfach herausgefunden werden.

Beispiel für einen Filter, welcher gängige Bilddateiformate und PDF-Dateien filtern soll:
"image/jpeg, image/png, application/pdf"

Tipp: Der Mime-Type einer bestimmten Datei kann auch herausgefunden werden, indem diese über das Datei-Element (mit Datenfeld!) im Testmodus des Editors hochgeladen wird.
Anschließend kann über die Ribbonfunktion "Struktur Export" der Dateityp eingesehen werden.

Uploadmodus

Der Uploadmodus legt fest wie die ausgewählten Dateien hochgeladen werden sollen.

  • BASE64
    Die Datei wird komplett lokal als ByteArray in die Formulardaten geschrieben und zur Verarbeitung als Text (z.B. Lobster_data Knoten) als BASE64 String kodiert.
    Vorteile:
    - Die Datei kann direkt verarbeitet werden
    Nachteile:
    - Große Dateien können den verfügbaren Arbeitsspeicher des Browsers oder der Applikation erschöpfen und damit zum Absturz der Anwendung führen
    - Keine Möglichkeit der Anzeige eines Fortschritts. Der Vorgang blockiert die Applikation bis die Daten übertragen wurden

  • SERVER_UPLOAD (nicht verwendbar in Verbindung mit der "Zeichenfläche")
    Die Datei wird entweder direkt in das Zielverzeichnis auf dem Server übertragen (relativ zum konfigurierten Upload-Verzeichnis von Lobster Data Platform / Orchestration) oder mit einem automatisch generierten Dateinamen in das temporäre Verzeichnis von Lobster_data geschrieben. Abhängig von der verwendeten Variante steht nach dem Hochladen entweder der als Ziel verwendete Dateipfad (remoteFilePath) oder der generierte Name der Temporärdatei (tempFileName) in den Formulardaten des Elements zur Verfügung.
    Vorteile:
    - Große Dateien können hochgeladen werden ohne sie in den Arbeitsspeicher des Clients zu laden
    - Dem Benutzer kann der Fortschritt des Hochladevorgangs angezeigt welcher den Vorgang sogar abbrechen kann
    Nachteile:
    - Dateien können nicht direkt in den Formulardaten verarbeitet und übertragen werden sondern müssen erst auf der Server-Seite entsprechend gelesen oder anderweitig abgelegt werden
    - Ohne die Angabe eines Zielverzeichnisses können hochgeladene Inhalte nicht direkt im Formular angezeigt werden (Stichwort: Vorschau)

    ►HINWEIS◄ Zum Verarbeiten einer temporär hochgeladenen Datei steht in Lobster_data die Funktion Lobster_pro: resolve temporary uploaded file path (_data-Funktion) zur Verfügung, die anhand des Namens der Temporärdatei tempFileName den relativen Pfad zu dieser Datei ermittelt.

Existierende Dateien immer ersetzen

Diese Einstellmöglichkeit steht nur zur Verfügung, wenn als Uploadmodus "SERVER_UPLOAD" gewählt wurde.
Deaktiviert/Aktiviert die Benutzerrückfrage für den Fall dass eine hochzuladende Datei bereits im Zielverzeichnis existiert.

Zielverzeichnis auf dem Server

Diese Einstellmöglichkeit steht nur zur Verfügung, wenn als Uploadmodus "SERVER_UPLOAD" gewählt wurde.
Gibt das Zielverzeichnis auf dem Server relativ zum konfigurierten Upload-Verzeichnis von Lobster Data Platform / Orchestration als Berechnungsausdruck an.
Hinweis: Das Upload-Verzeichnis kann im Dateimanager verwaltet werden.

Daten

Das Datei-Element schreibt die ausgewählte Datei, wie bereits erwähnt, als FileInfo (de.lobster.scm.utils.file.FileInfo) Objekt in die Formulardaten. Nachfolgend wird die Datenstruktur des FileInfo Objektes im JSON-Format beschrieben.

Feld

Beschreibung

content

Die ausgewählte Datei als Byte Array (Als Textbasis auch Base64 kodiert) oder leer, wenn als Uploadmodus SERVER_UPLOAD gewählt wurde

name

Der Name der Datei

remoteFilePath

Beinhaltet den für den Client erreichbaren Dateipfad auf dem Server (nur bei SERVER_UPLOAD mit definiertem Zielverzeichnis, sonst null)

tempFileName

Beinhaltet den Namen einer temporär hochgeladenen Datei (nur bei SERVER_UPLOAD ohne definiertem Zielverzeichnis, sonst null)

size

Die Größe der Datei in Bytes

creationDate

Der Erstellzeitpunkt der Datei als UNIX Zeitstempel in Millisekunden

creator

Der Ersteller der Datei (optional)

modificationDate

Der Zeitpunkt der letzten Dateiänderung als UNIX Zeitstempel in Millisekunden

type

Der Typ der Datei (z.B.: "image/png", "application/pdf", ...)

downloadUrl

Wenn kein content und kein remoteFilePath gesetzt ist, wird diese Url - sofern befüllt - für den Download verwendet

Beispieldaten als JSON für Uploadmodus BASE64

FileInfo (de.lobster.scm.utils.file.FileInfo)
"dataField": {
"clazz": "de.lobster.scm.utils.file.FileInfo",
"content": "iVBORw0KGgoAAAANSUhEUgAAAfAAAACSCAYAAAC655gD...ErkJggg==",
"name": "Unterschrift.png",
  "remoteFilePath": null,
"tempFileName": null,
"size": "4579",
"creationDate": 1544092113126,
"creator": null,
"modificationDate": 1544092113126,
"type": "image/png"
}

Darstellungstyp "Zeichenfläche"

Das Datei-Element bietet neben dem Standarddarstellungstypen noch eine Zeichenflächenvariante an, welche dem Benutzer das Erfassen einer Zeichnung oder Unterschrift ermöglicht. Die Darstellungsart wird in der Eigenschaftenrubrik "Allgemein" festgelegt.


images/download/attachments/113283841/image2018-12-10_9-50-23-version-1-modificationdate-1663679307554-api-v2.png

(1) Wechselt zur "Datei hochladen" Darstellung. Wird nur eingeblendet, wenn die Option "Datei/Zeichnung wechseln erlaubt" aktiviert wurde

(2) Lädt die Zeichnung als Datei herunter. Wird nur eingeblendet, wenn die Option "Download erlauben" aktiviert wurde

(3) Leert das Zeichenfeld

Hinweise:

  • Für eine Zeichenfläche sollte eine fixe Größe definiert werden (Höhe/Breite fix), da das resultierende Bild mit der Pixelauflösung der Zeichenfläche erstellt wird.
    Das Festlegen einer fixen Pixelgröße verhindert also das Erzeugen von unterschiedlich großen Bildern

  • Eine vom Benutzer erstellte Zeichnung wird im "png" Bildformat geschrieben

Arbeiten mit dem Uploadmodus "SERVER_UPLOAD"

Wird als Uploadmodus "SERVER_UPLOAD" gewählt, so wird der Dateiinhalt nicht in die Formulardaten geschrieben, sondern direkt auf den Server hochgeladen. Der ausführende Benutzer benötigt dann allerdings das Recht Dateien hochladen zu können (Verwaltung/System/Dateimanager: Erstellen und Ändern).
Größere Dateien werden dabei in kleineren Schritten hochgeladen, um zum einen den Fortschritt anzeigen zu können und zum Anderen das Abbrechen des Vorgangs durch den Benutzer zu ermöglichen.

Relativ zum Upload-Verzeichnis (Verzeichnis des Dateimanagers) von Lobster Data Platform / Orchestration kann je Datei-Komponente ein Zielverzeichnis konfiguriert werden, in welches die Dateien hochgeladen werden. Dort werden die Dateien ohne weitere Existenzprüfung mit ihrem originalen Dateinamen abgelegt und stehen dort permanent zur Verfügung, bis sie ausdrücklich wieder gelöscht werden.

Wird im Gegenzug dazu kein Zielverzeichnis angegeben oder ist der Verzeichnispfad ein leerer String, so werden die Dateien in einem temporären Verzeichnis mit einem generierten und eindeutigen Namen abgelegt. Dieses Verzeichnis wird regelmäßig aufgeräumt. Die Dateien stehen daher nicht permanent zur Verfügung und sollten daher zeitnah verarbeitet werden.

Beispiel für das Hochladen einer Datei ohne Zielverzeichnis

Ein Datei-Element wird mit dem Uploadmodus "SERVER_UPLOAD" und leerem Zielverzeichnis auf dem Server konfiguriert.

images/download/attachments/113283841/image2019-11-15_15-32-44-version-1-modificationdate-1663679307534-api-v2.png

Beim Auswählen einer Datei über das Datei-Element wird diese temporär auf den Server hochgeladen.

images/download/attachments/113283841/selectFile-version-1-modificationdate-1663679307514-api-v2.png

War das Hochladen der Datei erfolgreich, so wird das zugehörige FileInfo-Objekt in die Formulardaten des Dateielements geschrieben.

Formulardaten nach erfolgreichem Upload als JSON
{
"file": {
"clazz": "de.lobster.scm.utils.file.FileInfo",
"content": null,
"name": "awesome_video_file.mp4",
"remoteFilePath": null,
"tempFileName": "28fc99b1-58ff-4ae8-b6b6-5067d0dadfb7",
"size": "3647310",
"creationDate": 1573817831335,
"creator": null,
"modificationDate": 1573817831335,
"type": "video/mp4"
}
}

►HINWEIS◄ Beim "Mapping" (Phase 3) in einem Lobster_data-Profil steht die Funktion Lobster_pro: resolve temporary uploaded file path (_data-Funktion) zur Verfügung, die den Namen der Temporärdatei (tempFileName) für weitere Verarbeitungsschritte in einen relativen Dateipfad auflösen kann.

images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/warning.svg ACHTUNGimages/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/warning.svg Das temporäre Upload-Verzeichnis von Lobster_data wird automatisch geleert! Die Datei sollte daher zeitnah verarbeitet oder verschoben werden, da sie zu einem späteren Zeitpunkt nicht mehr existieren wird!