File Add Image Tool Plugin

Introduction

The File Add Image Tool Plugin allows you to add uploaded images and text on every page of an uploaded PDF file or image file (supports .png, .jpg, and .jpeg). It also supports multiple file uploads, making it versatile for handling various file types within your application.

Plugin information

• Plugin Name: File Add Image Tool
• Compatibility: Joget DX 7 and onwards
• Included in the bundle: File Add Image Tool

Get started

Prerequisites

Before using the File Add Image Tool plugin:

• You need access to Joget DX 7 or a later version.
• Ensure you have the plugin file downloaded.

Where to get the plugin

• Visit the GitHub repository for the source code.
• The latest release can be found in the File Add Image Tool - Releases.

How to install

1. Download the plugin JAR file from the releases page.
2. Go to Settings > Manage Plugins > Upload Plugin.
3. Once uploaded, the plugin will be available in your Joget environment.

How to use it

1. You can import the demo app or create a new app from scratch. To import the demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (see another KB—Import Joget App for more details).
2. To create the app from scratch, let's create a new form, File Upload and Download, with two File Upload elements.
   
3. Create list and crud for the form.
   
4.  Create another form to upload the image that will be added to the file later.
   
5. Create a list and crud for this form also.
   
6. Go to List - Image Upload and add ID as another column in the list.
   
7.  Launch the UI. Go to Manage Image Upload and upload an image.
   
8. Save the ID of the image. You will need this later in the plugin configuration.
9. Return to the first File Upload and Download form created and attach the File Add Image Tool Plugin in the Post Form Submission Processing section.
   
10. Fill in the plugin configurations based on Configure File Add Image Tool Properties. Paste the ID saved in step 8 in Source Image > Record Id. Save the form.
    
11. Go to the UI again. Go to Manage File Upload and Download and upload a new PDF file. Save.
    
12. You can see how the file is generated with the default name based on the Table. Click edit.
    
    

    Action	File Naming Convention
    Add Image	<filename>_withImage.<fileextension>
    Add Text	<filename>_withText.<fileextension>
    Add Image and Text	<filename>_withImageAndText.<fileextension>

13. You can see that the image and text have been added to every PDF file page.
    
14. Let us try uploading an image file instead of a PDF file. You can see that the image and text are also appended to the image file.
    
15. Let's try uploading multiple files. To do so, you need to enable the checkbox Enable Multiple Files Upload.
16. Save and return to the UI.
    
17. Upload multiple files. You can see that the image is added to multiple files together.
    

Configure file add image tool properties

The File Add Image Tool has various configuration fields, as detailed below:

Source file

Fields to configure:

• Choose Form: Select the form where the source file is located.
• Choose Field: Choose the file field.
• Record ID: Enter the record ID of the process (if left blank, the current process record ID will be used).

Data to add into file

Add image

If the checkbox is checked, the below fields will be available

Fields to configure:

• Choose Form for Image: Select the form to retrieve the image.
• Choose Field for Image: Select the image field.
• Record ID for Image: Provide the record ID for the image.
• Padding: Set padding between the image and the file's content.
• 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 the Image Position is Manual, this value can be set as x coordinate for the image. Default value is 300.
• Position Y: If the Image Position is Manual, this value can be set as y coordinate for the image. Default value is 300.

Add text

If the checkbox is checked, the below fields will be available

Fields to configure:

• Text: Provide the text to add.
• Text Font Size: Set the font size (default is 12).
• Text Color: Set the text color (hex value).
• Padding: Set padding between the text and the file's content.
• Text Position: Choose between static or manual positioning.
  • Static
  • Manual
• Position: Fixed position of the text
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
• Position X:  If the Text Position is Manual, this value can be set as x coordinate for the text. Default value is 100.
• Position Y: If the Text Position is Manual, this value can be set as y coordinate for the text. Default value is 480.

Output file

• Choose Form: Select the form where the output file will be stored.
• Choose Field: Select the output file field.
• Record ID: Enter the record ID for the output file (if left blank, the current process record ID will be used).

Expected outcome

After following the steps, you can generate PDF or image files with added images and text on each page.

Download plugin

• Source Code and Plugin Download

Download sample app