FileButton

Open the native document picker from any trigger element

Import: import { FileButton } from 'react-native-mantine';

Usage

import { Button, FileButton } from 'react-native-mantine';
import type { PickedFile } from 'react-native-mantine';

const [file, setFile] = useState<PickedFile | null>(null);

<FileButton onChange={setFile} accept="application/pdf">
  {({ onPress, loading }) => (
    <Button onPress={onPress} loading={loading}>
      Upload PDF
    </Button>
  )}
</FileButton>

// Multiple files
<FileButton multiple onChange={(files) => setFiles(files)}>
  {({ onPress }) => <Button onPress={onPress}>Upload files</Button>}
</FileButton>

Props

Prop	Type	Default	Description
`children` (required)	`({ onPress, loading }) => React.ReactNode`		Function that renders the trigger element, receives onPress handler and loading state
`onChange` (required)	`(payload: PickedFile \| PickedFile[] \| null) => void`		Called when files are picked, receives an array with multiple and a single file otherwise
`multiple`	`boolean`	`false`	Determines whether user can pick more than one file
`accept`	`string \| string[]`		Mime type(s) of the files that can be picked, e.g. "application/pdf"
`disabled`	`boolean`	`false`	Disables the file picker
`resetRef`	`React.ForwardedRef<() => void>`		Ref of the function that should be called to reset the last selection

Source on GitHub · npm