Mejores bibliotecas JavaScript para subir archivos: Uppy vs FilePond vs Dropzone

Comienza por el contrato de subida, no por el área para soltar archivos

Las tres bibliotecas pueden dar un aspecto moderno a un campo de archivo. Esa es la parte menos costosa de una subida en producción. Primero decide adónde van los bytes, qué protocolo utiliza el receptor, cuándo una subida pasa a ser persistente y qué identificador vincula el progreso en el navegador con un registro de la aplicación. Una subida directa al almacenamiento de objetos, un servidor del protocolo tus, un endpoint multipart convencional y un servicio de procesamiento tienen contratos de autorización y finalización diferentes, aunque la interfaz tenga el mismo aspecto.

Esta comparación selecciona tres herramientas independientes de subida desde el navegador que proporcionan componentes de interfaz y documentan un contrato de servidor. Define con precisión la recuperación. «Admite fragmentos» puede significar únicamente que una sesión de página puede reintentar un fragmento fallido. Un flujo de trabajo reanudable debe conservar una identidad de subida emitida por el servidor, consultar el desplazamiento aceptado y continuar de forma segura después de que el cliente pierda su estado. Define también la cancelación, el vencimiento, las solicitudes finales duplicadas y lo que muestra la interfaz cuando la transferencia se completa, pero la validación asíncrona o el procesamiento fallan.

Usa Uppy para flujos de trabajo modulares e infraestructura reanudable

Uppy separa su motor de estado de los plugins de interfaz y subida. Un equipo puede usar Dashboard como selector integrado, DragDrop para una interfaz más pequeña, Tus para un endpoint reanudable o Transloadit para una Assembly de subida y procesamiento. Esta composición resulta valiosa cuando un producto necesita varios tipos de fuentes o cuando la experiencia visible debe cambiar sin sustituir la capa de transferencia.

La contrapartida es una mayor superficie arquitectónica. La compatibilidad de los plugins, los estilos, la gestión de eventos y el endpoint elegido siguen requiriendo mantenimiento. Los proveedores remotos utilizan la infraestructura de Companion en lugar de exponer credenciales de terceros en el navegador; los equipos pueden alojarla por cuenta propia o usar Companion alojado que se incluye con Transloadit. Uppy es una opción predeterminada sólida para transferencias grandes o poco fiables cuando el back end ya utiliza el protocolo tus, y es la ruta con mantenimiento más corta para integrar Transloadit porque el plugin oficial gestiona la creación de la Assembly y la coordinación de la subida.

Usa FilePond para un campo de archivo refinado y plugins de imagen

FilePond parte de un elemento de entrada y lo convierte en un campo de archivo compacto y configurable. Su catálogo de plugins abarca la vista previa, el recorte, el redimensionamiento y la transformación de imágenes, además de metadatos y validación, lo que lo hace atractivo para formularios donde los usuarios necesitan una respuesta visual inmediata sobre las imágenes. Los adaptadores para frameworks pueden ayudar a integrarlo de forma natural en un sistema de componentes existente, pero el ciclo de vida del servidor sigue sujeto al contrato de FilePond.

Ese contrato es explícito. Sin fragmentación, process acepta un archivo y devuelve un identificador de archivo del servidor; revert elimina una subida temporal; restore recupera un archivo temporal cuya subida se interrumpió o que se subió anteriormente. Con fragmentación, el POST inicial de process no incluye ningún archivo y devuelve un identificador de transferencia; después, FilePond envía solicitudes PATCH para los fragmentos y solicitudes HEAD para la recuperación al endpoint de patch configurado. Puede ser un buen diseño cuando la aplicación controla ambos lados. No es intercambiable con el protocolo tus solo porque ambos diseños envíen fragmentos y utilicen solicitudes HEAD.

Usa Dropzone para un flujo XHR convencional de arrastrar y soltar

Dropzone convierte un elemento HTML en una interfaz de subida mediante arrastrar y soltar, proporciona vistas previas e indicadores de progreso y envía archivos mediante XMLHttpRequest. Su configuración es directa y un equipo con un endpoint de aplicación convencional puede obtener rápidamente una experiencia funcional. La fragmentación opcional, los fragmentos en paralelo, los límites de reintentos, la generación de miniaturas y el redimensionamiento de imágenes del lado del cliente amplían esa solución sin exigir un framework de interfaz independiente.

El back end controla una mayor parte de la lógica. Debe interpretar los campos de fragmentos de Dropzone, almacenar de forma segura los datos parciales, ensamblar cada archivo exactamente una vez y distinguir un reintento de una segunda subida. Habilitar la división en fragmentos no garantiza por sí solo la recuperación tras navegar a otra página o reiniciar el navegador. Al momento de la publicación, la etiqueta más reciente de Dropzone en npm es 6.0.0-beta.2, mientras que la última línea estable es 5.9.3; el ejemplo utiliza la exportación ESM con nombre de la versión 6 beta. Fija la línea prevista y prueba la forma de su importación en lugar de copiar configuraciones entre versiones.

Compara las tres opciones según las mismas dimensiones

En cuanto a la arquitectura de transferencia, Uppy ofrece la ruta más clara orientada a protocolos mediante su plugin Tus y una ruta directa de procesamiento mediante su plugin de Transloadit. FilePond dispone de un ciclo de vida documentado en el servidor de aplicaciones, con operaciones de archivos temporales y un protocolo opcional de fragmentos. Dropzone utiliza subidas XHR convencionales y añade metadatos configurables de fragmentos y reintentos. Ninguno de estos contratos es inherentemente correcto para todo back end.

En cuanto al diseño de la interfaz, FilePond favorece una experiencia compacta de campo de archivo, Uppy abarca desde la gestión de estado sin interfaz hasta un Dashboard completo y Dropzone se centra en un elemento que se convierte en un área para soltar archivos con vistas previas. Para los flujos de trabajo de imágenes, FilePond ofrece un amplio conjunto de plugins especializados en imágenes; Uppy y Dropzone también proporcionan funciones de vista previa o miniaturas, pero no deben elegirse como procesadores multimedia de referencia. Para facilitar la portabilidad, elige un protocolo de comunicación abierto cuando sea importante cambiar el cliente o el servidor de forma independiente.

Prueba un prototipo de cada biblioteca con un contrato de servidor real

Estas configuraciones apuntan deliberadamente a tres contratos de endpoint diferentes. El ejemplo de Uppy necesita un servidor tus. El ejemplo de FilePond necesita controladores process, patch, revert y restore que implementen su semántica de fragmentos. El ejemplo de Dropzone necesita un endpoint que entienda y ensamble los fragmentos de Dropzone. Cambiar el nombre del paquete y conservar la misma URL no hace compatible al servidor.

Los límites numéricos tampoco son intercambiables deliberadamente: maxFileSize de Uppy se expresa en bytes, mientras que maxFilesize de Dropzone se expresa en mebibytes (MiB). El ejemplo de FilePond omite un plugin de tamaño para mantener el enfoque en su ciclo de vida en el servidor; el código de producción debe añadir y aplicar un límite adecuado tanto en el cliente como en el servidor.

Utiliza los ejemplos como base para experimentar, no como autorización para producción. Emite desde un servidor de confianza un permiso de subida de corta duración, asócialo con el usuario y la operación actuales, aplica límites de bytes y cantidad en el receptor, y devuelve un identificador opaco que la aplicación pueda conciliar. Elimina los registros de la consola antes de publicar y muestra los errores en una región de estado accesible cerca del control de subida.

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

import '@uppy/core/css/style.min.css'
import '@uppy/dashboard/css/style.min.css'

const uppy = new Uppy({
  restrictions: {
    allowedFileTypes: ['image/*', 'video/*'],
    maxFileSize: 500 * 1024 * 1024,
    maxNumberOfFiles: 10,
  },
})
  .use(Dashboard, {
    inline: true,
    target: '#uppy',
  })
  .use(Tus, {
    endpoint: 'https://uploads.example.com/files/',
    retryDelays: [0, 1_000, 3_000, 5_000],
  })

uppy.on('complete', ({ successful }) => {
  console.log('Uploaded files:', successful)
})

import { create, registerPlugin } from 'filepond'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'

import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'

registerPlugin(FilePondPluginFileValidateType, FilePondPluginImagePreview)

const input = document.querySelector('input[type="file"]')

if (!(input instanceof HTMLInputElement)) {
  throw new Error('Missing file input')
}

create(input, {
  acceptedFileTypes: ['image/*'],
  chunkSize: 5_000_000,
  chunkUploads: true,
  server: {
    process: '/api/filepond/process',
    patch: '/api/filepond/patch/',
    revert: '/api/filepond/revert',
    restore: '/api/filepond/restore/',
  },
})

import { Dropzone } from 'dropzone'

const dropzone = new Dropzone('#dropzone', {
  acceptedFiles: 'image/*,video/*',
  chunkSize: 2_000_000,
  chunking: true,
  forceChunking: true,
  maxFilesize: 500,
  retryChunks: true,
  retryChunksLimit: 3,
  url: '/api/dropzone/upload',
})

dropzone.on('success', (file, response) => {
  console.log('Upload accepted:', file.name, response)
})

dropzone.on('error', (file, message) => {
  console.error('Upload failed:', file.name, message)
})

Prueba el comportamiento ante fallos antes de elegir una opción

Ejecuta los mismos casos de prueba y fallos con cada opción candidata: una imagen pequeña, un video grande, un archivo de cero bytes, una extensión engañosa, una conexión interrumpida, una recarga de página, una autorización vencida, una solicitud final duplicada, una cancelación del usuario y un rechazo del servidor después de que lleguen todos los bytes. Mide los bytes retransmitidos, el tiempo de recuperación, el trabajo duplicado del servidor, la filtración de archivos temporales y si el usuario puede comprender el estado.

Luego, prueba la responsabilidad sobre la integración. Verifica el acceso mediante teclado, el movimiento del foco, los avisos de error, la localización, el uso de memoria en dispositivos móviles, el comportamiento al desmontar componentes del framework, las actualizaciones de dependencias y la observabilidad de los endpoints. La decisión debe indicar la línea de versiones, los plugins seleccionados, el protocolo del servidor, el responsable del estado de los recursos y el plan de reemplazo. Ese registro importa más que una clasificación genérica porque explica por qué la elección sigue siendo adecuada después de que el desarrollador original se vaya.