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, indem es Dateien vorübergehend in einer einzigen Spalte speichert und das Speicherereignis nutzt, um die Datei binär abzurufen und in eine separate Tabelle zu verschieben, wo sie weiter verarbeitet oder in ein lokales oder Netzwerkdateisystem verschoben werden kann.

  • Ursprünglicher Ersteller: JP Fortier
  • Aktualisiert von: Andros Haggins & Shrey Kumar
  • Typ: Kontroll-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 Charge von Dateien hochgeladen wurde.
    maxParallelUploads 1 No Maximale Anzahl von Dateien, die parallel hochgeladen werden können. 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 unter konfiguriert werden https://pqina.nl/filepond/docs/print-version/#toc unter dem Abschnitt „Eigenschaften“. Um zusätzliche Parameter/Eigenschaften hinzuzufügen, müssen Sie die Datei „binder.js“ direkt im Widget bearbeiten. Bitte beachten Sie, dass alle hinzugefügten zusätzlichen Parameter/Eigenschaften möglicherweise nicht wie erwartet funktionieren und nur die oben genannten Parameter getestet wurden.

Konfiguration

Damit das Multi-File-Upload-Widget richtig funktioniert, benötigen wir zwei separate Tabellen. Eine für die zu speichernden Dateien, in unserem Beispiel ist dies die Tabelle „Datei“, und eine andere, die Ihre Datei-Uploads basierend auf dem Anwendungsfall Ihrer Anwendung mit anderen Daten verknüpft, in unserem Beispiel ist dies die Tabelle „Ticket“.

Tickettabellendefinition

tickettable.png

Hinweis

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

Dateitabellendefinition

filetable.png

Hinweis

PK-Spalte (FileID), Binärspalte (File) und FK-Spalte zu anderer Tabelle (TicketID) sind die einzigen erforderlichen Spalten

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

Ticket (Quelle)

Das erste Geschäftsobjekt ist nur ein Quellobjekt für die Tickettabelle. Dies ist das Geschäftsobjekt, das wir in unserem ersten Panel verwenden werden, an das unser Panel mit dem Widget gebunden wird und das es uns ermöglicht, eine Datei mit einem bestimmten Datensatz zu verknüpfen:

ticketsource.png

Ticket (Datei)

Unser zweites Geschäftsobjekt zielt auf dieselbe Tickettabelle ab, enthält aber nur PK (TicketID), Datei und Dateinamen (optional). Dies ist wichtig, da wir ein separates Geschäftsobjekt für das Widget 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 und geben eine NewUUID() für die Spalte FileID ein. Diese CRUD-Regel wird im nächsten Schritt dem 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 TicketID hinzu, wie unten gezeigt. Dadurch wird jede Datei in die Dateitabelle verschoben, sobald der Upload abgeschlossen ist. Da unsere Tickettabelle nur eine einzige Binärdateispalte hat, ermöglicht diese Konfiguration die Verknüpfung einer dynamischen Anzahl von Dateien mit einem einzigen Ticketdatensatz:

ticketsaveevent.png

ticketeventregistration.png

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

pagedesign.png

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

paneldesign.png

Unser nächstes Panel mit Ticket (Datei) hat ein einzelnes Datei-Steuerelement, in dem wir das Widget konfigurieren werden:

ticketfilepaneldesign.png

filecontrol.png

Unter Kosmetik > Widget-Informationen wählen Sie das MultiFileUpload-Widget aus. Wenn Sie einen der Standardparameter ändern möchten, können Sie dies tun, indem Sie auf die 3 Kästchen unter den Parametern klicken, wie folgt:

widgetparameters.png

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

Wenn Sie weitere Verarbeitungen/Aktionen an einer Datei durchführen müssen, sollten diese beim Einfügeereignis für die Dateitabelle durchgeführt werden. Dazu gehört das Verschieben der Datei in ein lokales oder Netzwerkdateisystem.

Notiz

Wenn Sie Dateien in einen 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