Um ein Bild(er) aus einem Upload (Single, Wiederholung oder Mehrfachauswahl) anzuzeigen, muss der Upload in einen sog. Base64-String umgewandelt werden. Der Base64-String wird dann an das Word-Dokument übertragen und daraus wieder ein Bild erzeugt.
Inhalt
Es gibt drei Möglichkeiten:
Upload eines Bildes über ein Upload-Element (Single)
Hier können Sie sich ein Formularbeispiel anzeigen: https://formexchange.formcycle.eu/formcycle/form/provide/5520/
(Dieses Beispiel kann auch über den Formularstore https://formexchange.formcycle.eu/formcycle/portal/form-store/public/formstore/index.xhtml heruntergeladen werden. Sucheingabe "Word")
Vorbereitung im Word
Bereiten Sie das Word-Dokument vor und fügen Sie ein Feld/Platzhalter mit dem Namen ein (z.B. "varImgBase64String"). Um das Bild anzuzeigen, ist die Funktion "b64img()" notwendig. Der Platzhalter im Word sollte dann z.B. varImgBase64String.b64img() sein.

Platzhalter im Word
Vorbereitung im Formular-Designer
Erzeugen Sie ein verstecktes Feld oder eine Variable in der der Base64 String abgespeichert wird. In unserem Beispiel ist dies die Variable "varImgBase64String", welches unter Variablen angelegt wird. Sie aber aber auch statt der Variable ein verstecktes Eingabgefeld verwenden.

Das Upload-Element im Formular-Designer

Variablenmanager im Formular-Designer
Vorbereitung im Formular-Workflow
1.) Erstellen Sie im Workflow eine Aktion "Base64 kodieren" und wählen das Upload-Element aus.
2.) Erstellen Sie danach eine Aktion "Formularwerte ändern" und schreiben den Base64String (Rückgabewert der Aktion Base64 kodieren) in die Variable "varImgBase64String".

Workflow-Aktion "Base64 kodieren"

Workflow-Aktion "Formularwerte ändern"

Platzhalter/Rückgabewerte der Workflow-Aktion "Base64 kodieren".
Upload eines Bildes über ein wiederholbares Upload-Element
Hier können Sie sich ein Formularbeispiel anzeigen: https://formexchange.formcycle.eu/formcycle/form/provide/5521/
(Dieses Beispiel kann auch über den Formularstore https://formexchange.formcycle.eu/formcycle/portal/form-store/public/formstore/index.xhtml heruntergeladen werden. Sucheingabe "Word")
Vorbereitung im Word
Bereiten Sie das WordDokument vor und fügen Sie ein Feld/Platzhalter mit dem entsprechenden Namen ein. Um das Bild auch anzuzeigen, ist die Funktion "b64img()" notwendig. Der Platzhalter im Word sollte dann z.B.
tfImgBase64StringWdh.b64img()
sein.
Bitte beachten Sie auch, dass sich der Platzhalter in einer Tabelle befinden muss! Es reicht vollkommen aus, wenn es sich um eine Tabelle mit einer Zeile und Spalte handelt.

Platzhalter im Word
Vorbereitung im Formular-Designer
Erzeugen Sie einen wiederholbaren Container (z.B. "div1") in dem das Upload-Element und ein verstecktes Feld abgelegt wird. In unserem Beispiel ist dies das Feld "tfImgBase64StringWdh" (Versteckter Base64 Container).

Upload-Element in einem wiederholbaren Container mit einem versteckten Eingabefeld.
Vorbereitung im Formular-Workflow
1.) Erstellen Sie eine Schleife (Liste) und wählen "Formularfeldwiederholungen"
2.) Erstellen Sie in der Schleife eine Aktion "Base64 kodieren" und wählen das Upload-Element aus.
3.) Erstellen Sie danach, auch in der Schleife, eine Aktion "Formularwerte ändern" und schreiben den Base64String (Rückgabewert der Aktion Base64 kodieren) in das versteckte Feld "tfImgBase64StringWdh".

Schleife im Workflow auf die Anzahl der Formularfeldwiederholungen im Container "div1".

Workflow-Aktion "Formularwerte ändern" in der Schleife
Upload eines Bildes über ein Upload-Element aber mit Mehrfachauswahl (multiple)
Hier können Sie sich ein Formularbeispiel anzeigen: https://formexchange.formcycle.eu/formcycle/form/provide/236/
(Dieses Beispiel kann auch über den Formularstore https://formexchange.formcycle.eu/formcycle/portal/form-store/public/formstore/index.xhtml heruntergeladen werden. Sucheingabe "Word")
Vorbereitung im Word
Bereiten Sie das Word-Dokument vor und fügen Sie ein Feld/Platzhalter mit dem Namen ein (z.B. "tfImgBase64StringMultiple"). Um das Bild anzuzeigen, ist die Funktion "b64img()" notwendig. Der Platzhalter im Word sollte dann z.B.
tfImgBase64StringMultiple.b64img()
sein.

Platzhalter im Word
Vorbereitung im Formular-Designer
Erzeugen Sie ein verstecktes Feld in dem später der Base64 String abgespeichert wird. Dieses Feld muss wiederholbar sein! In unserem Beispiel ist das wiederholbare versteckte Element "tfImgBase64StringMultiple". Bitte beachten sie, dass nur das versteckte Feld wiederholbar sein muss. Das Upload-Feld ist nicht wiederholbar!

Vorbereitung im Formular-Workflow
1.) Erstellen Sie eine Schleife (Liste) und wählen bei "Zu durchlaufende Werte" die Option "Liste von Anhängen"
2.) Erstellen Sie in der Schleife eine Aktion "Base64 kodieren" und wählen "Vorgangsanhänge mittels Dateinamen suchen" aus. Bei "Dateiname für Suche" wählen Sie über den Platzhaltermanager der aktuellen Schleife den Dateinamen aus. Dies erfolgt dann über den Platzhalter: [%$Schleife (Liste).CURRENT.item.file.name%]
Zum Schluss legen Sie den Typ-Filter auf "Formular-Upload" fest.
Schleife im Workflow auf die Anzahl der Vorgangsanhänge des Uploads .

Workflow-Aktion "Formularwerte ändern" in der Schleife
3.) Erstellen Sie danach, auch in der Schleife, eine Aktion "Formularwerte ändern" und schreiben den Base64String (Rückgabewert der Aktion Base64 kodieren) in das versteckte Feld. Bei "multiple" Upload ist das zu beschreibende Formularfeld (Base64 Container) allerdings nicht der technische Name des Designers. Hier muss der Name über einen "Trick" herausgefunden werden.
- 1.) Schalten Sie das Element sichtbar
- 2.) Öffnen Sie dazu das Formular z.B. in der Vorschau.
- 3.) Markieren Sie das Element und klicken die rechte Maustaste. Es sollte ein Browser-Menü mit dem Eintrag "Element Informationen" oder "Untersuchen ..." kommen.
- 4.) Kopieren Sie sich den Werte vom Attribut "name". In diesen Fall: tfImgBase64StringMultiple_dyn_tfImgBase64StringMultiple_0
- 5.) Entfernen Sie von dem kopierten Wert den hinteren Teil "_0" und kopieren ihn nun als Name in "Formularfeld".

War dieser Artikel hilfreich?
Das ist großartig!
Vielen Dank für das Feedback
Leider konnten wir nicht helfen
Vielen Dank für das Feedback
Feedback gesendet
Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren