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>
    )}
    </>
    );
    }
    Download more icon variants from https://tabler-icons.io/i/search

    FileButton component props

    NameTypeDescription
    accept
    string
    File input accept attribute, for example, "image/png,image/jpeg"
    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
    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