Provides access to the system's UI for selecting documents from the available providers on the user's device.
npx @tessl/cli install tessl/npm-expo-document-picker@14.0.0Expo Document Picker provides access to the system's UI for selecting documents from the available providers on the user's device. It supports iOS, Android, and web platforms with consistent cross-platform behavior through Expo's native module system.
npx expo install expo-document-pickerimport { getDocumentAsync } from "expo-document-picker";All types are also exported for TypeScript usage:
import {
getDocumentAsync,
DocumentPickerOptions,
DocumentPickerResult,
DocumentPickerAsset,
DocumentPickerSuccessResult,
DocumentPickerCanceledResult
} from "expo-document-picker";For CommonJS:
const { getDocumentAsync } = require("expo-document-picker");import { getDocumentAsync } from "expo-document-picker";
// Simple document picking
const result = await getDocumentAsync();
if (!result.canceled) {
console.log("Selected document:", result.assets[0].name);
console.log("Document URI:", result.assets[0].uri);
}
// Pick specific file types
const pdfResult = await getDocumentAsync({
type: "application/pdf",
});
// Pick multiple files
const multipleResult = await getDocumentAsync({
type: ["image/*", "application/pdf"],
multiple: true,
});Display the system UI for choosing a document with configurable options for file types, multiple selection, and caching behavior.
/**
* Display the system UI for choosing a document. By default, the chosen file is copied to the app's internal cache directory.
* > **Notes for Web:** The system UI can only be shown after user activation (e.g. a `Button` press).
* > Therefore, calling `getDocumentAsync` in `componentDidMount`, for example, will **not** work as
* > intended. The `cancel` event will not be returned in the browser due to platform restrictions and
* > inconsistencies across browsers.
*
* @param options - Configuration options for document selection
* @returns Promise resolving to DocumentPickerResult
*
* If the user cancelled the document picking, the promise resolves to `{ canceled: true, assets: null }`.
*/
function getDocumentAsync(options?: DocumentPickerOptions): Promise<DocumentPickerResult>;
interface DocumentPickerOptions {
/** MIME type(s) of documents available to be picked. Supports wildcards like 'image/*'. Default: '*/*' */
type?: string | string[];
/** If true, picked file is copied to cache directory for immediate access. iOS/Android only. Default: true */
copyToCacheDirectory?: boolean;
/** Allows multiple files to be selected. Default: false */
multiple?: boolean;
/** If true, asset url is base64 encoded from the file. Web only. Default: true */
base64?: boolean;
}/** Result type for successful or canceled document pick operations */
type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult;
/** Result when documents are successfully picked */
interface DocumentPickerSuccessResult {
/** Always false when documents are picked */
canceled: false;
/** Array of picked document assets */
assets: DocumentPickerAsset[];
/** FileList object for web platform parity */
output?: FileList;
}
/** Result when document picking is canceled */
interface DocumentPickerCanceledResult {
/** Always true when canceled */
canceled: true;
/** Always null when canceled */
assets: null;
/** Always null when canceled (web only) */
output?: null;
}
/** Represents a selected document asset */
interface DocumentPickerAsset {
/** Document original name */
name: string;
/** Document size in bytes */
size?: number;
/** URI to the local document file */
uri: string;
/** Document MIME type */
mimeType?: string;
/** Timestamp of last document modification (milliseconds since Unix epoch) */
lastModified: number;
/** File object for web platform parity */
file?: File;
/** Base64 string of the file (web only) */
base64?: string;
}Pick specific document types:
// Pick only PDF files
const pdfResult = await getDocumentAsync({
type: "application/pdf",
});
// Pick images or documents
const mediaResult = await getDocumentAsync({
type: ["image/*", "application/pdf", "text/plain"],
});Multiple file selection:
const multipleFiles = await getDocumentAsync({
type: "*/*",
multiple: true,
});
if (!multipleFiles.canceled) {
multipleFiles.assets.forEach((asset, index) => {
console.log(`File ${index + 1}: ${asset.name}`);
console.log(`Size: ${asset.size} bytes`);
console.log(`Type: ${asset.mimeType}`);
});
}Web-specific usage with base64:
// Get base64 data for web usage
const webResult = await getDocumentAsync({
type: "image/*",
base64: true, // Default on web
});
if (!webResult.canceled && webResult.assets[0].base64) {
// Use base64 data directly
const imageData = webResult.assets[0].base64;
// Can be used in img src or uploaded to server
}Handle user cancellation:
const result = await getDocumentAsync();
if (result.canceled) {
console.log("User canceled document selection");
} else {
// Process selected documents
const selectedFile = result.assets[0];
console.log("Selected:", selectedFile.name);
console.log("URI:", selectedFile.uri);
console.log("Size:", selectedFile.size);
console.log("Type:", selectedFile.mimeType);
console.log("Modified:", new Date(selectedFile.lastModified));
}The getDocumentAsync function handles errors gracefully:
{ canceled: true, assets: null }iOS/Android specific:
copyToCacheDirectory controls whether files are copied to the app's cache directory for immediate accessfalse may improve performance for large files but limits access from other Expo APIsWeb specific:
base64 option controls whether file data is returned as base64 string