Skip to main content

Photo Library Capacitor plugin

Browse, save, and manage photos and videos in device photo library with permissions

Install

bun add @capgo/capacitor-photo-library bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-photo-library
  • pnpm add @capgo/capacitor-photo-library
  • yarn add @capgo/capacitor-photo-library

Guide

How to use Photo Library in Capacitor

Using @capgo/capacitor-photo-library

Capacitor plugin Displays photo gallery as web page, or boring native screen which you cannot modify but require no authorization.

Install

bun add @capgo/capacitor-photo-library
bunx cap sync

bunx cap sync copies the plugin's native code into your native projects. Run it again after every plugin upgrade.

Import

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

API at a glance

Method Description
checkAuthorization Returns the current authorization status without prompting the user.
requestAuthorization Requests access to the photo library if needed.
getAlbums Retrieves the available albums.
getLibrary Retrieves library assets along with URLs that can be displayed in the web view.
getPhotoUrl 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.
getThumbnailUrl Retrieves a displayable URL for a resized thumbnail of the asset.
pickMedia 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.

Examples

checkAuthorization()

Returns the current authorization status without prompting the user.

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

const result = await PhotoLibrary.checkAuthorization();
console.log(result);

requestAuthorization()

Requests access to the photo library if needed.

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

const result = await PhotoLibrary.requestAuthorization();
console.log(result);

getAlbums()

Retrieves the available albums.

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

const result = await PhotoLibrary.getAlbums();
console.log(result);

getLibrary()

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

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

const result = await PhotoLibrary.getLibrary();
console.log(result);

getPhotoUrl()

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.

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

const result = await PhotoLibrary.getPhotoUrl({ id: 'id-123' });
console.log(result);

getThumbnailUrl()

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

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

const result = await PhotoLibrary.getThumbnailUrl({ id: 'id-123' });
console.log(result);

The table above lists the 7 core methods. Listener and version helpers, and the full contract of each method, are documented in the GitHub repository.

Full reference

Keep going from Using @capgo/capacitor-photo-library

If you are using Using @capgo/capacitor-photo-library to plan native media and interface behavior, connect it with @capgo/capacitor-photo-library for the implementation detail in @capgo/capacitor-photo-library, Getting Started for the implementation detail in Getting Started, Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

FAQ

Photo Library plugin FAQ

How do I install the Photo Library plugin in a Capacitor app?

Run "bun add @capgo/capacitor-photo-library" (or "npm install @capgo/capacitor-photo-library"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-photo-library" in your app code.

Does @capgo/capacitor-photo-library work with React, Vue and Angular?

Yes. Photo Library is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-photo-library support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-photo-library free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-photo-library/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses Photo Library without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Ship Photo Library changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo