The image field control enables your users to submit one or multiple images through your form. They can either take a photo or upload images. The following is how an image field looks on a form:
How to add an image field
Firstly, find the Image control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Image field
Open the Content > Basic block and set the Title's text of this Multiple Metadata control. For more information about Title for field control, please refer:
Set the Associated variable for this Image control. When you add a new Image control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Image control to other existing variables. For more information, please refer:
Appearance of the Image field
Open the Content > Appearance block to set the appearance and layout of this Image control.
Multiple: Turn ON this option to allow users upload multiple images.
Max selection: Set how many images are allowed to be uploaded.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Allow comment: Turn on this option will allow users to add comments on this control.
Validation of the Image field
Open the Content > Validation block to set the properties of this Image control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make it mandatory for your users to upload image in this field.
Single image size limit (MB): Set the maximum size of one image that are allowed to be uploaded. The default size of an image field is 1MB, you can change the size. 20MB is the maximum size allowed for a single uploaded image.
Default Value: You can update default image(s) here. If the image field is set as read only, users cannot change those default images, while if it's editable, users can remove the default images.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation.
Action call of the Image field
Open the Content > Action
block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this image field is changed.
Style the Image field
Layout
Columns Gap: Control the amount of space between each column.
Rows Gap: Control the amount of space between each row.
Image
Width – Set the picture Width
Height – Set the height for the picture
Object Fit – The object-fit sets how the picture should be resized to fit its container.
Opacity – Set the Opacity
CSS Filters – Set CSS Filters: Blur, Brightness, Contrast and Saturation
Border Type – Set a Border Type
Radius – Set a Border Radius
Shadow – Set Box Shadow: Horizontal, Vertical, Blur, and Spread
Remove button
Color: Choose the color of the remove symbol.
Background Color: Set background color of the remove button.
Upload button
Margin: Set the Margin of the button in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the button in PX , %, em, rem, vw, calc.
Typography: Change the default typography options for the button’s text
Normal / Hover:Set different styles for normal state and hover state of the textbox. Styles below are supported to be set separately for Normal and Hover state.
Color: Select the color of the button’s text
Background Color: Select the button’s background color.
Border Type: Select the type of border to use around the button
Shadow: Set options to apply a box shadow on the button
Alignment: Align the button to the left, center, right, or justified in relation to its column.
Position: Select Start to display the upload button before the images, while select End to display the button after the images.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.