FileInput is the lowest-level input component for the file type

FileInput is a specialised input that allows file uploads.

<FileInput>Upload</FileInput>

Required props

The required props FileInput needs are: onSelect and children.

onSelect is a callback that accepts the file selection (as a FileList), when the user interacts with the file browser interface. The file selection can then be used by the parent, for example: to be passed in a POST API call to be saved.

Note: The action of uploading the file to a backend is the parent's responsibility.

children is used to add text to the visible button.

Multiple files

The input can also accept multiple files at once, via the multiple prop.

<FileInput onSelect={(fileSelection) => console.log(fileSelection)} multiple>
Upload
</FileInput>

Restricting the MIME type

The accept prop makes the input filter out unwanted file types and prevent the user from selecting them.

<FileInput
onSelect={(fileSelection) => console.log(fileSelection)}
accept="application/pdf"
>
Upload
</FileInput>

API Reference

PropTypeDefaultRequired
cssCSSProperties

-

-

theme
"primary" | "secondary" | "success" | "danger" | "warning" | "neutral"

-

-

appearance
"outline" | "solid"

-

-

size
"sm" | "md" | "lg"

-

-

isLoading
boolean

-

-

fullWidth
boolean

-

-

asJSX.IntrinsicElements

-

-

onClick
(...args: unknown[]) => void

-

-

href
string

-

-

onFileSelect(selection: FileList | null) => void

-

accept
string

-

-

multiple
boolean

-