Album

Permission settings are required

fetchAlbumItemsYou need to set album permissions before using it. Please check the permission setup guide first.

---

1. Select album media

SDK function: fetchAlbumItems

A function that selects and imports photos and videos from the user's album. You can select photos and videos at the same time, and if the user cancels the selection, an empty array []returns null.

Signature

function fetchAlbumItems(options?: FetchAlbumItemsOptions): Promise<AlbumItemResponse[]>;

Parameters

• options · FetchAlbumItemsOptions

  It is an object containing the query options. See below for the detailed type FetchAlbumItemsOptionsPlease refer to it.

Return value

• Promise<AlbumItemResponse\[]>

  Returns the selected media list. If the user cancels, it returns an empty array.

Error

Error code	Trigger condition
NOT_ALLOWED	When album access is not allowed
INVALID_REQUEST	When the request parameters are invalid
INVALID_DATA	When the media data is invalid
UNSUPPORTED_APP_VERSION	When the Toss app version is lower than 5.261.0

Example

React

import { fetchAlbumItems } from '@apps-in-toss/web-framework';

async function pickMedia() {
  try {
    const items = await fetchAlbumItems({
      types: ['PHOTO', 'VIDEO'],
      maxCount: 5,
      base64: true,
    });

    if (items.length === 0) {
      console.log('The selection was canceled.');
      return;
    }

    items.forEach((item) => {
      console.log(item.type, item.id);
    });
  } catch (error) {
    console.error('Album query error:', error.code);
  }
}

React Native

import { fetchAlbumItems } from '@apps-in-toss/framework';

async function pickMedia() {
  try {
    const items = await fetchAlbumItems({
      types: ['PHOTO', 'VIDEO'],
      maxCount: 5,
      base64: true,
    });

    if (items.length === 0) {
      console.log('The selection was canceled.');
      return;
    }

    items.forEach((item) => {
      console.log(item.type, item.id);
    });
  } catch (error) {
    console.error('Album query error:', error.code);
  }
}

FetchAlbumItemsOptions

interface FetchAlbumItemsOptions {
  types?: AlbumItemType[];
  maxCount?: number;
  maxWidth?: number;
  base64?: boolean;
}

Properties:

• typesArray<'PHOTO' | 'VIDEO'>

  A list of media types to import. 'PHOTO'(photo), 'VIDEO'You can choose from (video). If not specified, only photos are imported.
• maxCountnumber · 10

  The maximum number of items to import.
• maxWidthnumber · 1024

  The maximum width of the image. The unit is pixels.
• base64boolean · false

  Whether to return the image's dataUrias a Base64 string.

AlbumItemResponse

interface AlbumItemResponse {
  id: string;
  dataUri: string;
  type: AlbumItemType;
}

Properties:

• idstring

  This is the item's unique ID.
• data · Uristring

  Media data URI. typeIf it is PHOTOand base64 option trueis set, it is returned as a Base64 string.
• type'PHOTO' | 'VIDEO'

  This is the media type.

---

2. Fetch album

SDK function: fetchAlbumPhotos

A new version is available

fetchAlbumPhotosOnly photos are supported. If you need to select photos and videos together or need finer control, fetchAlbumItemsplease use it.

A function that loads the photo list from the user's album. You can set the maximum number and resolution.

Signature

function fetchAlbumPhotos(options: { maxCount: number; maxWidth: number; base64: boolean }): Promise<ImageResponse[]>;

Parameters

• options · Required

  It is an object containing the query options.

  • options.maxCount · number

    The maximum number of photos to import.
  • options.maxWidth · number

    The maximum width of the photo. The unit is pixels.
  • options.base64 · boolean

    Set whether to return the image in Base64 format.

Return value

• Promise<ImageResponse\[]>

  Returns an array containing the album photo's unique ID and data URI.

Example

Web (JS)

import { fetchAlbumPhotos, FetchAlbumPhotosPermissionError } from '@apps-in-toss/web-framework';

async function handleFetchAlbumPhotos() {
  try {
    const response = await fetchAlbumPhotos({ base64: true, maxWidth: 360 });
    response.forEach((image) => {
      const imageUri = 'data:image/jpeg;base64,' + image.dataUri;
      console.log('Image URI:', imageUri);
    });
  } catch (error) {
    if (error instanceof FetchAlbumPhotosPermissionError) {
      console.log('No permission to read album');
    }
  }
}

Web (React)

import { fetchAlbumPhotos, FetchAlbumPhotosPermissionError, ImageResponse } from '@apps-in-toss/web-framework';
import { useState } from 'react';

function AlbumPhotoList() {
  const [albumPhotos, setAlbumPhotos] = useState<ImageResponse[]>([]);

  const handlePress = async () => {
    try {
      const response = await fetchAlbumPhotos({ base64: true, maxWidth: 360 });
      setAlbumPhotos((prev) => [...prev, ...response]);
    } catch (error) {
      if (error instanceof FetchAlbumPhotosPermissionError) {
        // No permission to read album
      }
    }
  };

  return (
    <div>
      {albumPhotos.map((image) => {
        const imageUri = 'data:image/jpeg;base64,' + image.dataUri;
        return <img src={imageUri} key={image.id} />;
      })}
      <button onClick={handlePress}>Fetch album</button>

  );
}

React Native

import { fetchAlbumPhotos, FetchAlbumPhotosPermissionError, ImageResponse } from '@apps-in-toss/framework';
import { useState } from 'react';
import { Alert, Button, Image, View } from 'react-native';

function AlbumPhotoList() {
  const [albumPhotos, setAlbumPhotos] = useState<ImageResponse[]>([]);

  const handlePress = async () => {
    try {
      const response = await fetchAlbumPhotos({ base64: true, maxWidth: 360 });
      setAlbumPhotos((prev) => [...prev, ...response]);
    } catch (error) {
      if (error instanceof FetchAlbumPhotosPermissionError) {
        // No permission to read album
      }
    }
  };

  return (
    <View>
      {albumPhotos.map((image) => {
        const imageUri = 'data:image/jpeg;base64,' + image.dataUri;
        return <Image source={{ uri: imageUri }} key={image.id} />;
      })}
      <Button title="Fetch album" onPress={handlePress} />
      <Button
        title="Check Permission"
        onPress={async () => {
          const permission = await fetchAlbumPhotos.getPermission();
          Alert.alert(permission);
        }}
      />
      <Button
        title="Request permission"
        onPress={async () => {
          const permission = await fetchAlbumPhotos.openPermissionDialog();
          Alert.alert(permission);
        }}
      />
    </View>
  );
}