FileInput

Pick files with the native document picker

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

Usage

import { FileInput } from 'react-native-mantine';
import type { PickedFile } from 'react-native-mantine';

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

<FileInput
  label="Attachment"
  placeholder="Press to pick a file"
  value={file}
  onChange={setFile}
  accept="application/pdf"
  clearable
/>

// Multiple files with custom value component
<FileInput
  multiple
  valueComponent={({ value }) => (
    <Group spacing={4}>
      {value.map((file) => (
        <Pill key={file.uri}>{file.name}</Pill>
      ))}
    </Group>
  )}
/>

Props

Prop	Type	Default	Description
`value`	`PickedFile \| PickedFile[] \| null`		Value for controlled component, array with multiple and a single file otherwise
`defaultValue`	`PickedFile \| PickedFile[] \| null`		Default value for uncontrolled component
`onChange`	`(value: PickedFile \| PickedFile[] \| null) => void`		Called when the selection changes
`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"
`placeholder`	`string`		Displayed when no file is selected
`clearable`	`boolean`	`false`	Adds a clear button to the right section when a file is selected
`clearButtonLabel`	`string`	`"Clear"`	Clear button accessibility label
`valueComponent`	`({ value }) => React.ReactNode`		Custom component to render the selected value
`label`	`React.ReactNode`		Input label, inherited from InputBase
`description`	`React.ReactNode`		Input description, inherited from InputBase
`error`	`React.ReactNode`		Error message, inherited from InputBase
`required`	`boolean`		Displays required asterisk, inherited from InputBase
`disabled`	`boolean`		Disables interaction and dims the input, inherited from InputBase

Source on GitHub · npm