@capgo/capacitor-photo-library

Build your own photo gallery in your Capacitor app: list albums, page through photos and videos with thumbnails, or open the native picker without full library access.

🤖 Building with an AI coding agent? Install Capgo skills so Claude Code, Codex, Cursor, Copilot, or Gemini CLI know how to install and use @capgo/capacitor-photo-library in your Capacitor app: npx skills add Cap-go/capgo-skills. Then ask your agent: "Add @capgo/capacitor-photo-library to my Capacitor app and wire it up." Agent setup guides · Hosted MCP

Key features

• Library access: checkAuthorization() and requestAuthorization(), including limited access on iOS.
• Albums and assets: getAlbums() and getLibrary() with paging and optional videos.
• Display URLs: getThumbnailUrl() and getPhotoUrl() return URLs your WebView can show.
• System picker: pickMedia() with a selection limit, no library permission needed.
• Platforms: iOS and Android. iOS uses Photos and PhotosUI, Android uses MediaStore. Not available on web.

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/photo-library/

Compatibility

Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.

Install

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Then use the following prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-photo-library` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

npm install @capgo/capacitor-photo-library
npx cap sync

Usage

import { Capacitor } from '@capacitor/core';
import { PhotoLibrary } from '@capgo/capacitor-photo-library';

const { state } = await PhotoLibrary.requestAuthorization();
if (state === 'authorized' || state === 'limited') {
  const { assets, hasMore } = await PhotoLibrary.getLibrary({
    limit: 100,
    thumbnailWidth: 256,
    thumbnailHeight: 256,
  });

  const gallery = assets.map(asset => ({
    id: asset.id,
    fileName: asset.fileName,
    thumbnailUrl: asset.thumbnail
      ? asset.thumbnail.webPath ?? Capacitor.convertFileSrc(asset.thumbnail.path)
      : undefined,
    photoUrl: asset.file
      ? asset.file.webPath ?? Capacitor.convertFileSrc(asset.file.path)
      : undefined,
  }));

  console.log('Loaded', gallery.length, 'items. More available?', hasMore);
}

const picked = await PhotoLibrary.pickMedia({
  selectionLimit: 3,
  includeVideos: true,
});

console.log('User selected', picked.assets.length, 'items');

The native implementations cache exported files inside the application cache directory. You can safely delete the photoLibrary folder under the cache if you need to free up space.

API

• checkAuthorization()
• requestAuthorization()
• getAlbums()
• getLibrary(...)
• getPhotoUrl(...)
• getThumbnailUrl(...)
• pickMedia(...)
• getPluginVersion()
• Interfaces
• Type Aliases

checkAuthorization()

checkAuthorization() => Promise<{ state: PhotoLibraryAuthorizationState; }>

Returns the current authorization status without prompting the user.

Returns: Promise<{ state: PhotoLibraryAuthorizationState; }>

requestAuthorization()

requestAuthorization() => Promise<{ state: PhotoLibraryAuthorizationState; }>

Requests access to the photo library if needed.

Returns: Promise<{ state: PhotoLibraryAuthorizationState; }>

getAlbums()

getAlbums() => Promise<{ albums: PhotoLibraryAlbum[]; }>

Retrieves the available albums.

Returns: Promise<{ albums: PhotoLibraryAlbum[]; }>

getLibrary(...)

getLibrary(options?: GetLibraryOptions | undefined) => Promise<GetLibraryResult>

Retrieves library assets along with URLs that can be displayed in the web view.

Returns: Promise<GetLibraryResult>

getPhotoUrl(...)

getPhotoUrl(options: { id: string; }) => Promise<PhotoLibraryFile>

Retrieves a displayable URL for the full resolution version of the asset. If you already called getLibrary with includeFullResolutionData, you normally do not need this method.

Returns: Promise<PhotoLibraryFile>

getThumbnailUrl(...)

getThumbnailUrl(options: { id: string; width?: number; height?: number; quality?: number; }) => Promise<PhotoLibraryFile>

Retrieves a displayable URL for a resized thumbnail of the asset.

Returns: Promise<PhotoLibraryFile>

pickMedia(...)

pickMedia(options?: PickMediaOptions | undefined) => Promise<PickMediaResult>

Opens the native system picker so the user can select media without granting full photo library access. The selected files are copied into the application cache and returned with portable URLs.

Returns: Promise<PickMediaResult>

getPluginVersion()

getPluginVersion() => Promise<{ version: string; }>

Get the native Capacitor plugin version

Returns: Promise<{ version: string; }>

Interfaces

PhotoLibraryAlbum

GetLibraryResult

PhotoLibraryAsset

PhotoLibraryFile

GetLibraryOptions

PickMediaResult

PickMediaOptions

Type Aliases

PhotoLibraryAuthorizationState

'authorized' | 'limited' | 'denied' | 'notDetermined'

PhotoAssetType

'image' | 'video'