시작하기
이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.
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-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 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” 섹션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
“예시: pickImages” 섹션import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);예시: pickVideos
“예시: 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” 섹션기기에서 파일을 하나 이상 선택하세요.
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” 섹션갤러리에서 하나 이상의 이미지를 선택합니다. 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” 섹션갤러리에서 하나 이상의 비디오를 선택합니다. 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” 섹션갤러리에서 하나 이상의 이미지 또는 비디오를 선택합니다. 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.tsupstream에서 public API가 변경되면 sync를 다시 실행하세요.
시작하기 다음 단계
“Getting Started에서 계속하기” 섹션사용 중이라면 시작하기 저장 공간과 파일 처리를 계획하려면, 다음 항목과 연결하세요 @capgo/capacitor-file-picker 사용하기 @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. 사용 시 네이티브 기능을 위해