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:Copied1const fileState = useComponentState("fileInputId");2const { mutate } = useTaskMutation({3slug: "task_slug",4params: { file_param: fileState.value?.[0] },5});
API
| Name | Description | Default |
|---|---|---|
| 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
| Name | Description |
|---|---|
| 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 |