Media Field Types

Last updated on August 15, 2024.

The Media Field allows you to specify the type, size, format, and other parameters of files that end users can upload onto your Instance. This field has two user interface elements:

  • File
  • Image

To add a media field, follow the steps below:

  1. Navigate to Databases from the main menu.
  2. Select All Databases.
  3. Find the database you want to add a 'Media' field to and press its Configuration row action link.
  4. Go to the 'Fields' tab and click on ADD FIELD. Provide a field name.
  5. Select 'Media' on the 'Field Type' dropdown field.
  6. Choose 'Media - File' or 'Media - Image' on the 'UI Element' dropdown field.
  7. Fill out the fields on the following tabs:
    • Properties
    • Metadata
    • Appearance
    • Advanced
    • Image Versions (for 'Media - Image' only)
  8. Select SAVE FIELD when you are done constructing a new field or making changes to an existing one.
  9. Select SAVE to finalize your database updates.

Images and Files

The following tabs are similar across the image and file type fields:

  • Properties
  • Metadata
  • Appearance
  • Advanced

They allow you to further specify and control the data on your Instance. You can use these to reduce data storage overhead by limiting file sizes and character lengths. You can also create a better user experience by providing tooltips, placeholders, and example data.

Properties

Use this tab to specify general information and set your field type. The field properties are detailed in the table below.

Input LabelTypeRequiredDescription
Field Name Text Field Yes Name of the field.
Field Type Dropdown Field Yes Data type of the field.
UI Element Dropdown Field Yes UI element shown when editing database items. This UI element is also used on any forms you create to link to your database. The UI element used for the media field type is an input field where the user can drag and drop files or images. Alternatively, users can click on the input field, which opens the device's file explorer allowing the user to choose file/s to upload.
MandatoryToggleNoIndicate whether the field is mandatory for the user to fill out.

Metadata

This tab allows you to input metadata (descriptions about data) concerning the fields in your database. For example, you may use the 'Placeholder' field to show an example input to help your users. You may also describe the field you are building in more detail using the 'Description' / 'Notes' field for future reference. The field properties on this tab are detailed in the table below.

Input LabelTypeRequiredDescription
Error Message Text Field No Error message shown whenever an incorrect input is made. This error message is not displayed on the Instance Admin but will be discussed in more detail in the Form Builder section.
Example Data Text Field No Sample input data, including proper formatting and best practices.
Validation Text Field No Notes about the field's regex validation rules.
Default Value Text Field No Default value of the field.
Character Limit Numeric Field No Use this field to take note of the character limit.
Placeholder Text Field No Possible placeholders for this particular field. A placeholder is a short hint describing a given input's expected value. For example, in a field asking a user to input a car brand, you may display an opaque example such as 'Mazda' in the field to help the user.
Description / Notes Text Area No Notes about any properties and behaviors not covered by the available metadata fields.
Mock Data Code Editor No Mock data for the field. Useful in development.

Appearance

Use the text field in this tab to take down notes that are useful in writing tooltips. You can use tooltips to provide brief, helpful and contextual content to improve the user experience in your Instance Admin.

Advanced

This tab allows you to specify your media field's access and file size limitations. Refer to the table below for this tab's field properties:

Input LabelTypeRequiredDescription
Access Control List Dropdown Field No Choose between the 'Public' and 'Private' field values. Setting this field to 'Private' prevents users from previewing and downloading attached files.
Content Disposition Dropdown Field No Enables you to indicate if the content is expected to be displayed 'inline' in the browser, that is, as a web page or as part of a web page, or as an 'attachment' that is downloaded and saved locally.
Content Length (Min) Numeric Field No Set server-side validation for the minimum file size in kilobytes. For example, an input of '2048' will set the minimum input file size (not the generated version) to 2MB.
Content Length (Max) Numeric Field No Set server-side validation for the maximum file size in kilobytes. For example, an input of '4096' will set the maximum input file size (not the generated version) to 4MB.

Image Versions

The 'Media - Image' field type has an additional tab labelled 'Image Versions'. This powerful feature allows you to automatically create multiple specific image versions when uploaded. An example use case is where a user uploads a large image; you can dynamically create a thumbnail, small, medium and large versions of that image for your application.

This is highly beneficial to ensure that your application does not display oversized images unnecessarily, slowing down the user experience. It also saves you time but does not require pre-processing multiple image sizes within image editors. To create or edit an image version:

  1. Navigate to Databases from the main menu.
  2. Select All Databases.
  3. Find the database you want to add a 'Media' field to and press its Configuration row action link.
  4. Go to the 'Fields' tab and click on ADD FIELD. Provide a field name.
  5. Select 'Media' on the 'Field Type' dropdown field.
  6. Choose 'Media - Image' on the 'UI Element' dropdown field.
  7. Go to the 'Image Versions' tab, then click on the dropdown field labelled 'Image Version' to choose an image version or create a new one.
  8. To add an image version, type the name of your version, then select ADD. To edit an image version, select one displayed in the dropdown field.
  9. Proceed with configuring your image version options on the 'Image Versions' tab.
  10. Press SAVE FIELD when done.

Take note of the following sections when editing an image version:

  • Resize
  • Output
  • Manipulate

Refer to the table below for the properties of the fields in the 'Image Versions' tab.

Input LabelTypeRequiredDescription
Resized Image Options Dropdown Field No

Allows you to set default behaviour when resizing an uploaded image. The list of options is as follows:

  • Cover: Crop to cover both the provided dimensions (default).
  • Contain: Embed within both provided dimensions.
  • Fill: Ignore the input aspect ratio and stretch to both provided dimensions.
  • Inside: Preserving aspect ratio, resize the image as large as possible while ensuring its dimensions are less than or equal to both specified dimensions.
  • Outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both specified dimensions.
Enlarge Toggle No Enlarge the image if it is smaller than the width/height.
Width (px) Numeric Field No Allows you to adjust image width in pixels. Toggle to 'Auto', and Insites will use the parameter set in the 'Resized Image Options' field to determine image size.
Height (px) Numeric Field No Allows you to adjust image height in pixels. Toggle to 'auto', and Insites will use the parameter set in the 'Resized Image Options' field to determine image size.
Position Dropdown Field No

Define gravity direction when cropping an image using the 'cover' or 'contain' options. Choose from the following options:

  • Auto
  • Top
  • Right Top
  • Right
  • Right Bottom
  • Bottom
  • Left Bottom
  • Left
  • Left Top
  • Center
Background Colour Picker No Define the background colour when using the 'contain' resized image option.
Format Dropdown Field No

Force the file extension of the output image. Leave blank to keep the original image format. Choose from the following options:

  • Auto
  • JPG / JPEG
  • PNG
  • WEBP
Quality Numeric Field No

Define the quality of the output. 100 is the best (and largest in terms of file size). Keep in mind that compression has different effects on different formats. Defaults:

  • PNG: 80
  • WEBP: 80
  • JPEG: 85
Image Blur Numeric Field No Blurs an image. Define the value (0.3 - 1000) representing the sigma of the Gaussian mask, where sigma = 1 + radius / 2.
Flatten Colour Picker No Merge alpha transparency channel (if it exists) with your defined colour.
Grayscale Toggle No Toggle to convert image to 8-bit grayscale; 256 shades of gray.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.