Guía
Cómo usar File Picker en Capacitor
Usando @capgo/capacitor-file-picker
Plugin de Capacitor File Picker para seleccionar archivos, imágenes, vídeos y directorios.
Instalar
bun add @capgo/capacitor-file-picker
bunx cap sync
bunx cap sync copia el code nativo del plugin en tus proyectos nativos. Ejecútalo de nuevo tras cada actualización del plugin.
Importar
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
API de un vistazo
| Método | Descripción |
|---|---|
pickFiles |
Selecciona uno o más archivos del dispositivo. |
pickImages |
Selecciona una o más imágenes de la galería. Solo Android/iOS. |
pickVideos |
Selecciona uno o más videos de la galería. Solo Android/iOS. |
pickMedia |
Selecciona imágenes o videos de la galería. Solo Android/iOS. |
pickDirectory |
Selecciona un directorio del dispositivo. Solo Android/iOS. |
convertHeicToJpeg |
Convierte una imagen HEIC a formato JPEG. Solo iOS. |
copyFile |
Copia un archivo a una nueva ubicación. |
checkPermissions |
Verifica el estado de permisos de archivos o medios. Los flujos de solo selector no deben depender pickFiles(), pickImages(), pickVideos(), o pickMedia() de este permiso en Android 13+. Solo Android. |
requestPermissions |
Solicita permisos de archivos o medios. No solicites ni declares READ_MEDIA_IMAGES o READ_MEDIA_VIDEO estos permisos solo para usar las APIs del selector. Google Play solo permite estos permisos si las alternativas del selector no bastan para la funcionalidad principal. Usa @capgo/capacitor-file-picker métodos del selector para acceder a archivos, imágenes o videos seleccionados por el usuario. Solo Android. |
Ejemplos
pickFiles()
Selecciona uno o más archivos del dispositivo.
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()
Selecciona una o más imágenes de la galería. Solo 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()
Selecciona uno o más videos de la galería. Solo 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()
Selecciona una o más imágenes o videos de la galería. Solo 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()
Selecciona un directorio del dispositivo. Solo Android/iOS.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();
console.log('Selected directory:', result.path);
convertHeicToJpeg()
Convierte una imagen HEIC a formato JPEG. Solo 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);
La tabla anterior lista los 9 métodos principales. Los helpers de versión y listeners, así como el contrato completo de cada método, están documentados en el repositorio de GitHub.
Escuchar eventos
addListener devuelve un handle. Llama a handle.remove() cuando la pantalla se desmonte, o CapgoFilePicker.removeAllListeners() para limpiar todos los listeners.
Referencia completa
Continúa desde Uso de @capgo/capacitor-file-picker
Si estás usando Uso de @capgo/capacitor-file-picker para planificar el almacenamiento y la gestión de archivos, conéctalo con @capgo/capacitor-file-picker para ver los detalles de implementación en @capgo/capacitor-file-picker, Primeros pasos para los detalles de implementación en Primeros pasos, @capgo/capacitor-data-storage-sqlite para el detalle de implementación en @capgo/capacitor-data-storage-sqlite, Usando @capgo/capacitor-data-storage-sqlite para la capacidad nativa en Usando @capgo/capacitor-data-storage-sqlite, y @capgo/capacitor-file para el detalle de implementación en @capgo/capacitor-file.