Zum Inhalt springen

Multi File Upload-Widget im Jitterbit App Builder

Beschreibung

Das Multi File Upload-Widget verwendet die FilePond-Bibliothek. Dieses Widget ermöglicht das gleichzeitige oder asynchrone Hochladen mehrerer Dateien, indem Dateien vorübergehend in einer einzelnen Spalte gespeichert werden. Es nutzt das Speichern-Ereignis, um die Datei-Binärdaten abzurufen und in eine separate Tabelle zu verschieben. Von dort aus können die Daten weiterverarbeitet oder in ein lokales oder Netzwerk-Dateisystem verschoben werden.

Um das Multi File Upload-Widget herunterzuladen, siehe Multi File Upload in Widget-Downloads.

  • Ursprünglicher Ersteller: JP Fortier

  • Aktualisiert von: Andros Haggins & Shrey Kumar

  • Typ: Steuerungs-Widget

  • Parameter:

    Parametername Standard Übersetzbar Beschreibung
    allowImagePreview 1 Nein Vorschau für Bilddateitypen aktivieren (1) oder deaktivieren (0).
    allowMultiple 1 Nein Hinzufügen mehrerer Dateien aktivieren (1) oder deaktivieren (0).
    forceReload 1 Nein Globales Aktualisieren nach dem Hochladen einer Datei-Batch aktivieren (1) oder deaktivieren (0).
    runSave 1 Nein Speichern-Ereignis für jede hochgeladene Datei in der Datei-Spalte des Business Objects aktivieren (1) oder deaktivieren (0).
    allowFileSizeValidation 1 Nein Verwendung der maxFileSize-Parameter-Einstellung aktivieren (1) oder deaktivieren (0).
    maxFileSize 5000KB Nein Wert für die größte Dateigröße, die das Widget zulässt. Muss in Kilobyte angegeben werden und ist ein String-Wert.

    Weitere Parameter können basierend auf der FilePond-Dokumentation im Abschnitt Eigenschaften konfiguriert werden. Um zusätzliche Parameter/Eigenschaften hinzuzufügen, müssen Sie die Datei binder.js im Widget direkt bearbeiten.

    Hinweis

    Alle hinzugefügten zusätzlichen Parameter/Eigenschaften funktionieren möglicherweise nicht wie erwartet, und nur die oben genannten Parameter wurden getestet.

Konfiguration

Ein Beispiel, wie das Multi File Upload-Widget eingerichtet und verwendet wird, ist unten angegeben. Die Anleitung ist in zwei Schritte unterteilt:

Schritt 1: Tabellen, Geschäftsobjekte und Regeln einrichten

Damit das Multi File Upload-Widget korrekt funktioniert, benötigen wir zunächst zwei Tabellen. Eine für die Dateien, die gespeichert werden sollen, die wir die Datei-Tabelle nennen, und eine andere, die Ihre Datei-Uploads mit anderen Daten basierend auf dem Anwendungsfall Ihrer Anwendung verknüpft, die wir die Ticket-Tabelle nennen.

Tabellendefinitionen

Die Ticket-Tabelle kann wie im Screenshot unten definiert werden. Auch wenn andere Spalten angezeigt werden, sind nur die Private Key (PK) (TicketID) und die Binary (Datei) Spalten erforderlich.

tickettable.png

Der folgende Screenshot zeigt die Definition der Datei-Tabelle. Auch wenn andere Spalten angezeigt werden, sind nur die Private Key (PK) (FileID), die Binary (Datei) und die Foreign Key (FK) (TicketID) Spalten erforderlich.

filetable.png

Jetzt, da die Tabellen eingerichtet sind, können wir die drei Regeln (zwei Geschäftsobjekte und eine CRUD-Regel) konfigurieren, die wir benötigen.

Regeldefinitionen

Zuerst benötigen wir ein Geschäftsobjekt, das Ticket (Quelle) genannt wird, um als Quellobjekt für die Ticket-Tabelle zu fungieren. Dies ist das Geschäftsobjekt, an das unser Panel mit dem Widget gebunden wird, was es uns ermöglicht, eine Datei mit einem bestimmten Datensatz zu verknüpfen:

ticketsource.png

Unser zweites Geschäftsobjekt, genannt Ticket (Datei), zielt auf die gleiche Ticket-Tabelle ab, enthält jedoch nur die Spalten TicketID (die der Primärschlüssel ist), Datei und Dateiname (optional). Dies ist wichtig, da wir ein separates Geschäftsobjekt benötigen, damit das Widget für mehrere Dateien parallel hochgeladen werden kann:

ticketfile.png

Unsere letzte Geschäftsregel ist eine Insert-CRUD-Regel, genannt Ticket (Einfügen in Datei), die einen neuen Datensatz in die Datei-Tabelle einfügt. Wir zielen auf die Datei-Tabelle ab und fügen eine NewUUID() zur Spalte FileID hinzu. Diese CRUD-Regel wird im nächsten Schritt zum Speichern-Ereignis unseres vorherigen Geschäftsobjekts hinzugefügt:

ticketinsertcrud.png

Wir verknüpfen nun die CRUD-Regel Ticket (Einfügen in Datei) mit dem Speichern-Ereignis unseres zweiten Geschäftsobjekts, Ticket (Datei), und fügen eine Bindung an TicketID hinzu, wie unten gezeigt. Dies wird jede Datei in die Datei-Tabelle verschieben, sobald der Upload abgeschlossen ist. Da unsere Ticket-Tabelle nur eine binäre Dateispalte hat, ermöglicht diese Konfiguration, dass eine dynamische Anzahl von Dateien mit einem einzelnen Datensatz in Ticket verknüpft werden kann:

ticketsaveevent.png

ticketeventregistration.png

Schritt 2: Richten Sie das Multi-Datei-Upload-Widget ein

Jetzt können wir zur UI-Schicht übergehen, um das Widget selbst einzurichten. Unsere Seite wird aus zwei Panels bestehen. Eines verwendet Ticket (Quelle) und das andere Ticket (Datei):

pagedesign.png

Das Panel, das Ticket (Quelle) verwendet, hat weniger Einschränkungen hinsichtlich der Konfiguration, solange unser nächstes Panel daran gebunden ist. So sieht unseres aus:

paneldesign.png

Unser nächstes Panel, das Ticket (Datei) verwendet, hat eine einzelne Datei-Steuerung, in der wir das Widget konfigurieren werden:

ticketfilepaneldesign.png

filecontrol.png

In den Einstellungen der Datei-Steuerung klicken Sie auf die Registerkarte Edge Case und im Feldgruppenbereich Edge Case finden Sie das Feld Widget. Wählen Sie das Widget Multi File Upload aus. Wenn Sie einige der Standardparameter ändern möchten, können Sie dies jetzt tun:

widgetparameters.png

Beachten Sie, dass wir den Wert von maxParallelUploads auf 25 geändert haben. Obwohl der Wert von runSave weiterhin 1 ist, zeigen wir ihn hier an, um seine Bedeutung für die Funktionalität dieses Widgets hervorzuheben. Da unsere CRUD-Regel, die unsere Datei in die Datei-Tabelle verschiebt, auf dem Speicherevent von Ticket (Datei) konfiguriert ist, müssen wir sicherstellen, dass dies auf 1 gesetzt ist, um ordnungsgemäß zu funktionieren. Wenn runSave nicht auf 1 gesetzt ist, können wir keine mehreren Dateien verarbeiten.

Wenn Sie weitere Verarbeitungen/Aktionen an einer Datei durchführen müssen, sollte dies beim Einfügeereignis für die Datei-Tabelle erfolgen. Dazu gehört das Verschieben der Datei auf ein lokales oder Netzwerk-Dateisystem.

Hinweis

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

Video-Beispiel zur Widget-Implementierung