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 |