Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The easiest way to see how the ImageUpload the Image Upload works are to use the existing built-in App Expenses Claims. Here are the steps:

  1. Start the Joget Server  and open the  App Center.

  2. Log in as   admin and click on the pencil icon on the  Expenses Claim  to open the  Design App Composer. (see Figure 1)


    Figure 1

  3. Click on  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 on it to open up the Image Upload properties.

  5. Click on UI, tick on Enable Multiple Files Upload checkbox and click OK.


    Figure 2

  6. Click on Preview, click inside the box to upload or drag and drop images inside the box.

...

NameDescription
Enable Multiple Files UploadWhen checked, multiple files can be uploaded.
Readonly

Determines if the element is editable.

Drop zone paddingZone Padding

Determine the extra size of padding for the larger drop zone.

Info
titleExample

50px

Info
titleExample

5%

...

NameDescription
Validator

Attach a Validator plugin to validate the input value.

Info
titleWhen will validation takes place?

Validation will take place whenever a form is submitted except when it is submitted as "Save as Draft".

Available Options:

  • Basic
  • BeanShell
  • Data and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator
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)

Code Block
titleExample
.png;.jpg
Error Message (File type mismatch)Error Message when file type mismatched.
Delete actual file during overwrite or removeActual File During Overwrite or Remove?

 The actual file will be deleted when a file is removed or being overwritten.

Info
titleNew Feature

Newly introduced in Joget Workflow v6

...