Image uploader

Last update: Edit

An image uploader is used to upload images to the server. It also generates a thumbnail of the uploaded image. The uploaded image or its thumbnail can be shown by use of the image viewer.

An image uploader must be placed in a data view connected to entity System.Image or a specialization thereof.

General properties

Maximum file size (MB)

With this property you can specify the maximum file size (in megabytes) of images that can be uploaded.

Default value: 5

Allowed extensions

You can specify the file extensions that are allowed to be uploaded. If no extensions are specified all file extensions are allowed. Separate multiple extensions by a semi-colon, e.g. png;jpg

If a file with an extension that is not allowed is selected, a system text (File manager > Incorrect file extension) will be shown underneath the file manager.

Thumbnail width

This property determines the width of the generated thumbnail in pixels. However, the aspect ratio of the image will remain the same during thumbnail generation.

Thumbnail height

This property determines the height of the generated thumbnail in pixels. However, the aspect ratio of the image will remain the same during thumbnail generation.

Label properties

A label can be used to described the purpose of the widget to the user. The label is shown next to the widget in the user interface. If a label is configured, the widget will be rendered in the browser wrapped in a form group. See Bootstrap documentation.

Show label

This property determines whether the label is rendered and the widget is wrapped in a form group.

Default value: No

Label caption

This property is shown only when Show label is Yes. This property determines what text is rendered within a label.

Editability properties


The editable property indicates whether the end user will be able to change the value displayed by the widget.

Value Description
Default The value is editable if security allows it (i.e. if the user that is signed in has write rights to the selected attribute).
Never The value is never editable.
Conditional The value is editable if security allows it and the specified condition holds. (see below)

Default value: Default


A widget can be made editable based on the value of an attribute of the enclosing data view. The attribute must be of type boolean or enumeration. For each value, you specify whether the widget is editable. Upon entering the page and upon changing the condition attribute the edit state of the widget will be updated.

Example: you don’t have to ask for the marriage date if the end user indicates that he or she is not married.

Visibility properties


By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met.

Attribute Condition


When checked, this setting hides the widget unless a particular attribute has a certain value. Only boolean and enumeration attributes can be assigned to this purpose.

A practical example would be a web shop in which the user must submit both billing and delivery information. In this case you might not wish to bother the user with a second set of address input fields unless he or she indicates that the billing and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the boolean attribute SameBillingAndDeliveryAddress.

Module roles

The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles. Please note that this does not override project security. Any restrictions due to microflow, form, or entity access will remain in effect.

Common properties


The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.


The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. You can use more than one class, separated by a space. The classes should be classes from the theme that is used in the project. Using the class property overrules the default styling of the widget.

Note that the styling is applied in the following order:

1. Default styling defined by the theme the project uses.
2. The 'Class' property of the widget.
3. The 'Style' property of the widget.


The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

background-color:blue; This will result in a blue background

Tab index

The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.

Default value: 0