FileInput

File input component
The FileInput component allows users to select files.
The File objects produced by this component are basic File API objects. An airplane task configured with a file input is not able to accept File as a parameter—we are working on adding this functionality soon.

Basic usage

The File selected by this file input can be accessed from value[0] on the component state.
Loading view...

Customizing the file selection

Multiple files can be selected if the multiple prop is set. You can also specify a comma-separated list of MIME types to restrict the possible files that can be selected.
Loading view...

API

NameDescriptionDefault
id
string
The ID referenced by the global component state
defaultValue
File[]
The input value on initial render
defaultDisabled
boolean
The input's disabled state on initial render
validate
ValidateFn<File[]> | ValidateFn<File[]>[]
A single function or an array of functions that validate the input value.
required
boolean
Adds red asterisk on the right side of label and sets required on input element Adds red asterisk on the right side of label.
false
disabled
boolean
Disables the input. Prefer to use defaultDisabled and component state.
radius
"xs" | "sm" | "md" | "lg" | "xl"
The input's border radius.
sx
CSSObject
CSS style overrides.
placeholder
string
Hint text displayed when the input is empty.
value
File[]
Selected file if using this component as a controlled component. Prefer to use the component state to get the value.
label
Component
Label displayed above the input.
description
Component
Description displayed below the input.
clearable
boolean
Whether the user can clear the input.
false
accept
string[]
An array of MIME types to accept. For example, ["image/png", "image/jpeg"]
multiple
boolean
Determines whether multiple files can be selected.
false
disableDragAndDrop
boolean
If true, disables drag and drop.
false
maxFiles
number
The maximum number of files that can be selected.
maxSize
number
The maximum allowable file size in bytes.

State API

NameDescription
value
File[]
The files currently in the file input
setValue
(value: File[]) => void
Sets the value of the file input
disabled
boolean
Whether the file input is disabled
setDisabled
(disabled?: boolean) => void
Sets the disabled value of the file input. If the `disabled` value is not provided, the file input will be disabled