FileButton
Open file picker with a button click
Import
Source
Docs
Package
Usage
Multiple files
Set multiple
prop to enable picking multiple files:
Reset file
resetRef
should be used to fix issue with stale value on hidden input element as input type file cannot be controlled.
Call resetRef
when user selection is cleared:
FileButton component props
Name | Type | Description |
---|---|---|
accept | string | File input accept attribute, for example, "image/png,image/jpeg" |
capture | boolean | "user" | "environment" | Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. |
children * | (props: { onClick(): void; }) => ReactNode | Function that receives button props and returns react node that should be rendered |
disabled | boolean | Disables file picker |
form | string | Input form attribute |
inputProps | Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> | Spreads props to input element used to capture files |
multiple | boolean | Determines whether user can pick more than one file |
name | string | Input name attribute |
onChange * | (payload: Multiple extends true ? File[] : File) => void | Called when files are picked |
resetRef | ForwardedRef<() => void> | Function that should be called when value changes to null or empty array |