| 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. Supports multiple file uploads.This plugin source code is available in JogetOSS repository at https://github.com/jogetoss/file-add-image-tool
Plugin Info
Plugin Available in the Bundle:
File Add Image Tool
Configure File Add Image Tool
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.
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.
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.
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
- Please visit https://github.com/jogetoss/file-add-image-tool for the plugin's source code.
- You can find the latest release at https://github.com/jogetoss/file-add-image-tool/releases.
- Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.
Demo
How to create app to use plugin from scratch
You can skip this section if you plan to use the demo app.
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).
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).
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).
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).
Figure 6
6. After saving the form, use the Generate menu to Generate a List for this form (Figure 7).
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).
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).
Figure 9
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).
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).
Figure 12
11. Configure the plugin as shown in Figure 13.
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).
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.
Figure 15
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.
Figure 17
Figure 18
15. Save the UI, and Launch the Application.
Plugin Usage
1. Start with uploading your chosen image to add to the PDF in the Add Image Form (Figure 19).
Figure 19
2. Navigate to the Images List, Take note of the Record ID and save it to your clipboard (Figure 20).
Figure 20
3. 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.
Figure 21
4. 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. You can also upload multiple files, and upload image file type.
Figure 22
5. Navigate to the PDF List CRUD Menu, and select the record you have just created. There you should see the new PDF with image appended in the PDF Output element Figure 23.
Figure 23
Sample