Device.getPhotos

Functional API fetchAlbumPhotosYou can use the same feature with it as well.

Feature description

It fetches the list of photos from the user's album. You can set the maximum count and resolution, and use it for gallery previews, image selection, and more.

If permission to read the photo album is not granted FetchAlbumPhotosPermissionErroroccurs. Device.getPhotos.getPermission()to check the permission status, Device.getPhotos.openPermissionDialog()to request permission again.

Type

Device.getPhotos(options?: FetchAlbumPhotosOptions): Promise<ImageResponse[]>;

Params

type FetchAlbumPhotosOptions = {
  /** The maximum number of photos to fetch. The default is 10. */
  maxCount?: number;
  /** The maximum width of the image (px). The default is 1024. */
  maxWidth?: number;
  /** Whether to return the image as base64. The default is false. */
  base64?: boolean;
};

Response

type ImageResponse = {
  id: string;
  dataUri: string;
};

Error

The error is thrown as a class — error instanceof FetchAlbumPhotosPermissionErroridentify it with. The class can @apps-in-toss/web-frameworkbe imported from

Error class	Description
FetchAlbumPhotosPermissionError	This is the case when permission to read the photo album is denied. Device.getPhotos.openPermissionDialog()You can request again with

Example code

import {
  Device,
  FetchAlbumPhotosPermissionError,
} from "@apps-in-toss/web-framework";

const base64 = true;

async function renderAlbumPhotos() {
  try {
    const photos = await Device.getPhotos({
      base64,
      maxCount: 10,
      maxWidth: 360,
    });

    const container = document.getElementById("photo-list");
    for (const photo of photos) {
      const img = document.createElement("img");
      img.src = base64
        ? "data:image/jpeg;base64," + photo.dataUri
        : photo.dataUri;
      container.appendChild(img);
    }
  } catch (error) {
    if (error instanceof FetchAlbumPhotosPermissionError) {
      console.warn("No permission to read the photo album.");
      return;
    }
    console.error(error);
  }
}

document
  .getElementById("load-photos")
  .addEventListener("click", renderAlbumPhotos);