FilePicker

Inputs & Controls

FilePicker

Unified file picker experience bridging native DocumentPicker and web uploads.

Usage

Attach documents, media, or arbitrary files inside forms.

Highlights

• Abstracts platform differences
• Optional validation hooks before upload

When to use it

• You must request attachments without writing per-platform code.
• Preview + metadata extraction happen client-side.

Related components

InputAddonTextInput

Examples

Default

Preview (Web)

import { FilePicker } from 'react-native-molecules/components/FilePicker';

export default function Example() {
  return <FilePicker type={['image/*']} label="Choose image" multiple={false} />;
}

Outlined

Preview (Web)

import { FilePicker } from 'react-native-molecules/components/FilePicker';

export default function Example() {
  return <FilePicker type={['image/*']} label="Choose image" multiple={false} variant="outlined" onCancel={() => console.log('onCancel')} />;
}

Prop	Type	Default	Description
multiple	boolean | undefined	—	Allows multiple files to be selected from the system UI.
defaultValue	DocumentResult[] | undefined	—	Default value for uncontrolled usage
value	DocumentResult[] | undefined	—	To Control the value
onChange	((result: DocumentResult[] | undefined) => any) | undefined	—	The Callback function to return the selected files as an array or object

Defined in react-native-molecules/components/FilePicker