メインコンテンツへスキップ

スタートガイド

GitHub

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:

ターミナル
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用します:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-file-picker` plugin in my project.

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:

ターミナル
npm install @capgo/capacitor-file-picker
npx cap sync
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickFiles({
types: ['application/pdf', 'image/*'],
limit: 5,
readData: false
});
console.log('Picked files:', result.files);
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({
limit: 10,
readData: false
});
console.log('Picked images:', result.files);
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({
limit: 3,
skipTranscoding: true
});
console.log('Picked videos:', result.files);
  • 権限:呼び出し checkPermissions() その後 requestPermissions() 必要に応じて。
  • リスナー: 画面がアンマウントされたらハンドルを削除します。
  • 信頼できる情報源: 信頼 src/definitions.ts GitHub リポジトリ内。

デバイスから1つ以上のファイルを選択します。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickFiles({
types: ['application/pdf', 'image/*'],
limit: 5,
readData: false
});
console.log('Picked files:', result.files);

ギャラリーから1つ以上の画像を選択します。 Android/iOSのみ対応。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({
limit: 10,
readData: false
});
console.log('Picked images:', result.files);

ギャラリーから動画を1つ以上選択します。 Android/iOSのみ対応。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({
limit: 3,
skipTranscoding: true
});
console.log('Picked videos:', result.files);

ギャラリーから画像または動画を1つ以上選択します。 Android/iOSのみ対応。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickMedia({
limit: 5,
readData: true
});
console.log('Picked media:', result.files);

デバイスからディレクトリを選択します。 Android/iOSのみ対応。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();
console.log('Selected directory:', result.path);

HEIC画像をJPEG形式に変換します。 iOSのみ対応。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.convertHeicToJpeg({
path: '/path/to/image.heic',
quality: 0.9
});
console.log('Converted file:', result.path);

ファイルを新しい場所にコピーします。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
await CapgoFilePicker.copyFile({
from: '/source/file.pdf',
to: '/destination/file.pdf',
overwrite: true
});

ファイルの読み取り権限を確認します。 Android のみ。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.checkPermissions();
console.log('Read permission:', status.readExternalStorage);

ファイルの読み取り権限をリクエストします。 Android のみ。

import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.requestPermissions();
if (status.readExternalStorage === 'granted') {
console.log('Permission granted');
}

ファイル選択時のオプション。

export interface PickFilesOptions {
/**
* List of accepted MIME types or file extensions.
* On iOS, only MIME types are supported.
* Examples: ['image/*'], ['application/pdf'], ['.pdf', '.doc']
*/
types?: string[];
/**
* Maximum number of files to pick.
* Set to 0 for unlimited (platform default).
* @default 0
*/
limit?: number;
/**
* Whether to read the file data as base64.
* Note: Reading large files may cause memory issues.
* @default false
*/
readData?: boolean;
}

ファイル選択の結果。

export interface PickFilesResult {
/** Array of picked files */
files: PickedFile[];
}

メディア(画像/動画)選択時のオプション。

export interface PickMediaOptions {
/**
* Maximum number of files to pick.
* Set to 0 for unlimited (platform default).
* @default 0
*/
limit?: number;
/**
* Whether to read the file data as base64.
* Note: Reading large files may cause memory issues.
* @default false
*/
readData?: boolean;
/**
* iOS only: Skip transcoding of videos.
* @default false
*/
skipTranscoding?: boolean;
/**
* iOS 15+ only: Show ordered selection badges.
* @default false
*/
ordered?: boolean;
}

ディレクトリ選択の結果。

export interface PickDirectoryResult {
/** The path to the selected directory */
path: string;
}

HEICをJPEGに変換するためのオプション。

export interface ConvertHeicToJpegOptions {
/** The path to the HEIC file to convert */
path: string;
/**
* The compression quality for JPEG (0.0 - 1.0).
* @default 0.9
*/
quality?: number;
}

HEICからJPEGへの変換結果。

export interface ConvertHeicToJpegResult {
/** The path to the converted JPEG file */
path: string;
}

ファイルをコピーするためのオプション。

export interface CopyFileOptions {
/** Source file path */
from: string;
/** Destination file path */
to: string;
/**
* Whether to overwrite if destination exists.
* @default false
*/
overwrite?: boolean;
}

ファイルアクセスの権限ステータス。

export interface PermissionStatus {
/** Whether permission to read media files is granted */
readExternalStorage: PermissionState;
/** Whether permission to access media location is granted */
accessMediaLocation?: PermissionState;
}

ピッカーが閉じられたイベントのリスナーコールバック。

export type PickerDismissedListener = (event: null) => void;

選択されたファイルを表します。

export interface PickedFile {
/** The name of the file */
name: string;
/** The path to the file */
path?: string;
/** The MIME type of the file */
mimeType: string;
/** The size of the file in bytes */
size: number;
/**
* The base64 encoded data of the file.
* Only present if readData was true.
*/
data?: string;
/**
* The Blob instance of the file.
* Web only.
*/
blob?: Blob;
/** Width in pixels (images/videos only) */
width?: number;
/** Height in pixels (images/videos only) */
height?: number;
/** Duration in seconds (videos only) */
duration?: number;
/** Last modified timestamp in milliseconds */
modifiedAt?: number;
}

パーミッション状態の値。

export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';

このページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。

Getting Startedの続きを進める

「Getting Started からの続き」セクション

使用している場合 スタートガイド ストレージとファイル処理を計画するには、以下と連携してください: @capgo/capacitor-file-picker の使い方 「Using @capgo/capacitor-file-picker」のネイティブ機能向けの @capgo/capacitor-data-storage-sqlite @capgo/capacitor-data-storage-sqlite の実装の詳細については、 @capgo/capacitor-data-storage-sqlite の使い方 「@capgo/capacitor-data-storage-sqliteの使用方法」におけるネイティブ機能について、 @capgo/capacitor-file @capgo/capacitor-file の実装の詳細については、 @capgo/capacitor-file の使い方 @capgo/capacitor-file. の使い方で扱うネイティブ機能については