FileInput

FileInput is a control that triggers the OS dialog to pick a file.

On iOS, we first choose between taking a photo, opening the Photos library, or choosing a file from the Files app.

The control shows information about the current selection.

synopsis

We work with the selected file by providing a handler to onChange:

• The handler receives a File object (or a File array).
• The handler is called:
  • when the user closes the platform's native File picker
  • or when the user clears the selection.

<FileInput
    onChange={onChange}
    placeholder="Reference Image"
    variant="unstyled"
    leftSection={<IconPhoto size={18} stroke={1.5} />}
    size="xs"
    maw={150}
    clearable
/>

main options

• Enable multiple file selection with multiple. It defaults to false.
• Restrict selection to a given file type with accept, such as "image/png"
• Add a clear button on the right with clearable

other techniques

• Limit the input's max width to truncate long file names.
• Add a file icon to the leftSection.
• Opt for the unstyled variant which looks similar to a transparent variant: there is no border or background fill.
• Shrink the control with size.