...

Introduction

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

Get Started

The easiest way to see how the ImageUpload 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. (see Figure 1)
   
   Image Added
   Figure 1
   
   
3. Click on    Expense Claim Form  and you will be directed to the

...

1. Form Builder. 
   
   
2. Drag and Drop an Image Upload element on the canvas and click on Edit to open up the Edit Image Upload properties.

...

1. 
   
   
2. Click on UI, tick

...

1. on Enable Multiple Files Upload checkbox and click OK.

...

1. Image Added
   Figure 2

...

1. 
   
   

2. Click on Preview, c lick inside the box to upload or drag and drop images inside the box.

^{Image Removed}

^{Figure 1}

Image Removed

^{Figure 2}

Image Upload Properties

Edit Image Upload

Image Added

Image Removed

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

Image Added

Image Display

Image Added

Advanced Options

Data

Image Added

Screen (Click to view)Image Removed

Name	Description
Validator	Attach a Validator plugin to validate the input value. Info title When will validation takes place? Validation will take place whenever a form is submitted except when it is submitted as "Save as Draft".
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 title Example .png;.jpg
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. Info title New Feature Newly introduced in Joget Workflow v6

Image Resize

Image Added

Name	Description

Screen (Click to view)

Maximum Width (px)	If set, images will be resized to these dimensions before being uploaded. Info icon false title Note If only one, Maximum Width (px) or Maximum Height (px), the original aspect ratio of the file will be preserved.

Image Removed

Maximum Height (px)	If set, images will be resized to these dimensions before being uploaded. Info icon false title Note If only one, Maximum Width (px) or Maximum Height (px), the original aspect ratio of the file will be preserved.
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: contain crop  Info icon false title Note By default, it will set to contain.

Permission

Image Added

Name	Description

Screen (Click to view)

Permission

Manage on who is able to access the file uploaded. Read more at Permission Control.

Image Removed