Panduan Memulai
Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.
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.
Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLalu gunakan prompt berikut:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-file-picker` plugin in my project.Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:
npm install @capgo/capacitor-file-pickernpx cap syncimport { CapgoFilePicker } from '@capgo/capacitor-file-picker';Mulai cepat
Bagian berjudul “Mulai cepat”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);Contoh: pickImages
Bagian berjudul “Example: pickImages”import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);Contoh: pickVideos
Bagian berjudul “Example: pickVideos”import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({ limit: 3, skipTranscoding: true});console.log('Picked videos:', result.files);Kesalahan umum
Bagian berjudul “Kesalahan umum”- Izin: panggil
checkPermissions()kemudianrequestPermissions()saat dibutuhkan. - Listener: hapus handle saat screen unmount.
- Sumber kebenaran tunggal: percayai
src/definitions.tsdi repo GitHub.
Ringkasan API
Bagian berjudul “Ikhtisar API”pickFiles
Bagian berjudul “pickFiles”Pilih satu atau lebih file dari perangkat.
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
Bagian berjudul “pickImages”Pilih satu atau lebih gambar dari galeri. Hanya 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
Bagian berjudul “pickVideos”Pilih satu atau lebih video dari galeri. Hanya 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
Bagian berjudul “pickMedia”Pilih satu atau lebih gambar atau video dari galeri. Hanya 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
Bagian berjudul “pickDirectory”Pilih direktori dari perangkat. Hanya Android/iOS.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();console.log('Selected directory:', result.path);convertHeicToJpeg
Bagian berjudul “convertHeicToJpeg”Konversi gambar HEIC ke format JPEG. Hanya 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
Bagian berjudul “copyFile”Salin file ke lokasi baru.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
await CapgoFilePicker.copyFile({ from: '/source/file.pdf', to: '/destination/file.pdf', overwrite: true});checkPermissions
Bagian berjudul “checkPermissions”Cek izin untuk membaca file. Hanya Android.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.checkPermissions();console.log('Read permission:', status.readExternalStorage);requestPermissions
Bagian berjudul “requestPermissions”Minta izin untuk membaca file. Hanya Android.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.requestPermissions();if (status.readExternalStorage === 'granted') { console.log('Permission granted');}Referensi Tipe
Bagian berjudul “Referensi Tipe”PickFilesOptions
Bagian berjudul “PickFilesOptions”Opsi untuk memilih file.
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
Bagian berjudul “PickFilesResult”Hasil pemilihan file.
export interface PickFilesResult { /** Array of picked files */ files: PickedFile[];}PickMediaOptions
Bagian berjudul “PickMediaOptions”Opsi untuk memilih media (gambar/video).
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
Bagian berjudul “PickDirectoryResult”Hasil pemilihan direktori.
export interface PickDirectoryResult { /** The path to the selected directory */ path: string;}ConvertHeicToJpegOptions
Bagian berjudul “ConvertHeicToJpegOptions”Opsi untuk mengonversi HEIC ke 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
Bagian berjudul “ConvertHeicToJpegResult”Hasil konversi HEIC ke JPEG.
export interface ConvertHeicToJpegResult { /** The path to the converted JPEG file */ path: string;}CopyFileOptions
Bagian berjudul “CopyFileOptions”Opsi untuk menyalin file.
export interface CopyFileOptions { /** Source file path */ from: string; /** Destination file path */ to: string; /** * Whether to overwrite if destination exists. * @default false */ overwrite?: boolean;}PermissionStatus
Bagian berjudul “PermissionStatus”Status izin untuk akses file.
export interface PermissionStatus { /** Whether permission to read media files is granted */ readExternalStorage: PermissionState; /** Whether permission to access media location is granted */ accessMediaLocation?: PermissionState;}PickerDismissedListener
Bagian berjudul “PickerDismissedListener”Callback listener untuk event picker dismissed.
export type PickerDismissedListener = (event: null) => void;PickedFile
Bagian berjudul “PickedFile”Mewakili file yang dipilih.
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
Bagian berjudul “PermissionState”Nilai status izin.
export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';Sumber Kebenaran
Bagian berjudul “Sumber Kebenaran”Halaman ini dibuat dari plugin src/definitions.ts. Jalankan ulang sync saat API publik berubah di upstream.
Lanjutkan dari Getting Started
Bagian berjudul “Lanjutkan dari Getting Started”Jika Anda menggunakan Panduan Memulai untuk merencanakan penyimpanan dan penanganan file, hubungkan dengan Menggunakan @capgo/capacitor-file-picker untuk kapabilitas native di Using @capgo/capacitor-file-picker, @capgo/capacitor-data-storage-sqlite untuk detail implementasi di @capgo/capacitor-data-storage-sqlite, Menggunakan @capgo/capacitor-data-storage-sqlite untuk kapabilitas native di Menggunakan @capgo/capacitor-data-storage-sqlite, @capgo/capacitor-file untuk detail implementasi di @capgo/capacitor-file, dan Menggunakan @capgo/capacitor-file untuk kapabilitas native di Using @capgo/capacitor-file.