FileButton

Open file picker with a button click
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
          )}
        </>
      );
    }
    Go back
    CopyButton – @mantine/core
    Up next
    UnstyledButton – @mantine/core

    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
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
    Project
    Mantine UIDocumentationGitHub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    Join Discord community
    Follow Mantine on Twitter