Saltar al contenido principal
@capgo/capacitor-file-picker Archivos y almacenamiento Código abierto

File Picker plugin Capacitor

Selecciona archivos, imágenes, videos y directorios con soporte nativo para iOS y Android, incluyendo conversión HEIC

Instalar

bun add @capgo/capacitor-file-picker bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-file-picker
  • pnpm add @capgo/capacitor-file-picker
  • yarn add @capgo/capacitor-file-picker

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.

FAQ

FAQ del plugin File Picker

¿Cómo instalo el plugin File Picker en una app Capacitor?

Ejecuta "bun add @capgo/capacitor-file-picker" (o "npm install @capgo/capacitor-file-picker"), luego ejecuta "bunx cap sync" para que los proyectos de iOS y Android reconozcan el code nativo. Impórtalo desde "@capgo/capacitor-file-picker" en el code de tu app.

¿Es compatible @capgo/capacitor-file-picker con React, Vue y Angular?

Sí. File Picker es un paquete Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor es compatible con @capgo/capacitor-file-picker?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-file-picker gratuito y open source?

Sí. El código fuente de code es público en GitHub en https://github.com/Cap-go/capacitor-file-picker/ y el paquete es gratuito para instalar desde npm. Los reportes de bugs y pull requests son bienvenidos.

¿Puedo actualizar code que usa File Picker sin pasar por la revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios en JavaScript, HTML y CSS que llamen al plugin pueden publicarse al instante con las live updates de Capgo.

Lanza cambios en File Picker sin esperar la revisión de la app

Una vez que el plugin esté en tu build de la tienda, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo