FileInput

FileInput comes with props specific to the goal of selecting files:

• We may allow multi-file selection with multiple. It defaults to false.
• We may specify a file type in accept, such as image/png
• We may show a clear button on the right by adding clearable
• We work with the selected file by providing a handler to onChange. The handler receives a File object (or a File array) whenever the user picks some files or clears the selection.

We may limit the input's width to truncate long file names. We may add a file icon in the leftSection. The unstyled variant is similar to the transparent variant: there is no border or background. We may set it size to xs.

Finally, FileInput comes with the traditional input props such as label and placeholder.

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