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:
To add a media field, follow the steps below:
The following tabs are similar across the image and file type fields:
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.
Use this tab to specify general information and set your field type. The field properties are detailed in the table below.
Input Label | Type | Required | Description |
---|---|---|---|
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. |
Mandatory | Toggle | No | Indicate whether the field is mandatory for the user to fill out. |
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 Label | Type | Required | Description |
---|---|---|---|
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. |
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.
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 Label | Type | Required | Description |
---|---|---|---|
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. |
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:
Take note of the following sections when editing an image version:
Refer to the table below for the properties of the fields in the 'Image Versions' tab.
Input Label | Type | Required | Description |
---|---|---|---|
Resized Image Options | Dropdown Field | No | Allows you to set default behaviour when resizing an uploaded image. The list of options is as follows:
|
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:
|
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:
|
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:
|
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. |
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.