or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-expo-document-picker

Provides access to the system's UI for selecting documents from the available providers on the user's device.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/expo-document-picker@14.0.x

To install, run

npx @tessl/cli install tessl/npm-expo-document-picker@14.0.0

index.mddocs/

Expo Document Picker

Expo 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.

Package Information

  • Package Name: expo-document-picker
  • Package Type: npm
  • Language: TypeScript
  • Installation: npx expo install expo-document-picker

Core Imports

import { 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");

Basic Usage

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,
});

Capabilities

Document Selection

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

Types

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

Platform Support

  • iOS: Native implementation via expo-modules-core with support for file caching
  • Android: Native implementation via expo-modules-core with support for file caching
  • Web: HTML5 File API implementation with FileReader support for base64 encoding

Usage Examples

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));
}

Error Handling

The getDocumentAsync function handles errors gracefully:

  • User cancellation: Returns { canceled: true, assets: null }
  • Web platform: SSR environments return canceled result by default
  • File reading errors (web): Promise rejects with Error object containing descriptive message
  • Platform restrictions: Web requires user activation (e.g., button press) to show file picker

Configuration Notes

iOS/Android specific:

  • copyToCacheDirectory controls whether files are copied to the app's cache directory for immediate access
  • Setting to false may improve performance for large files but limits access from other Expo APIs

Web specific:

  • base64 option controls whether file data is returned as base64 string
  • File picker requires user activation and cannot be called programmatically without user interaction
  • Cancel events may not be consistently reported across all browsers due to platform restrictions