FileInput

The FileInput component allows users to select and upload files.

Basic usage

The file selected by this file input can be accessed from value on the component state.

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.
Note that value on the component state is an array when multiple is true.

Basic variant

By default, the file input is a dropzone. For a smaller, button-like file input, set variant to basic.

Airplane integration

FileInput automatically uploads selected files to Airplane, and packages each file with its upload metadata in airplane.AirplaneFile objects. AirplaneFile implements the Blob API and includes a name field, so it can largely be used as a regular JavaScript File object. However, the additional upload metadata allows it to be passed to tasks that are configured to accept file parameters, like so:
Copied
1
const fileState = useComponentState("fileInputId");
2
const { mutate } = useTaskMutation({
3
slug: "task_slug",
4
params: { file_param: fileState.value?.[0] },
5
});

API

NameDescriptionDefault
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.
error
Component
Error displayed below the input.
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"].
disableDragAndDrop
boolean
If true, disables drag and drop. This prop is ignored if variant is "basic".
false
maxFiles
number
The maximum number of files that can be selected. This prop is ignored if variant is "basic".
maxSize
number
The maximum allowable file size in bytes. This prop is ignored if variant is "basic".
getUploadURL
(filename: string, sizeBytes: number) => Promise<{ uploadID: string; readURL: string; writeURL: string; }>
If set, this function will be used to get the upload url for selected files. For convenience, the id field of AirplaneFiles created by this component is set to the upload ID returned by the promise.
value
AirplaneFile | AirplaneFile[]
Selected file(s) if using this component as a controlled component. Prefer to use the component state to get the value.
multiple
boolean
Determines whether multiple files can be selected.
onChange
(v: AirplaneFile) => void | (v: AirplaneFile[]) => void
Callback function for when the file(s) in the file input changes.
id
string
The ID referenced by the global component state.
defaultDisabled
boolean
The input's disabled state on initial render.
variant
"dropzone" | "basic"
The file input variant, either dropzone or basic.
dropzone
validate
ValidateFn<FileInputTValue> | ValidateFn<FileInputTValue>[]
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
false

State API

NameDescription
value
AirplaneFile[] | AirplaneFile | undefined
The file or files currently in the file input
setValue
(value: AirplaneFile[] | AirplaneFile | undefined) => 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