FileInput
A HOC used to build components for accepting files.
name | type | default | description |
|---|---|---|---|
| accept | string | - | The accept attribute of input element |
| autoFocus | boolean | - | The autoFocus attribute of input element |
| children * Required | (context: Context) => ReactNodeNoStrings | - | A function that receives a context object and return a react element. The context object is made of the following properties droppable, focused, file, name, previewUrl, type and reset. |
| defaultValue | { name?: string | undefined; type: string; url: string; } | - | Preloads the file input file to submit. |
| disabled | boolean | - | The disabled attribute of input element. |
| error | ReactNode | - | Error text or react element |
| id | string | - | The id attribute of input element |
| maxSize | number | - | Size in megabytes |
| name | string | - | The name attribute of input element. |
| required | boolean | - | The required attribute of input element |
| tabIndex | number | - | The tabindex attribute of input element |
| onBlur | FocusEventHandler<HTMLInputElement> | - | An event handler that is fired after blur events. Wrap this function in useCallback to maintian referenctial equality. |
| onError | (error: string) => void | - | An event handler that is fired after error events. Wrap this function in useCallback to maintian referenctial equality. |
| onChange | (file: File) => void | - | An event handler that is fired after change events. Wrap this function in useCallback to maintian referenctial equality. |
| onFocus | FocusEventHandler<HTMLInputElement> | - | An event handler that is fired after focus events. Wrap this function in useCallback to maintian referenctial equality. |
| onReset | () => void | - | An event handler that is fired after the context.reset function is fired. Wrap this function in useCAllback to maintain referential equality. |
| ref | null | string | (instance: HTMLDivElement | null) => void | RefObject<HTMLDivElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
name | type | default | description |
|---|---|---|---|
| droppable | boolean | - | If true, a file has been dragged inside the component. Used to make UI updates. |
| file | File | - | The file that is ready to be accepted. |
| focused | boolean | - | If true the component is focused. Used to make UI updates. |
| name | string | - | The name of the file. |
| reset | MouseEvent<HTMLInputElement> | - | An event handler used to reset input component. |
| type | string | - | The file type of the file |
The error value should be stored in the parent component and use the error and onError properties to synchronize state. To display an error message, wrap the component in a Field component. A truthy value for error will add aria-invalid to the input for accessibility.