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.
tsx
Copied
1
<FileInput id="fileInput" label="Resume" placeholder="Upload" />
2
<Text>The file name is {fileInputState.value?.name}</Text>

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.
tsx
Copied
1
const FileInputMultiple = () => {
2
  const fileInputState = useComponentState("fileInput");
3


4
  return (
5
    <Stack>
6
      <FileInput
7
        id="fileInput"
8
        label="Images"
9
        placeholder="Upload"
10
        accept={["image/jpeg", "image/png"]}
11
        multiple
12
      />
13
      <Text>The file names are {fileInputState.value?.map((f) => `"${f.name}"`).join(", ")}</Text>
14
    </Stack>
15
  );
16
};

Basic variant
By default, the file input is a dropzone. For a smaller, button-like file input, set variant to basic.
tsx
Copied
1
<FileInput id="fileInput" variant="basic" label="Resume" placeholder="Upload" />
2
<Text>The file name is {fileInputState.value?.name}</Text>

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
});

Component API
accept
optional
string[]

An array of MIME types to accept. For example, ["image/png", "image/jpeg"].

clearable
optional
Default
false
boolean

Whether the user can clear the input.

defaultDisabled
optional
boolean

The input's disabled state on initial render.

description
optional
Component

Description displayed below the input.

disabled
optional
boolean

Disables the input. Prefer to use defaultDisabled and component state.

disableDragAndDrop
optional
Default
false
boolean

If true, disables drag and drop. This prop is ignored if variant is "basic".

error
optional
Component

Error displayed below the input.

getUploadURL
optional
(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.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
id
optional
string

The ID referenced by the global component state.

label
optional
Component

Label displayed above the input.

maxFiles
optional
number

The maximum number of files that can be selected. This prop is ignored if variant is "basic".

maxSize
optional
number

The maximum allowable file size in bytes. This prop is ignored if variant is "basic".

multiple
optional
boolean

Determines whether multiple files can be selected.

onChange
optional
(v: AirplaneFile) => void | (v: AirplaneFile[]) => void

Callback function for when the file(s) in the file input changes.

placeholder
optional
string

Hint text displayed when the input is empty.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

The input's border radius.

required
optional
Default
false
boolean

Adds red asterisk on the right side of label and sets required on input element

validate
optional
ValidateFn<FileInputTValue> | ValidateFn<FileInputTValue>[]

A single function or an array of functions that validate the input value.

value
optional
AirplaneFile | AirplaneFile[]

Selected file(s) if using this component as a controlled component. Prefer to use the component state to get the value.

variant
optional
Default
dropzone
"dropzone" | "basic"

The file input variant, either dropzone or basic.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
disabled
optional
boolean

Whether the file input is disabled

setDisabled
optional
(disabled?: boolean) => void

Sets the disabled value of the file input. If the disabled value is not provided, the file input will be disabled

setValue
optional
(value: AirplaneFile[] | AirplaneFile | undefined) => void

Sets the value of the file input

value
optional
AirplaneFile[] | AirplaneFile | undefined

The file or files currently in the file input

PrivacyTermsSupport