File Input

FileInput is a specialised input that allows file uploads.

<FileInput>Upload</FileInput>

Required props

The required props FileInput needs are: onSelect and children.

onSelect is a callback that accepts the file selection (as a FileList), when the user interacts with the file browser interface. The file selection can then be used by the parent, for example: to be passed in a POST API call to be saved.

Note: The action of uploading the file to a backend is the parent's responsibility.

children is used to add text to the visible button.

Multiple files

The input can also accept multiple files at once, via the multiple prop.

<FileInput onSelect={(fileSelection) => console.log(fileSelection)} multiple>
  Upload
</FileInput>

Restricting the MIME type

The accept prop makes the input filter out unwanted file types and prevent the user from selecting them.

<FileInput
  onSelect={(fileSelection) => console.log(fileSelection)}
  accept="application/pdf"
>
  Upload
</FileInput>