The Attachment field control enables your users to upload one or multiple files while submitting their data through your form. Your users can select the file from their device (in the device's local storage). The following is how a file upload field looks on a form:Yeeflow allows all types of files to be uploaded and downloaded then. However only these type files, including Microsoft Office Suite and PDFs, can be viewed from web browser. The files that your users submit through your form are counted towards your account’s storage limit.
Add Attachment to the form
Firstly, find the Attachment
control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Attachment 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 Attachment control. When you add a new Attachment 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 Attachment control to other existing variables. For more information, please refer:
Appearance of the Attachment field
Open the Content > Appearance block to set the appearance and layout of this Attachment control.
Show file type icon: Turn this ON to show the icon based on the file type.
Upload multiple: Turn ON this option to allow users upload multiple files.
Max count: Set how many files are allowed to be uploaded.
Text of upload button: Enter text or use the expression editor to customize the button's text.
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 Attachment field
Open the Content > Validation block to set the properties of this Attachment control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make it mandatory for your users to upload files in this field.
Single file size limit (MB): Set the maximum size of one file that are allowed to be uploaded. 400MB is the maximum size allowed for a single uploaded file.
Restrict file types: Use this option to restrict the types of files users may upload. If turn this option ON, the file picker will not allow files to be uploaded that do not match the specified filetypes.
Default Value: You can update default file(s) here. If the attachment field is set as read only, users cannot change those default file(s), while if it's editable, users can remove the default file(s).
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 Attachment 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 Attachment field
Layout
Columns Gap: Control the amount of space between each column.
Rows Gap: Control the amount of space between each row.
Content
Width – Set the Width of the file container.
Height – Set the height of the file container.
Padding – Set the Padding of the file container in PX , %, em, rem, vw, calc.
Typography - Change the default typography options for the file name.
Icon Size – Set the size of the icon for file type.
Normal / Hover: Set different styles for normal state and hover state of the file containers. Styles below are supported to be set separately for Normal and Hover state.
Color: Choose the color of the file name.
Background Color: Set background color of the file container. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Operation button – Set the custom styles for operation button
Normal / Hover: Set different styles for normal state and hover state of the operation button. Styles below are supported to be set separately for Normal and Hover state.
Color: Choose the color of the operation button.
Background Color: Set background color of the operation button. By default, the background color is set as transparent.
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.