FileInputProps

Properties

accept?

accept?: string;

accept string, exactly as <input accept> takes it.

announce?

announce?: (event) => string;

Announcement text for the live region. Return '' to say nothing.

Parameters

Parameter	Type
`event`	{ `added?`: `number`; `files`: `File`[]; `rejected?`: `FileRejected`[]; `type`: `"add"` \| `"remove"` \| `"reject"`; }
`event.added?`	`number`
`event.files`	`File`[]
`event.rejected?`	`FileRejected`[]
`event.type`	`"add"` \| `"remove"` \| `"reject"`

Returns

string

aria-describedby?

"aria-describedby"?: string;

ids of external error/help text.

aria-label?

"aria-label"?: string;

Accessible name, when there is no visible text to point label at. Wins over label if both are given.

autoFocus?

autoFocus?: boolean;

Focus the field on mount.

Default

false

className?

className?: string;

dedupe?

dedupe?: boolean;

Treat same name + size + timestamp as the same file.

Default

true

defaultValue?

defaultValue?: File[];

Uncontrolled initial list. Ignored when value is provided.

disabled?

disabled?: boolean;

hint?

hint?: ReactNode;

Text inside the drop zone.

Default

a stock sentence

id?

id?: string;

Base id; the input, drop zone, list and live region derive ids from it.

invalid?

invalid?: boolean;

Sets aria-invalid and data-invalid.

label?

label?: ReactNode;

Accessible name for the field. Not rendered — supply your own visible <label htmlFor={${id}-input}> when the design calls for one, exactly as every other input in the suite expects. A node is exposed through a hidden element, since aria-label only takes a string.

Pass it even beside a visible <label>: it also names the drop zone, the field’s one tab stop, which a <label htmlFor> cannot reach. Without it the zone is announced by its hint alone.

maxFiles?

maxFiles?: number;

Maximum number of files. Ignored when multiple is false.

maxSize?

maxSize?: number;

Largest allowed file, in bytes.

minSize?

minSize?: number;

Smallest allowed file, in bytes.

multiple?

multiple?: boolean;

Accept more than one file.

Default

false, like the native input

name?

name?: string;

Name for the underlying <input type="file">.

onAdd?

onAdd?: (file, files) => void;

Fires for each file actually added, after it passed every rule.

Parameters

Parameter	Type
`file`	`File`
`files`	`File`[]

Returns

void

onBlur?

onBlur?: (event) => void;

Parameters

Parameter	Type
`event`	`FocusEvent`<`HTMLElement`>

Returns

void

onChange?

onChange?: (files) => void;

Parameters

Parameter	Type
`files`	`File`[]

Returns

void

onFocus?

onFocus?: (event) => void;

Parameters

Parameter	Type
`event`	`FocusEvent`<`HTMLElement`>

Returns

void

onReject?

onReject?: (attempt) => void;

Fires for each file refused. reason is always set: type, too-large, too-small, duplicate, max-files, or invalid from validate.

Parameters

Parameter	Type
`attempt`	`FileRejected`

Returns

void

onRemove?

onRemove?: (file, index, files) => void;

Fires for each file removed, with the index it occupied.

Parameters

Parameter	Type
`file`	`File`
`index`	`number`
`files`	`File`[]

Returns

void

onWarn?

onWarn?: (warning) => void;

Called in development whenever a prop is rejected or coerced — see FileWarning. When omitted, the same warnings go to console.warn. The entire path is stripped from production builds.

Parameters

Parameter	Type
`warning`	`FileWarning`

Returns

void

previews?

previews?: boolean;

Create object URLs for image files, revoked automatically on removal and unmount. Off by default: a URL that is never revoked is a memory leak, and the caller should opt into the lifecycle deliberately.

Default

false

readOnly?

readOnly?: boolean;

Show the selection but refuse changes.

removeLabel?

removeLabel?: (file) => string;

Accessible name for one file’s remove button.

Parameters

Parameter	Type
`file`	`File`

Returns

string

Default

Remove ${name}

renderFile?

renderFile?: (state) => ReactNode;

Custom rendering for one file row.

Parameters

Parameter	Type
`state`	`FileEntryState`

Returns

ReactNode

required?

required?: boolean;

style?

style?: CSSProperties;

validate?

validate?: (file, existing) => string | boolean;

Final say: true, false, or a string explaining the refusal.

Parameters

Parameter	Type
`file`	`File`
`existing`	`File`[]

Returns

string | boolean

value?

value?: File[];

Controlled list of files.