Image Uploader

Last modified: April 20, 2023

1 Introduction

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 displayed by a dynamic image. It must be placed inside a data view connected to the entity System.Image or a specialization thereof.

In the example below, an image uploader is placed in a nested data view (the Profile entity is a specialization of System.Image):

Image Uploader

2 Properties

An example of image uploader properties is represented in the image below:

Image Uploader Properties

Image uploader properties consist of the following sections:

2.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

2.2 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

2.3 Editability Section

Editability determines whether an end-user can change the value in an input widget.

For more information on properties of this section, see the Editability Section section of Properties Common in the Page Editor.

2.4 General Section

2.4.1 Maximum file size (MB)

Max file size (MB) determines the maximum size of files (in megabytes) that can be uploaded.

Default: 5

2.4.2 Allowed Extensions

You can specify file extensions that users are allowed to upload. If no extension is specified, all file extensions are allowed. Separate multiple extensions by a semi-colon (for example, jpeg;png).

If a file with an extension that is not allowed is selected, a system text for File manager/dynamic image > Error: incorrect file extension will be shown below the file manager.

Uploaded images are read by the runtime. Mendix use the TwelveMonkeys ImageIO library which supports a wide variety of image formats.

For SVG files, TwelveMonkeys ImageIO itself delegates to the Batik library—which is known to have issues with specifically formatted files. For full information on Batik’s feature support, see this Batik documentation.

2.4.3 Thumbnail Width

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

2.4.4 Thumbnail Height

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

2.5 Label Section

A label describes the purpose of a widget to the end-user.

For more information on properties of this section, see the Label Section section in Properties Common in the Page Editor.

2.6 Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

3 Example of Image Uploader Usage

An image uploader needs to be placed in a data view or a snippet that is connected to System.Image or is a specialization of it.

For that you can create an entity in your domain model and define that it is an image entity. This is done by the concept of inheritance, sometimes called generalization. By inheriting from System.Image your entity gets all the properties of the system image entity.

Do the following:

  1. Open your domain model and create an entity that you would like to define as an image entity.

  2. Double-click the entity to open its properties.

  3. In the Generalization property, click Select.

  4. In the Select Entity dialog box, choose System.Image and click the Select button.

  5. Click OK. Your entity now inherits all properties from the System.Image entity you selected:

  6. Open a page or a snippet where you would like to place the image uploader and add a data view there.

  7. Set the image entity you have created in your domain model as data view’s data source.

  8. Place the image uploader inside the data view. You can reference the page example below:

4 Read More