Image Upload

The Image Upload element in Joget is designed specifically for uploading and displaying images according to set dimensions. It is available only in Joget's Enterprise Edition.

Uploaded files are stored under [Joget Installation Directory]/wflow/app_formuploads. You can change the storage path by updating your JAVA_OPTS or adjusting settings in General Settings.

How to set a different storage path

There are two ways to change the storage path of uploaded files:

1. Add -Dwflow.home=PATH to your JAVA_OPTS when starting Tomcat.
2. Set the Uploaded File Storage Base Path option in General Settings.

How does it work?

To see how the Image Upload works. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Expense Claim Form and you will be directed to the Form Builder. 
   
4. Drag and Drop an Image Upload element on the canvas and click on it to open up the Image Upload properties.
5. Click on UI, tick on Enable Multiple Files Upload checkbox and click Apply Change.
   
6. Click on Preview and click inside the box to upload or drag and drop images inside the box.

Configure image upload

Configuring the Image Upload element involves setting the label, ID, UI options, image display properties, and advanced data handling options.

Configure the following fields:

• Label: The element label is to be displayed to the end-user.
• ID: Element ID. By declaring it as a photo, a corresponding database table column c_photo will be created. See Form Element for more information about defining the ID and a list of reserved IDs.

UI

General

Configure the following fields:

• Enable Multiple Files Upload: When checked, multiple files can be uploaded.
• Readonly: Determines if the element is editable.
• Drop Zone Padding: Determines the extra padding size for the larger drop zone. For example, 50px or 5%.

Image Display

Configure the following fields:

• Width (px): Width in integer.
• Height (px): Height in integer.
• Create Thumbnail?: Determines if the element will create a thumbnail and show it below the upload file element after an image is uploaded.

Advanced options

Data

Configure the following fields: 

• Validator: Attach a Validator plugin to validate the input value. Validation occurs whenever a form is submitted except when submitted as Save as Draft.
  • Available Options:
    • Basic
    • BeanShell
    • Date and Time Duplicate Validator
    • Directory
    • Duplicate Value
    • Equal Value
    • Multi Form Validator
    • Password
    • Plugin Template - Validator
• Maximum File Size (KB): Maximum file size in kilobytes. For example, for 10 megabytes, enter 10240 (10,240 kilobytes).
• Error Message (File size limit exceeded): Error message when the file size is exceeded.
• Image File Type: Accepted file extensions (semicolon-separated values). For example, .png;.jpg
• Error Message (File type mismatch): Error message when the file type is mismatched.
• Delete Actual File During Overwrite or Remove?: The actual file will be deleted when it is removed or overwritten.

Image Resize

Configure the following fields: 

• Maximum Width (px): If set, images will be resized to these dimensions before uploading.
• Maximum Height (px): If set, images will be resized to these dimensions before uploading.

• Quality (Max 1.0): Set the quality of the resized image.
• Method: Sets how images should be scaled down if both dimensions are provided.
  There are only two methods: 
  
  • Contain: Default setting to fit within the dimensions.
  • Crop: Crop the image to fit the dimensions.

Permission

Configure the following fields: 

• Permission: Manage who can access the uploaded file. Options include:
  • Logged In Users
  • Public
  • Custom (opens Custom Permission Options)