<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Process wizard > Define Forms > Form Controls >



The Image control enables the upload and display of images in forms.



The purpose of this control is to display images in an image file format (i.e., bmp, jpg, png, gif). In order to validate that the images conform to the supported image file format, you must first define the allowed extensions in the control's Properties.

Images must be Editable in order to upload an image in the Work Portal. If the control is read-only the end user can only see the control but not upload or modify its content.

Image controls cannot be sent in email messages.


Related to attribute types

This control is related to image type attributes.



The following are properties exclusive to the Image control:


Format tab




Image size

Define the size dimension of the image to be displayed on screen.

You can choose between a predefined size: 128x128, 64x64 and 32x32 mpx or Fit to size.

Fit to size will display images to fit their container: layout, group or column. If the image is smaller than the container, it will be displayed in its real size. If the image is larger than the container, it will be re-sized. See Fit to size


Advanced tab




Valid Extensions

Defines the allowed file extensions for upload images. Separate the different extensions using a semicolon (e.g., png; jpg; gif).

Maximum Size (bytes)

Defines the maximum size (in bytes) that a file can have before it is deemed unsuitable for an upload.

Consider the next table in order to convert to bytes the most common units of measurement for data storage



1 KB (Kilobyte)


1 MB (Megabyte)


1 GB (Gigabyte)




Clicking the Set to default value icon will reset the properties.



In an Onboarding Process, the information of a new employee is entered in the first activity. A photo of the new employee is needed to create the Bizagi profile among other details such as e-mail account, social security and affiliations. In order to upload a photo, an image control must be inserted.


1. First you need an image type attribute in your Data Model. We will create an attribute named Employee photo in the Process Entity.


Forms Components60


2. Drag and drop the Employee photo attribute from the data model onto the Form. Bizagi will automatically interpreted the attribute and add it onto the Form as an Image Control.

Save the Form.


Forms Components57



3. Go to the Work Portal to test the Control.

Click the Control an upload an image.


Forms Components58


Note its size dimensions.


Forms Components59




Using Fit to size option

In the same process of the previous example, the human resources assistant assigns the workstation to the new employee based on the offices layout. The office plan should be displayed in the form to aid the assistant to identify the best place to locate him/her.


As the plan is a big image, the predefine sizes do not work for this case. Therefore, the image will be adjusted to the size of a group container.


To show the image in this way follow the next steps:


1. Insert the image and click it to access its properties


Forms Components155



2. In the properties menu, move to the Format tab


Forms Components156



3. In the image size property select Fit to Size


Forms Components157



4. As well, in the Display type property select Value. This will hide the image label.


Forms Components158


See how the image is displayed in the Work Portal.


Forms Components159






Images uploaded in image type controls with Fit to size as image size might not be correctly displayed in IE8 if their file size is higher than 32Kb.


If you wish to display images higher than 32 Kb in this control, use another image size (128x128, 64x64 or 32x32 mpx), IE9 or another browser.