...
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.  |
