...
Table of Contents
Introduction
| English |
|---|
| Image Upload is designed to cater to images. Uploaded images will be displayed according to dimensions set. |
The Image Upload is only available on Professional and Enterprise Edition.
File uploaded through the Image Upload is stored under "[Joget Installation Directory]/wflow/app_formuploads".
| Info | ||
|---|---|---|
| ||
There are 2 ways you can change the wflow folder path: |
...
The easiest way to see how the ImageUpload works are to use the existing built-in App Expenses Claims. Here are the steps:
...
...
- Start the Joget Server and open the App Center.
- Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Figure 1 - Click on Expense Claim Form and you will be directed to the
...
- Form Builder.
- Drag and Drop an Image Upload element on the canvas and click on Edit to open up the Edit Image Upload properties.
...
- Click on UI, tick
...
- on Enable Multiple Files Upload checkbox and click OK.
...
Figure 2
...
- Click on Preview, c lick inside the box to upload or drag and drop images inside the box.
...
Figure 1
Figure 2
Image Upload Properties
Edit Image Upload
| Name | Description | Screen (Click to view) |
|---|---|---|
| ID | Element ID (By declaring as "photo", a corresponding database table column "c_photo" will be created) Please see Form Element for more information about defining the ID and list of reserved IDs. |
|
| Label | Element Label to be displayed to the end-user. |
UI
General
| Name | Description | Screen (Click to view) | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Allowed multiple files upload? | When checked, multiple files can be uploaded. |
| |||||||||
| Readonly | Determines if the element is editable. | ||||||||||
| Drop zone padding | Determine the extra size of padding for the larger drop zone.
|
Image Display
| Name | Description | Screen (Click to view)|
|---|---|---|
| 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
| Name | Description | Screen (Click to view) | ||||||
|---|---|---|---|---|---|---|---|---|
| Validator | Attach a Validator plugin to validate the input value.
| |||||||
| Maximum File Size (kb) | Maximum File Size (KB) in Integer. | |||||||
| Error Message (File size limit exceeded) | Error Message when file size exceeded. | |||||||
| Image File Type | Accepted file extension(s). (Semicolon separated values)
| |||||||
| Error Message (File type mismatch) | Error Message when file type mismatched. | |||||||
Delete actual file during overwrite or remove? | The actual file will be deleted when a file is removed or being overwritten.
|
Image Resize
| Name | Description | Screen (Click to view) | |||||||
|---|---|---|---|---|---|---|---|---|---|
| Maximum Width (px) | If set, images will be resized to these dimensions before being uploaded.
|
| |||||||
| Maximum Height (px) | If set, images will be resized to these dimensions before being uploaded.
| ||||||||
| Quality (Max 1.0) | set the quality of the resized image. | ||||||||
| Method | sets how the images should be scaled down in case both Maximum Width (px) and Maximum Height (px) are provided. There are only two methods:
|
Permission
| Name | Description | Screen (Click to view)|
|---|---|---|
| Permission | Manage on who is able to access the file uploaded. Read more at Permission Control.  |