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 and text on every page of an uploaded PDF File or image file (.png, .jpg, and .jpeg only). Supports multiple file uploads. 

Get Started

...


Plugin Info

Plugins Available in the Bundle:

  1. File Add Image Tool

...

Steps To Import This Plugin

 1. Go to the website https://github.com/jogetoss/pdf-file-add-image-tool

2. Go to the "Releases" page (See Figure 1).

Image Removed

Figure 1

3. Click on the .jar file to initiate the download (see Figure 2).

Image Removed

Figure 2

4. Go to your Joget localhost or server and login as admin.

5. In Joget Console navigate to "Admin Bar>Systems Settings>Manage Plugins" and click the "Upload Plugins" button.

6. In "Upload Plugin", select the plugin .jar file you downloaded, then click "Upload".

7. You should be able to view the newly installed plugin under the Installed Plugins tab.

8. Remember to always uninstall the old plugin before uploading a new version.

The Joget Knowledge Base has more information on managing and developing plugins.

Steps to use the Plugin

1. Start the Joget server and open the App Center.

2. Login as admin and click on Design New App or click on existing application (See Figure 3).

Image Removed

Figure 3

3. For new applications, fill up the App ID and App Name then proceed to click on the Save button (See Figure 4).

Image Removed

Figure 4

4. Let's start with creating a form that'll serve for uploading the original PDF and obtaining the edited PDF, fill up the form ID and form name and Save the form (See Figure 5).

Image Removed

Figure 5

5. Add 2 File Upload elements to the form and name them PDF Upload and PDF Output, then Save the form (See Figure 6).

Image Removed

Figure 6

6. After saving the form, use the Generate menu to Generate a List for this form (Figure 7).

Image Removed

Figure 7

7. Now let's create another Form to upload the image that shall be added to the PDF, fill up the form ID and form name and Save the form (Figure 8).

Image Removed

Figure 8

8. Add a File Upload element to the form and name it Image Upload (Figure 9). Save the form, and then from the Generate menu, generate a List (Figure 10).

Image Removed

Figure 9

Image Removed

Figure 10

9. Go to the List that has just been created (List - Add Images), and add the ID column to the list and then Save the List (Figure 11). 

Image Removed

Figure 11

10. Navigate back to the Add PDF Form, and select Settings > Advanced. Select PDF Add Image File as the Post From Submission Processing Tool (Figure 12).

Image Removed

Figure 12

11. Configure the plugin as shown in Figure 13.

Image Removed

Figure 13

12. Now let's create a UI to interact with all the components we just created. After creating the UI, Create 2 UI Categories, Name one PDF Setup and the other Image Setup (Figure 14).

Image Removed

Figure 14

13. Add a Form UI Menu and a CRUD UI menu to the PDF Setup Category , and configure them as shown in Figures 15 &16. 

Image Removed

Figure 15

Image Removed

Figure 16

14. In the Image Setup Category, add a Form UI Menu and a List UI Menu. Configure them as shown in Figures 17 & 18.

Image Removed

Figure 17

Image Removed

Figure 18

15. Save the UI, and Launch the Application.

16. Start with uploading your chosen image to add to the PDF in the Add Image Form (Figure 19). 

Image Removed

Figure 19

17. Navigate to the Images List, Take note of the Record ID and save it to your clipboard (Figure 20).

Image Removed

Figure 20

18. Navigate back to the Add PDF Form, and add the saved Record ID to the plugin settings as shown in Figure 21. Save the Form.

Image Removed

Figure 21

19. In the Application, navigate to the Add PDF Form UI menu, upload your chosen PDF to the PDF Upload element (Figure 22) and Save your addition.

Image Removed

Figure 22

20. Navigate to the PDF List CRUD Menu, and select the record you have just created. There you should see the edited PDF in the PDF Output element Figure 23.

Image Removed

Figure 23

Below, You can download the completed sample application created in this guide.

This plugin bundle is compatible with Joget DX 7 and onwards.


Expected Outcome

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

Image Added

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.

Image Added

Figure 2: File Upload and Download Form


3. Create list and crud for the form.

Image Added

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. 

Image Added

Figure 4: Image Upload Form


5. Create list and crud for this form also.

Image Added

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.

Image Added

Figure 6: Modify Image Upload List


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

Image Added

Figure 7: Image Upload UI


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

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

Figure 11: Upload a PDF file


12. You can see now the file is generated, with default name based on Table 1. Click edit.

Image Added

Figure 12: PDF File with Image and Text Generated

Data AddedFile Name Generated
Add Image<filename>_withImage.<fileextension>
Add Text<filename>_withText.<fileextension>
Add Image, Add Text<filename>_withImageAndText.<fileextension>

Table 1: Naming of File Generated


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

Image Added

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 and text is also appended on the image file.

Image Added

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.

Image Added

Figure 15: Enabling Multiple Files Upload


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

Image Added

Figure 16: Upload and Download Generated Image on Multiple Files



File Add Image Tool Properties

Configure File Add Image Tool

Image Added

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.

Data to Add into File

Header

Add Image

If checkbox is checked, below fields will be available

Image Added

Figure 18: Add Image Configurations

NameDescription
Choose Form for Image *Form to retrieve image from
Choose Field for Image *Field of image
Record Id for ImageRecord for image to retrieve
PaddingPadding between the image when added into the file
Image Position *

Position of the image to be added to the file

  • Static
  • Manual
Position *

Fixed position of the image

  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
Position X *If Image Position is Manual, this value can be set as x coordinate for the image. Default value is 300.
Position Y *If Image Position is Manual, this value can be set as y coordinate for the image. Default value is 300.

Add Text

If checkbox is checked, below fields will be available

Image Added

Figure 19: Add Text Configurations

NameDescription
Text *Value of text to be added to file
Text Font Size *Font size of text to be added to file. Default value is 12.
Text Color *Color of text to be added to file in hex value
PaddingPadding between the text when added into the file
Text Position *

Position of the text to be added to the file

  • Static
  • Manual
Position *

Fixed position of the text

  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
Position X *If Text Position is Manual, this value can be set as x coordinate for the text. Default value is 100.
Position Y *If Text Position is Manual, this value can be set as y coordinate for the text. Default value is 480.


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.


...