Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


Introduction

The File Add Image Tool plugin is used to add uploaded images on every page of an uploaded PDF File or image file (.png, .jpg, and .jpeg only). Supports multiple file uploads.


Plugin Info

Plugin Available in the Bundle:

  1. File Add Image Tool

This plugin bundle is compatible with Joget DX 7.


Expected Outcome

To be able to upload images on every page of multiple PDF files or image files.

Figure 1: Upload image on every page of PDF file and image file


Get Started

Steps

Where to get the plugin

Refer to Source Code and Plugin Download.

How to install and use the plugin

1. You can choose to import the demo app or create the app from scratch. For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details).

2. To create the app from scratch, now let us create a new form File Upload and Download with two File Upload elements.

Figure 2: File Upload and Download Form


3. Create list and crud for the form.

Figure 3: Generate List and CRUD for File Upload and Download Form


4. Create another form to upload the image that will be added to the file later. 

Figure 4: Image Upload Form


5. Create list and crud for this form also.

Figure 5: Generate List and CRUD for Image Upload Form


6. Go to List - Image Upload and add ID as another column in the list.

Figure 6: Modify Image Upload List


7. Launch the UI. Go to Manage Image Upload and upload an image.

Figure 7: Image Upload UI


8. Save the ID of the image. You will need this in the plugin configuration later.

Figure 8: Copy ID of Image


9. Now return to the first File Upload and Download form we created, attach the File Add Image Tool Plugin in the Post Form Submission Processing section.

Figure 9: Attach File Add Image Tool to File Upload and Download Form


10. Fill in the plugin configurations based on File Add Image Tool Properties. Paste the ID saved in step 8 in Source Image > Record Id. Save the form.

Figure 10: Fill in Plugin Configurations


11. Now go to the UI again. Go to Manage File Upload and Download and upload a new PDF file. Save.

Figure 11: Upload a PDF file


12. You can see now the file is generated, with default name <FILENAME>_withImage.pdf. Click edit.

Figure 12: PDF File with Image Generated


13. You can see that the image has been added to every page of the PDF file.

Figure 13: Download and View the Generated PDF File


14. Now let us try uploading an image file instead of a PDF file. You can see that the image is also appended on the image.

Figure 14: Upload and Download Generated Image File


15. Now let us try uploading multiple files. To upload multiple files, we need to enable the checkbox Enable Multiple Files Upload. Save and return to the UI.

Figure 15: Enabling Multiple Files Upload


16. Upload multiple files. You can see that the image is added to multiple files together.

Figure 16: Upload and Download Generated Image on Multiple Files



File Add Image Tool Properties

Configure File Add Image Tool

Figure 17: Plugin Configurations

Name

Description

Source File

Header

Choose Form *

Form where field for source file resides

Choose Field *

Field of source file

Record Id

Record ID of process, if not filled, default value will be current process record ID.

Source Image

Header

Choose Form *

Form where field for source image resides

Choose Field *

Field of source image

Record Id

Record ID of process, if not filled, default value will be current process record ID.

Output File

Header

Choose Form *

Form where field for output file resides

Choose Field *

Field of output file

Record Id

Record ID of process, if not filled, default value will be current process record ID.



Source Code and Plugin Download

  1. Please visit https://github.com/jogetoss/file-add-image-tool for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/file-add-image-tool/releases.
  3. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.