File Input
The File Input component lets users select files from their device using a compact input field with a Browse button. Unlike the File Picker, it does not include a drag-and-drop zone — it is designed for inline form use where a familiar, button-triggered file selection is preferred.
Example Usage
A procurement team builds an internal expense management tool where employees submit reimbursement requests. The form includes a File Input component so users can attach receipts by clicking Browse, selecting one or more files, and submitting. The component enforces a 5 MB max file size and accepts only PDFs and images, preventing invalid uploads before they reach the backend.
Properties
Data
Property | Description | Expected Value |
|---|---|---|
| Label | Text displayed as the field label. | String (e.g., Attach Receipt). |
| Placeholder | Hint text shown in the input area when no file is selected. | String (e.g., Click to select file). |
| Allow uploading multiple files | Allows the user to select more than one file at a time. | Toggle (default: enabled). |
| Enable clear selection | Shows a clear (×) button inside the input area to remove the selected file(s). | Toggle (default: disabled). |
| Enable parsing | Parses the file content and makes it available as structured data. | Toggle (default: disabled). |
| File type | When Enable parsing is on, specifies how the file is parsed. | Select — Autodetect from extension, CSV, Microsoft Excel – xls, Microsoft Excel – xlsx, JSON (default: Autodetect from extension). |
Events
| Event | Description |
|---|---|
| On File Selected | Triggers when the user selects one or more files from the file dialog. |
| On File Loaded | Triggers when a selected file finishes loading in the browser. |
info
Check Action Reference docs to get detailed information about all the Actions.
Component Specific Actions (CSA)
The following actions can be controlled using component-specific actions (CSA), triggered via an event or a RunJS query.
Action | Description | How To Access |
|---|---|---|
| clear() | Clears the currently selected file(s). | components.fileinput1.clear() |
| setFocus() | Moves focus to the file input component. | components.fileinput1.setFocus() |
| setBlur() | Removes focus from the file input component. | components.fileinput1.setBlur() |
| setVisibility() | Shows or hides the component. | components.fileinput1.setVisibility(false) |
| setDisable() | Enables or disables the component. | components.fileinput1.setDisable(true) |
| setLoading() | Sets the loading state of the component. | components.fileinput1.setLoading(true) |
Exposed Variables
Variable | Description | How To Access |
|---|---|---|
| files | Array of file objects selected by the user. Each object includes the file name, content, and metadata. | {{components.fileinput1.files}} |
| isParsing | Indicates whether file content is currently being parsed. | {{components.fileinput1.isParsing}} |
| isValid | Indicates whether the selected file(s) pass all validation rules. | {{components.fileinput1.isValid}} |
| fileSize | The size of the selected file in bytes. | {{components.fileinput1.fileSize}} |
| isMandatory | Indicates whether the field is marked as mandatory. | {{components.fileinput1.isMandatory}} |
| isLoading | Indicates whether the component is in a loading state. | {{components.fileinput1.isLoading}} |
| isVisible | Indicates whether the component is currently visible. | {{components.fileinput1.isVisible}} |
| isDisabled | Indicates whether the component is currently disabled. | {{components.fileinput1.isDisabled}} |
Validation
Validation Option | Description | Expected Value |
|---|---|---|
| Mark as mandatory | Displays a validation error if no file is selected on form submission. | Toggle (default: disabled). |
| File type | Restricts accepted file types using MIME types or extensions. | String (e.g., image/*, .pdf, */*). Default: */*. |
| Min size (Bytes) | The minimum allowed file size in bytes. | Number (default: 50). |
| Max size (Bytes) | The maximum allowed file size in bytes. | Number (default: 51200000, ~51 MB). |
| Min files | The minimum number of files required. Only shown when Allow uploading multiple files is enabled. | Number (default: 0). |
| Max files | The maximum number of files the user can select. Only shown when Allow uploading multiple files is enabled. | Number (default: 2). |
info
File types must be valid MIME types or file extensions. MIME type detection may vary across platforms — for example, CSV files are reported as text/plain on macOS and application/vnd.ms-excel on Windows.
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., Upload your expense receipt here.). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Label
Property | Description | Configuration Options |
|---|---|---|
| Color | Sets the label text color. | Select a theme color or pick from the color picker. |
| Alignment | Controls whether the label appears above (Top) or beside (Side) the input field. | Switch — Top (default) / Side. |
| Direction | When alignment is Side, positions the label to the left or right of the input. | Icon toggle — Left (default) / Right. |
| Width | When alignment is Side, determines whether the label width adjusts automatically or uses a fixed value. | Checkbox — Auto (default). Uncheck to set a custom width. |
| Label width | Sets a fixed width for the label. Only available when Side alignment is selected and Auto width is unchecked. | Slider (percentage of component width). |
| Width type | Specifies whether the label width is measured relative to the whole component or just the input field. Only available when Side alignment is selected and Auto width is unchecked. | Select — Of the Component (default) / Of the Field. |
Field
Property | Description | Configuration Options |
|---|---|---|
| Icon | Sets the icon displayed in the Browse button. Toggle the visibility switch to show or hide the icon, and set the icon color using the color picker. | Icon selector with visibility toggle and color picker. |
| Background | Sets the background color of the input field. | Select a theme color or pick from the color picker. |
| Border | Sets the border color of the input field. | Select a theme color or pick from the color picker. |
| Accent | Sets the accent color used for interactive elements such as the Browse button. | Select a theme color or pick from the color picker. |
| Text | Sets the color of the selected file name text. | Select a theme color or pick from the color picker. |
| Error text | Sets the color of validation error messages displayed below the field. | Select a theme color or pick from the color picker. |
| Border radius | Rounds the corners of the input field. | Number (default: 6). Enter a value or click fx to set it programmatically. |
| Box shadow | Adds a shadow effect around the input field. | Set shadow color and properties, or configure programmatically with fx. |
Container
Property | Description | Configuration Options |
|---|---|---|
| Padding | Controls the internal padding of the component. | Switch (Default / None). |
Need Help?
- Reach out via our Slack Community
- Or email us at [email protected]
- Found a bug? Please report it via GitHub Issues