FileInputProps
Properties
Section titled “Properties”accept?
Section titled “accept?”optional accept?: string;accept string, exactly as <input accept> takes it.
announce?
Section titled “announce?”optional announce?: (event) => string;Announcement text for the live region. Return '' to say nothing.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | { added?: number; files: File[]; rejected?: FileAttempt[]; type: "add" | "remove" | "reject"; } |
event.added? | number |
event.files | File[] |
event.rejected? | FileAttempt[] |
event.type | "add" | "remove" | "reject" |
Returns
Section titled “Returns”string
aria-describedby?
Section titled “aria-describedby?”optional aria-describedby?: string;ids of external error/help text.
aria-label?
Section titled “aria-label?”optional aria-label?: string;Accessible name, when there is no visible text to point label at. Wins
over label if both are given.
autoFocus?
Section titled “autoFocus?”optional autoFocus?: boolean;Focus the field on mount.
Default
Section titled “Default”falseclassName?
Section titled “className?”optional className?: string;dedupe?
Section titled “dedupe?”optional dedupe?: boolean;Treat same name + size + timestamp as the same file.
Default
Section titled “Default”truedefaultValue?
Section titled “defaultValue?”optional defaultValue?: File[];Uncontrolled initial list. Ignored when value is provided.
disabled?
Section titled “disabled?”optional disabled?: boolean;optional hint?: ReactNode;Text inside the drop zone.
Default
Section titled “Default”a stock sentenceoptional id?: string;Base id; the input, drop zone, list and live region derive ids from it.
invalid?
Section titled “invalid?”optional invalid?: boolean;Sets aria-invalid and data-invalid.
label?
Section titled “label?”optional 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.
maxFiles?
Section titled “maxFiles?”optional maxFiles?: number;Maximum number of files. Ignored when multiple is false.
maxSize?
Section titled “maxSize?”optional maxSize?: number;Largest allowed file, in bytes.
minSize?
Section titled “minSize?”optional minSize?: number;Smallest allowed file, in bytes.
multiple?
Section titled “multiple?”optional multiple?: boolean;Accept more than one file.
Default
Section titled “Default”false, like the native inputoptional name?: string;Name for the underlying <input type="file">.
onAdd?
Section titled “onAdd?”optional onAdd?: (file, files) => void;Fires for each file actually added, after it passed every rule.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
file | File |
files | File[] |
Returns
Section titled “Returns”void
onBlur?
Section titled “onBlur?”optional onBlur?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onChange?
Section titled “onChange?”optional onChange?: (files) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
files | File[] |
Returns
Section titled “Returns”void
onFocus?
Section titled “onFocus?”optional onFocus?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onReject?
Section titled “onReject?”optional onReject?: (attempt) => void;Fires for each file refused, with a machine-readable reason.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
attempt | FileAttempt |
Returns
Section titled “Returns”void
onRemove?
Section titled “onRemove?”optional onRemove?: (file, index, files) => void;Fires for each file removed, with the index it occupied.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
file | File |
index | number |
files | File[] |
Returns
Section titled “Returns”void
onWarn?
Section titled “onWarn?”optional 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
Section titled “Parameters”| Parameter | Type |
|---|---|
warning | FileWarning |
Returns
Section titled “Returns”void
previews?
Section titled “previews?”optional 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
Section titled “Default”falsereadOnly?
Section titled “readOnly?”optional readOnly?: boolean;Show the selection but refuse changes.
removeLabel?
Section titled “removeLabel?”optional removeLabel?: (file) => string;Accessible name for one file’s remove button.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
file | File |
Returns
Section titled “Returns”string
Default
Section titled “Default”Remove ${name}
renderFile?
Section titled “renderFile?”optional renderFile?: (state) => ReactNode;Custom rendering for one file row.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
state | FileEntryState |
Returns
Section titled “Returns”ReactNode
required?
Section titled “required?”optional required?: boolean;style?
Section titled “style?”optional style?: CSSProperties;validate?
Section titled “validate?”optional validate?: (file, existing) => string | boolean;Final say: true, false, or a string explaining the refusal.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
file | File |
existing | File[] |
Returns
Section titled “Returns”string | boolean
value?
Section titled “value?”optional value?: File[];Controlled list of files.