Premiers pas
Copiez un prompt de configuration avec les étapes d'installation et le guide markdown complet pour ce plugin.
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.
Installer
Section intitulée « Installation »Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsUtilisez ensuite le prompt suivant :
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-file-picker` plugin in my project.Si vous préférez la configuration manuelle, installez le plugin avec les commandes suivantes, puis suivez les instructions spécifiques à chaque plateforme ci-dessous :
npm install @capgo/capacitor-file-pickernpx cap syncImporter
Section intitulée « Import »import { CapgoFilePicker } from '@capgo/capacitor-file-picker';Démarrage rapide
Section intitulée « Démarrage rapide »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);Exemple : pickImages
Section intitulée « Exemple : pickImages »import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);Exemple : pickVideos
Section intitulée « Exemple : pickVideos »import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({ limit: 3, skipTranscoding: true});console.log('Picked videos:', result.files);Erreurs courantes
Section intitulée « Erreurs courantes »- Autorisations : appeler
checkPermissions()puisrequestPermissions()si nécessaire. - Listeners : supprimer les handles lors du démontage des écrans.
- Source de vérité: trust
src/definitions.tsdans le repo GitHub.
Aperçu de API
Section intitulée « Vue d'ensemble de API »pickFiles
Section intitulée « pickFiles »Sélectionnez un ou plusieurs fichiers sur l'appareil.
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
Section intitulée « pickImages »Sélectionnez une ou plusieurs images dans la galerie. Android/iOS uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);pickVideos
Section intitulée « pickVideos »Sélectionnez une ou plusieurs vidéos dans la galerie. Android/iOS uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({ limit: 3, skipTranscoding: true});console.log('Picked videos:', result.files);pickMedia
Section intitulée « pickMedia »Sélectionnez une ou plusieurs images ou vidéos de la galerie. Android/iOS uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickMedia({ limit: 5, readData: true});console.log('Picked media:', result.files);pickDirectory
Section intitulée « pickDirectory »Sélectionnez un répertoire sur l'appareil. Android/iOS uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();console.log('Selected directory:', result.path);convertHeicToJpeg
Section intitulée « convertHeicToJpeg »Convertissez une image HEIC au format JPEG. iOS uniquement.
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
Section intitulée « copyFile »Copier un fichier vers un nouvel emplacement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
await CapgoFilePicker.copyFile({ from: '/source/file.pdf', to: '/destination/file.pdf', overwrite: true});checkPermissions
Section intitulée « checkPermissions »Vérifier les permissions pour la lecture de fichiers. Android uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.checkPermissions();console.log('Read permission:', status.readExternalStorage);requestPermissions
Section intitulée « requestPermissions »Demander les permissions pour la lecture de fichiers. Android uniquement.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.requestPermissions();if (status.readExternalStorage === 'granted') { console.log('Permission granted');}Référence de type
Section intitulée « Référence de type »PickFilesOptions
Section intitulée « PickFilesOptions »Options pour la sélection de fichiers.
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
Section intitulée « PickFilesResult »Résultat de la sélection de fichiers.
export interface PickFilesResult { /** Array of picked files */ files: PickedFile[];}PickMediaOptions
Section intitulée « PickMediaOptions »Options pour la sélection de médias (images/vidéos).
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
Section intitulée « PickDirectoryResult »Résultat de la sélection d'un répertoire.
export interface PickDirectoryResult { /** The path to the selected directory */ path: string;}ConvertHeicToJpegOptions
Section intitulée « ConvertHeicToJpegOptions »Options pour la conversion de HEIC en 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
Section intitulée « ConvertHeicToJpegResult »Résultat de la conversion HEIC en JPEG.
export interface ConvertHeicToJpegResult { /** The path to the converted JPEG file */ path: string;}CopyFileOptions
Section intitulée « CopyFileOptions »Options pour copier un fichier.
export interface CopyFileOptions { /** Source file path */ from: string; /** Destination file path */ to: string; /** * Whether to overwrite if destination exists. * @default false */ overwrite?: boolean;}PermissionStatus
Section intitulée « PermissionStatus »Statut de permission pour l'accès aux fichiers.
export interface PermissionStatus { /** Whether permission to read media files is granted */ readExternalStorage: PermissionState; /** Whether permission to access media location is granted */ accessMediaLocation?: PermissionState;}PickerDismissedListener
Section intitulée « PickerDismissedListener »Callback du listener pour l'événement de fermeture du picker.
export type PickerDismissedListener = (event: null) => void;PickedFile
Section intitulée « PickedFile »Représente un fichier sélectionné.
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
Section intitulée « PermissionState »Valeurs de l'état des permissions.
export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';Source de vérité
Section intitulée « Source de vérité »Cette page est générée à partir du src/definitions.ts. Relancez la synchronisation lorsque l’API public change en amont.
Continuer depuis Getting Started
Section intitulée « Aller plus loin après Getting Started »Si vous utilisez Premiers pas pour planifier le stockage et la gestion des fichiers, connectez-l’à Utiliser @capgo/capacitor-file-picker pour la capacité native dans Utiliser @capgo/capacitor-file-picker, @capgo/capacitor-data-storage-sqlite pour les détails d'implémentation dans @capgo/capacitor-data-storage-sqlite, Utilisation de @capgo/capacitor-data-storage-sqlite pour la capacité native dans Utiliser @capgo/capacitor-data-storage-sqlite, @capgo/capacitor-file pour les détails d'implémentation dans @capgo/capacitor-file, et Utiliser @capgo/capacitor-file pour la fonctionnalité native dans « Utiliser @capgo/capacitor-file. »