Skip to content

FileInput

A HOC used to build components for accepting files.
import { FileInput } from '@ensdomains/thorin'
<FileInput maxSize={1} onChange={(file) => alert(file)}>
  {(context) =>
    context.name ? (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {context.name}
        <div style={{ width: '48px' }}>
          <Button
            shape="circle"
            size="small"
            variant="secondary"
            onClick={context.reset}
          >
            <VisuallyHidden>Remove</VisuallyHidden>
            <CloseSVG />
          </Button>
        </div>
      </div>
    ) : (
      <div>{context.droppable ? 'Drop file' : 'Attach file'}</div>
    )
  }
</FileInput>

Props
#

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}

Context Props
#

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

Error Handling
#

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.

Max Size
#

Edit on GitHub