Image Support


Upload 1 image


To edit data, please login.

To each record of any table you can easily assign pictures. In this example its exactly 1 picuture. The picture library offers you the upload by dropzone and also the "delete" button to remove the image.

1 or multiple images can be added to a table. This is the setting in the datadefinition:


In the form you have to prepare an element

To integrate the image upload into the form, the form-wrapper is extended with an image container "pic_ph":

Upload multiple images


My Form

You can put any elements here. To assign the image catalog you have to specify the basetype and the object key.

To your form or object you can easily assign multiple images. The picture library appends the following elements to your page:

  • headline with delete button
  • the dropzone upload area
  • the image catalog, the pictures are sortable and selectable


  • masterdata
    • upload:{"enable":true}



the html structure look like this:

Each image container gets an "id" like this:


"ID" is the key of the corresponding table.

the ".js_rec_records" are bind to the plugin "sortable". After the drop event the ID-array is send to the server by ajax. The column "sort" of each record get the new position.

Display 1 image in catalog


In a catalog the first assigned image is displayed. Set the following in the datadefinition:

  • masterdata.upload.enabled=true

The following colums are added to the recordset:

  • image_ID
  • image_file
  • image_orientation
  • image_aspectratio
  • image_width
  • image_height
  • image_count
  • image_array
    • array with the columns above

You can use this columns as placeholder in your html.


the snippet (masterdata/k8references_1_image.html):

Display image with thumbnail list


In the big image container the first image is displayed. By a click on an image in the thumbnail list, it is displayed in the image container.

The thumbnail list is placed in an javascript loop element with the following columns:

  • image_array[], used columns
    • image_ID
    • image_file
    • image_orientation
    • image_aspectratio


the snippet (masterdata/k8references_image_thumbnails.html):


to display the thumbnails by click in the picture frame: