スタートガイド
インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-file-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/file-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」セクション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-pickernpx 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);例: pickImages
セクション「Example: pickImages」import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);例: pickVideos
セクション「Example: pickVideos」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.tsGitHub リポジトリ内。
API の概要
「API 概要」セクションpickFiles
「pickFiles」セクションデバイスから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);pickImages
「pickImages」セクションギャラリーから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);pickVideos
「pickVideos」セクションギャラリーから動画を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);pickMedia
「pickMedia」セクションギャラリーから画像または動画を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);pickDirectory
「pickDirectory」セクションデバイスからディレクトリを選択します。 Android/iOSのみ対応。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();console.log('Selected directory:', result.path);convertHeicToJpeg
「convertHeicToJpeg」セクション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);copyFile
「copyFile」セクションファイルを新しい場所にコピーします。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
await CapgoFilePicker.copyFile({ from: '/source/file.pdf', to: '/destination/file.pdf', overwrite: true});checkPermissions
「checkPermissions」セクションファイルの読み取り権限を確認します。 Android のみ。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.checkPermissions();console.log('Read permission:', status.readExternalStorage);requestPermissions
「requestPermissions」セクションファイルの読み取り権限をリクエストします。 Android のみ。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.requestPermissions();if (status.readExternalStorage === 'granted') { console.log('Permission granted');}型リファレンス
「型リファレンス」セクションPickFilesOptions
「PickFilesOptions」セクションファイル選択時のオプション。
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;}PickFilesResult
「PickFilesResult」セクションファイル選択の結果。
export interface PickFilesResult { /** Array of picked files */ files: PickedFile[];}PickMediaOptions
「PickMediaOptions」セクションメディア(画像/動画)選択時のオプション。
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;}PickDirectoryResult
「PickDirectoryResult」セクションディレクトリ選択の結果。
export interface PickDirectoryResult { /** The path to the selected directory */ path: string;}ConvertHeicToJpegOptions
「ConvertHeicToJpegOptions」セクション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;}ConvertHeicToJpegResult
「ConvertHeicToJpegResult」セクションHEICからJPEGへの変換結果。
export interface ConvertHeicToJpegResult { /** The path to the converted JPEG file */ path: string;}CopyFileOptions
「CopyFileOptions」セクションファイルをコピーするためのオプション。
export interface CopyFileOptions { /** Source file path */ from: string; /** Destination file path */ to: string; /** * Whether to overwrite if destination exists. * @default false */ overwrite?: boolean;}PermissionStatus
「PermissionStatus」セクションファイルアクセスの権限ステータス。
export interface PermissionStatus { /** Whether permission to read media files is granted */ readExternalStorage: PermissionState; /** Whether permission to access media location is granted */ accessMediaLocation?: PermissionState;}PickerDismissedListener
セクション「PickerDismissedListener」ピッカーが閉じられたイベントのリスナーコールバック。
export type PickerDismissedListener = (event: null) => void;PickedFile
セクション「PickedFile」選択されたファイルを表します。
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;}PermissionState
「PermissionState」セクションパーミッション状態の値。
export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';Source of Truth
「Source Of Truth」セクションこのページはプラグインの 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. の使い方で扱うネイティブ機能については