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" />;
}

Prop	Type	Default	Description
onChange	(((e: TextInputChangeEvent) => void) & ((result: DocumentResult | DocumentResult[]) => any)) | undefined	—	The Callback function to return the selected files as an array or object
multiple	boolean | undefined	—	Allows multiple files to be selected from the system UI.
loading	boolean | undefined	—	Displays the Spinner on the right side in place of the default upload icon
left	ReactNode	—	—
right	ReactNode	—	—
value	DocumentResult | DocumentResult[] | undefined	—	To Control the value
progressIndicator	ReactNode	—	To replace the default progress indicator

Defined in react-native-molecules/components/FilePicker