expo-document-picker

Access system UI for selecting documents from available providers on the device

expo-document-picker

Version: 55.0.6

Provides access to the system’s UI for selecting documents from the available providers on the user’s device. On iOS, this uses UIDocumentPickerViewController, on Android it uses Intent.ACTION_GET_CONTENT, and on web it uses the HTML file input element.

Installation

npx expo install expo-document-picker

Usage

import * as DocumentPicker from 'expo-document-picker';
import { Button, View, Text } from 'react-native';

export default function App() {
  const [document, setDocument] = React.useState<string | null>(null);

  const pickDocument = async () => {
    const result = await DocumentPicker.getDocumentAsync({
      type: '*/*',
      copyToCacheDirectory: true,
    });

    if (!result.canceled) {
      setDocument(result.assets[0].uri);
      console.log('Selected:', result.assets[0].name);
    }
  };

  return (
    <View>
      <Button title="Pick Document" onPress={pickDocument} />
      {document && <Text>Selected: {document}</Text>}
    </View>
  );
}

API Reference

Methods

getDocumentAsync(options) · (options?: DocumentPickerOptions) => Promise<DocumentPickerResult>

Displays the system UI for choosing a document

Parameters:

• type (string | string[]): MIME types to filter documents. Defaults to '*/*'
• copyToCacheDirectory (boolean): Copy selected file to cache directory. Defaults to true
• multiple (boolean): Allow selecting multiple files. Defaults to false
• base64 (boolean): Include base64 representation. Defaults to false

Returns: Promise resolving to DocumentPickerResult

// Pick a single PDF
const result = await DocumentPicker.getDocumentAsync({
  type: 'application/pdf',
});

// Pick multiple images
const result = await DocumentPicker.getDocumentAsync({
  type: ['image/png', 'image/jpeg'],
  multiple: true,
});

// Pick any file with base64
const result = await DocumentPicker.getDocumentAsync({
  type: '*/*',
  base64: true,
});

Types

DocumentPickerResult

type DocumentPickerResult =
  | {
      canceled: false;
      assets: DocumentPickerAsset[];
    }
  | {
      canceled: true;
      assets: null;
    };

DocumentPickerAsset

uri · string

The URI of the selected document

name · string

The name of the selected file

size · number

Size of the file in bytes

mimeType · string

MIME type of the file

base64 · string | undefined

Base64 representation if requested

DocumentPickerOptions

type · string | string[]

MIME type(s) to filter. Examples: 'image/*', 'application/pdf', ['image/png', 'image/jpeg']

copyToCacheDirectory · boolean

Whether to copy the selected file to the app’s cache directory. Defaults to true

multiple · boolean

Allow selecting multiple documents. Defaults to false

base64 · boolean

Include base64 representation in the result. Defaults to false

Examples

Pick a PDF File

import * as DocumentPicker from 'expo-document-picker';

async function selectPDF() {
  const result = await DocumentPicker.getDocumentAsync({
    type: 'application/pdf',
    copyToCacheDirectory: true,
  });

  if (!result.canceled) {
    const file = result.assets[0];
    console.log('PDF selected:', file.name);
    console.log('URI:', file.uri);
    console.log('Size:', file.size, 'bytes');
  }
}

Pick Multiple Images

import * as DocumentPicker from 'expo-document-picker';

async function selectImages() {
  const result = await DocumentPicker.getDocumentAsync({
    type: 'image/*',
    multiple: true,
  });

  if (!result.canceled) {
    console.log(`Selected ${result.assets.length} images`);
    result.assets.forEach((file) => {
      console.log('Image:', file.name, file.uri);
    });
  }
}

Pick Document with Base64

import * as DocumentPicker from 'expo-document-picker';

async function selectWithBase64() {
  const result = await DocumentPicker.getDocumentAsync({
    type: '*/*',
    base64: true,
  });

  if (!result.canceled && result.assets[0].base64) {
    const base64Data = result.assets[0].base64;
    // Upload or process base64 data
    await uploadToServer(base64Data);
  }
}

Filter by Multiple MIME Types

import * as DocumentPicker from 'expo-document-picker';

async function selectDocuments() {
  const result = await DocumentPicker.getDocumentAsync({
    type: [
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    ],
  });

  if (!result.canceled) {
    console.log('Document:', result.assets[0].name);
  }
}

Complete Example with State

import * as DocumentPicker from 'expo-document-picker';
import { useState } from 'react';
import { View, Button, Text, FlatList, StyleSheet } from 'react-native';

export default function DocumentPickerExample() {
  const [documents, setDocuments] = useState<DocumentPickerAsset[]>([]);

  const pickDocuments = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({
        type: '*/*',
        multiple: true,
        copyToCacheDirectory: true,
      });

      if (!result.canceled) {
        setDocuments(result.assets);
      }
    } catch (error) {
      console.error('Error picking documents:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick Documents" onPress={pickDocuments} />
      
      <FlatList
        data={documents}
        keyExtractor={(item) => item.uri}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.size}>
              {(item.size / 1024).toFixed(2)} KB
            </Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  item: { padding: 10, borderBottomWidth: 1, borderColor: '#ccc' },
  name: { fontSize: 16, fontWeight: 'bold' },
  size: { fontSize: 14, color: '#666', marginTop: 4 },
});

Platform Support

Platform	Supported
iOS	✅
Android	✅
Web	✅

Common MIME Types

Type	MIME String
All files	'*/*'
PDF	'application/pdf'
Images	'image/*'
Videos	'video/*'
Audio	'audio/*'
Text	'text/plain'
Word	'application/msword'
Excel	'application/vnd.ms-excel'
PowerPoint	'application/vnd.ms-powerpoint'

On web, the system UI can only be shown after user activation (e.g., a button press). The canceled event may not be returned consistently across browsers due to platform restrictions.

Resources

• Official Documentation
• GitHub Repository