Input File
The Avonni File Input component allows users to upload one or multiple files directly within a screen flow. It supports accepted file type restrictions, validation rules, and standard input states such as required and disabled.
Overview
Add the File Input component to a screen to let users attach files before submitting a flow. You can restrict which file types are accepted, allow single or multiple file selection, and enforce required-field validation with custom error messages.
Configuration
To configure the File Input, select it on the canvas. The Edit File Input panel opens on the right. The sections below mirror the configuration panel from top to bottom.
Properties
Label
The text label displayed above the file input field.
Variant
Controls how the label is displayed relative to the input.
Standard (default)
Label appears above the input.
Label Hidden
Label is hidden from view.
Label Inline
Label appears to the left of the input on the same line.
Label Stacked
Label starts above and shifts when the field is active.
Multiple
When enabled, users can select more than one file at a time.
Accepted Formats
Restricts which file types the input accepts. Enter one or more file extensions or MIME types separated by commas (for example: .jpg, .png, .pdf).
Required
When enabled, the user must select a file before the flow can proceed.
Message When Value Missing
Custom error message shown when a required file has not been provided. Requires Required to be enabled.
Disabled
When enabled, the input is disabled and users cannot interact with it.
Message When Bad Input
Custom error message displayed when an invalid file is detected. Available under advanced options.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the File Input. Configure them from the Interactions tab of the Edit File Input panel.
Change
Fires when the user selects or changes the selected file(s). The files output variable is populated with the selected files and can be used to drive subsequent flow logic.
Output Variables
The File Input exposes this output variable you can reference elsewhere on the page after the user interacts with it.
File Selection
Updates when the user selects or changes the file(s) in the input.
Files
Text Collection
The files the user selected. Populated when the user picks one or more files and the Change interaction fires.
Example: After a user selects a résumé, use Files to display the chosen files in a text component or pass them to a flow variable for downstream processing.
Styling
Configure the File Input's appearance from the Style tab of the Edit File Input panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Last updated
Was this helpful?