Uppy se posiciona como un cargador de archivos modular y de código abierto para navegadores web, diseñado para simplificar la integración de flujos de carga complejos en aplicaciones modernas. Su arquitectura permite a los desarrolladores enfocarse en la lógica de negocio mientras la biblioteca gestiona la fiabilidad de las transferencias y la experiencia de usuario.

Capacidades principales de Uppy

La versatilidad de Uppy reside en su capacidad para adaptarse a diferentes necesidades técnicas mediante un sistema de plugins altamente extensible.

• Fuentes de archivos versátiles: Permite obtener archivos desde el disco local, URLs remotas, servicios de almacenamiento en la nube (Dropbox, Google Drive, Box), redes sociales como Instagram y dispositivos de captura como cámaras de fotos o video.
• Diseño modular: El núcleo (@uppy/core) es ligero. Los desarrolladores solo importan los componentes necesarios, lo que optimiza el tamaño del paquete final.
• Cargas reanudables: Implementa el protocolo abierto tus, lo que garantiza que las subidas de archivos de gran tamaño puedan continuar desde donde se detuvieron en caso de un fallo en la red.
• Componentes de UI listos para usar: Ofrece el Dashboard, una interfaz completa con previsualización, edición de metadatos y control de progreso, además de opciones para componentes personalizados o "headless".

Implementación rápida

Instalación

Para comenzar a utilizar Uppy en un entorno de desarrollo moderno, se deben instalar los paquetes base y los plugins requeridos mediante npm o yarn:

npm install @uppy/core @uppy/dashboard @uppy/tus @uppy/webcam

Configuración básica en JavaScript

A continuación, se muestra cómo inicializar una instancia de carga con soporte para interfaz gráfica y protocolo de subida reanudable:

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Tus from '@uppy/tus'
import Webcam from '@uppy/webcam'

// Inicialización del motor de subida
const gestorDeArchivos = new Uppy({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 5000000, // 5MB
    allowedFileTypes: ['image/*', '.pdf']
  }
})

// Configuración de plugins
gestorDeArchivos
  .use(Dashboard, {
    target: '#contenedor-uploader',
    inline: true,
    proudlyDisplayPoweredByUppy: false
  })
  .use(Webcam, { target: Dashboard })
  .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })

// Suscripción a eventos
gestorDeArchivos.on('complete', (resultado) => {
  console.log('Archivos subidos con éxito:', resultado.successful)
  console.log('Errores detectados:', resultado.failed)
})

En el archivo HTML correspondiente, se define el contenedor donde se renderizará el panel:

<div id="contenedor-uploader"></div>

Ecosistema de Plugins

Uppy organiza sus funciones en diversas categorías de plugins que se pueden combinar según el proyecto:

• Plugins de Interfaz (UI): Además del Dashboard, existen barras de progreso simples y notificaciones de estado.
• Plugins de Origen: Facilitan la conexión con proveedores externos mediante el uso de un servidor intermediario llamado Companion, que gestiona la autenticación y transferencia segura desde la nube.
• Plugins de Procesamiento: Permiten realizar acciones antes de la subida, como @uppy/compressor para reducir el tamaño de imágenes o @uppy/image-editor para recortes básicos.
• Plugins de Destino: Además de Tus, soporta XHRUpload para peticiones HTTP estándar (POST/PUT) y AwsS3 para subidas directas a buckets de Amazon.

Soporte para Frameworks Modernos

La integración con marcos de trabajo populares es nativa gracias a paquetes específicos que exponen componentes listos para usar:

• React: A través de @uppy/react, permite usar componentes como <Dashboard /> o <DragDrop /> pasando la instancia de Uppy como prop.
• Vue: Utiliza @uppy/vue para integrar los componentes de la interfaz dentro del ciclo de vida de Vue.
• Angular: Mediante @uppy/angular, facilita el uso de directivas y componentes en aplicaciones bajo este framework.

Personalización y Control

Uppy no solo proporciona la herramienta visual, sino que permite un control granluar mediante eventos. Esto es fundamental para integraciones con bases de datos o flujos de validación personalizados:

gestorDeArchivos.on('upload-progress', (archivo, progreso) => {
  const porcentaje = progreso.bytesUploaded / progreso.bytesTotal * 100
  console.log(`Subiendo ${archivo.name}: ${porcentaje.toFixed(2)}%`)
})

gestorDeArchivos.on('error', (error) => {
  console.error('Error crítico en el flujo de subida:', error)
})

Esta capacidad de escucha permite sincronizar el estado de la aplicación con el progreso de la red de manera transpraente para el usuario.