FileButton

Open file picker with a button click
Import

Usage

import { useState } from 'react';
import { FileButton, Button, Group, Text } from '@mantine/core';
function Demo() {
const [file, setFile] = useState<File | null>(null);
return (
<>
<Group position="center">
<FileButton onChange={setFile} accept="image/png,image/jpeg">
{(props) => <Button {...props}>Upload image</Button>}
</FileButton>
</Group>
{file && (
<Text size="sm" align="center" mt="sm">
Picked file: {file.name}
</Text>
)}
</>
);
}

Multiple files

Set multiple prop to enable picking multiple files:

    import { useState } from 'react';
    import { FileButton, Button, Group, Text, List } from '@mantine/core';
    function Demo() {
    const [files, setFiles] = useState<File[]>([]);
    return (
    <>
    <Group position="center">
    <FileButton onChange={setFiles} accept="image/png,image/jpeg" multiple>
    {(props) => <Button {...props}>Upload image</Button>}
    </FileButton>
    </Group>
    {files.length > 0 && (
    <Text size="sm" mt="sm">
    Picked files:
    </Text>
    )}
    <List size="sm" mt={5} withPadding>
    {files.map((file, index) => (
    <List.Item key={index}>{file.name}</List.Item>
    ))}
    </List>
    </>
    );
    }

    Reset file

    resetRef should be used to fix issue with stale value on hidden input element as input type file cannot be controlled. Call resetRef when user selection is cleared:

    import { useState, useRef } from 'react';
    import { FileButton, Button, Group, Text } from '@mantine/core';
    function Demo() {
    const [file, setFile] = useState<File | null>(null);
    const resetRef = useRef<() => void>(null);
    const clearFile = () => {
    setFile(null);
    resetRef.current?.();
    };
    return (
    <>
    <Group position="center">
    <FileButton resetRef={resetRef} onChange={setFile} accept="image/png,image/jpeg">
    {(props) => <Button {...props}>Upload image</Button>}
    </FileButton>
    <Button disabled={!file} color="red" onClick={clearFile}>
    Reset
    </Button>
    </Group>
    {file && (
    <Text size="sm" align="center" mt="sm">
    Picked file: {file.name}
    </Text>
    )}
    </>
    );
    }

    FileButton component props

    NameTypeDescription
    accept
    string
    File input accept attribute, for example, "image/png,image/jpeg"
    capture
    boolean | "user" | "environment"
    Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.
    children *
    (props: { onClick(): void; }) => ReactNode
    Function that receives button props and returns react node that should be rendered
    disabled
    boolean
    Disables file picker
    form
    string
    Input form attribute
    inputProps
    Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>
    Spreads props to input element used to capture files
    multiple
    boolean
    Determines whether user can pick more than one file
    name
    string
    Input name attribute
    onChange *
    (payload: Multiple extends true ? File[] : File) => void
    Called when files are picked
    resetRef
    ForwardedRef<() => void>
    Function that should be called when value changes to null or empty array