Display Generated Image On Next Page Form For Approval

Describe the problem/error/question

Hello. I want to display an image generated in the workflow to the user for approval before proceeding. The image is in both base64 and binary formats during various times in the process and eventually uploaded to Google Drive. Also, this will be local only so hosting the image on a website is not an option and the workflow functions as expected beyond this addition.

What I’ve read - some are doing this using the html tag in the form and someone else was embedding the image b64 string in the form but they did not provide an example.

What I’ve tried - using the b64, binary and shared Google Drive link, all of which did not work. I also tried writing the binary file to a local shared directory setup in Docker Desktop. The file is there but still no joy. Full disclosure, this may very well be my fault so apologies if that’s the case. Workflow provided without the next page form and if node implemented.

Any help would be appreciated and thanks in advance for your time responding.

Rob

What is the error message (if any)?

Please share your workflow

Share the output returned by the last node

Information on your n8n setup

  • n8n version: 1.112.5
  • Database (default: SQLite): SQLite
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app): Docker Desktop
  • Operating system: Windows WSL

Hi @robkleinpeter

In this example, you can display an image using the binary data in the Form Description (not sure why it doesn’t work in the Custom HTML element type),
However, you can use the Custom HTML element type with an iframe and the public Google Drive image link.

Also, the loop will keep running until the user chooses “Yes”
Use this example as a guide and choose the approach you prefer:

The iframe code because the forum cant let me post it:

3 Likes

That is exactly what I needed Mohamed! Thanks for your time. It’s really appreciated!

1 Like