Zum Inhalt springen

Widget zum Hochladen mehrerer Dateien im Jitterbit App Builder

Beschreibung

Dieses Widget wurde im Januar 2022 aktualisiert.

Das Multi-File-Upload-Widget verwendet die FilePond-Bibliothek, Version 4.28.2, die unter https://github.com/pqina/filepond zu finden ist. Dieses Widget ermöglicht das synchrone oder asynchrone Hochladen mehrerer Dateien. Die Dateien werden temporär in einer einzigen Spalte gespeichert und über das Speicherereignis in eine separate Tabelle verschoben. Dort kann die Binärdatei weiterverarbeitet oder in ein lokales oder Netzwerkdateisystem verschoben werden.

  • Ursprünglicher Ersteller: JP Fortier
  • Aktualisiert von: Andros Haggins & Shrey Kumar
  • Typ: Steuerungs-Widget
  • Parameter:

    Parametername Standard Übersetzbar Beschreibung
    allowImagePreview 1 No Vorschau für Bilddateitypen aktivieren (1) oder deaktivieren (0).
    allowMultiple 1 No Aktivieren (1) oder deaktivieren (0) Sie das Hinzufügen mehrerer Dateien.
    forceReload 1 No Aktivieren (1) oder deaktivieren (0) Sie die Ausführung einer globalen Aktualisierung, nachdem ein Batch von Dateien hochgeladen wurde.
    maxParallelUploads 1 No Maximale Anzahl parallel hochladbarer Dateien. Das getestete Maximum liegt bei 100.
    runSave 1 No Aktivieren (1) oder deaktivieren (0) Sie die Ausführung des Speicherereignisses für jede Datei, die in die Dateispalte des Business-Objekts hochgeladen wird.

    Weitere Parameter können basierend auf der FilePond-Dokumentation konfiguriert werden. https://pqina.nl/filepond/docs/print-version/#toc Im Bereich „Eigenschaften“. Um weitere Parameter/Eigenschaften hinzuzufügen, müssen Sie die Datei „binder.js“ direkt im Widget bearbeiten. Bitte beachten Sie, dass hinzugefügte Parameter/Eigenschaften möglicherweise nicht wie erwartet funktionieren. Nur die oben genannten Parameter wurden getestet.

Konfiguration

Für die korrekte Funktion des Multi-File-Upload-Widgets benötigen wir zwei separate Tabellen. Eine für die zu speichernden Dateien (in unserem Beispiel die Tabelle „Datei“) und eine weitere, die Ihre Datei-Uploads je nach Anwendungsfall mit anderen Daten verknüpft (in unserem Beispiel die Tabelle „Ticket“).

Tickettabellendefinition

tickettable.png

Hinweis

PK-Spalte (Ticket-ID) und Binärspalte (Datei) sind die einzigen erforderlichen Spalten

Dateitabellendefinition

filetable.png

Hinweis

PK-Spalte (Datei-ID), Binärspalte (Datei) und FK-Spalte zur anderen Tabelle (Ticket-ID) sind die einzigen erforderlichen Spalten.

Nachdem unsere Tabellen eingerichtet sind, können wir mit der Konfiguration der Geschäftsregeln fortfahren. Wir benötigen mindestens drei Geschäftsregeln, zwei Geschäftsobjekte und eine CRUD-Regel, um eine Datei in die Dateitabelle einzufügen.

Ticket (Quelle)

Das erste Geschäftsobjekt ist lediglich ein Quellobjekt für die Tickettabelle. Dieses Geschäftsobjekt verwenden wir in unserem ersten Panel, an das unser Panel mit dem Widget angebunden wird, und ermöglicht uns die Verknüpfung einer Datei mit einem bestimmten Datensatz:

ticketsource.png

Ticket (Datei)

Unser zweites Geschäftsobjekt zielt auf dieselbe Tickettabelle ab, enthält aber nur die Ticket-ID (PK), die Datei und den Dateinamen (optional). Dies ist wichtig, da wir für das Widget ein separates Geschäftsobjekt benötigen, damit mehrere Dateien parallel hochgeladen werden können: ticketfile.png

Ticket (in Datei einfügen)

Unsere letzte Geschäftsregel ist eine CRUD-Einfügeregel, die einen neuen Datensatz in die Dateitabelle einfügt. Wir zielen auf die Dateitabelle ab und vergeben eine NewUUID() für die Spalte FileID. Diese CRUD-Regel wird im nächsten Schritt zum Speicherereignis für unser vorheriges Geschäftsobjekt hinzugefügt:

ticketinsertcrud.png

Wir verknüpfen nun die CRUD-Regel „Ticket (In Datei einfügen)“ mit dem Speicherereignis unseres zweiten Geschäftsobjekts „Ticket (Datei)“ und fügen eine Bindung an die Ticket-ID hinzu, wie unten gezeigt. Dadurch wird jede Datei nach dem Hochladen in die Dateitabelle verschoben. Da unsere Tickettabelle nur eine einzige Spalte „Binärdatei“ enthält, ermöglicht diese Konfiguration die Verknüpfung einer dynamischen Anzahl von Dateien mit einem einzigen Ticketdatensatz:

ticketsaveevent.png

ticketeventregistrierung.png

Jetzt können wir zur UI-Ebene wechseln, um das Widget selbst einzurichten. Unsere Seite besteht aus zwei Bereichen. Einer verwendet Ticket (Quelle) und der andere Ticket (Datei):

pagedesign.png

Das Panel mit Ticket (Quelle) unterliegt weniger Konfigurationsbeschränkungen, solange unser nächstes Panel daran gebunden ist. So sieht unser Panel aus:

paneldesign.png

Unser nächstes Panel mit Ticket (Datei) verfügt über ein einzelnes Datei-Steuerelement, in dem wir das Widget konfigurieren:

ticketfilepaneldesign.png

filecontrol.png

Wählen Sie unter Kosmetik > Widget-Informationen das MultiFileUpload-Widget aus. Wenn Sie die Standardparameter ändern möchten, klicken Sie dazu auf die drei Kästchen unter den Parametern.

widgetparameters.png

Hier sehen Sie, dass wir maxParallelUploads auf 25 geändert haben. Obwohl runSave weiterhin 1 ist, zeigen wir es hier an, um seine Bedeutung für die Funktionalität dieses Widgets zu verdeutlichen. Da unsere CRUD-Regel, die unsere Datei in die Dateitabelle verschiebt, beim Speichern-Ereignis von Ticket (Datei) konfiguriert ist, müssen wir sicherstellen, dass dieser Wert auf 1 gesetzt ist, damit er ordnungsgemäß funktioniert. Wenn runSave nicht auf 1 gesetzt ist, können wir nicht mehrere Dateien verarbeiten.

Wenn weitere Verarbeitungen/Aktionen an einer Datei erforderlich sind, sollten diese beim Einfügen-Ereignis der Dateitabelle durchgeführt werden. Dazu gehört auch das Verschieben der Datei in ein lokales oder Netzwerkdateisystem.

Notiz

Wenn Sie Dateien in den Amazon S3 Bucket hochladen und eine mehrstufige Verzeichnisstruktur für die Dateien erstellen möchten, lesen Sie bitte das Amazon S3 Dateisystem Artikel.

Videobeispiel zur Widget-Implementierung