FileInput

FileInput is a control that triggers the OS' file selection dialog. It shows information about the current selection. We can customize the flow:

• Allow selecting multiple files at once with multiple. It defaults to false.
• Restrict selection to a given file type in accept, such as "image/png"
• Add a clear button on the right with clearable
• 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 users close the platform's native File picker or clear the selection.

Other techniques

• Limit the input's width to truncate long file names with the regular maw prop
• 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.

FileInput inherits props from Input

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