Subidas e integración frontend # Mejores bibliotecas JavaScript para subir archivos: Uppy vs FilePond vs Dropzone Compara Uppy, FilePond y Dropzone según el protocolo de transferencia, el modelo de interfaz, la recuperación, la integración y el mantenimiento a largo plazo. Publicado el 24 de agosto de 2026 ## Conclusiones clave * Elige el protocolo del servidor y los requisitos de recuperación antes de comparar los componentes visuales de las bibliotecas. * Trata la fragmentación y la capacidad de reanudar como propiedades diferentes y luego verifica la recuperación tras recargar la página. * Compara el contrato del endpoint, la accesibilidad, los estados de fallo y la estrategia de mantenimiento con los mismos casos de prueba. La mejor herramienta para subir archivos en JavaScript no es la que tiene la lista de funciones más larga. Es aquella cuyo modelo de estados, contrato de transferencia, interfaz y comportamiento ante fallos se ajustan al producto que tu equipo puede mantener. Uppy, FilePond y Dropzone coinciden en la selección de archivos y el progreso de la subida, pero difieren considerablemente cuando se produce un fallo de red o un servidor debe conciliar trabajo parcial. ## En esta guía 1. [Comienza por el contrato de subida, no por el área para soltar archivos](#best-javascript-file-upload-libraries-section-1) 2. [Usa Uppy para flujos de trabajo modulares e infraestructura reanudable](#best-javascript-file-upload-libraries-section-2) 3. [Usa FilePond para un campo de archivo refinado y plugins de imagen](#best-javascript-file-upload-libraries-section-3) 4. [Usa Dropzone para un flujo XHR convencional de arrastrar y soltar](#best-javascript-file-upload-libraries-section-4) 5. [Compara las tres opciones según las mismas dimensiones](#best-javascript-file-upload-libraries-section-5) 6. [Prueba un prototipo de cada biblioteca con un contrato de servidor real](#best-javascript-file-upload-libraries-section-6) 7. [Prueba el comportamiento ante fallos antes de elegir una opción](#best-javascript-file-upload-libraries-section-7) ## Lo más importante * Usa Uppy para un flujo de trabajo modular de subida con el protocolo tus, fuentes remotas o integración directa con Transloadit. * Usa FilePond cuando una experiencia pulida para el campo de archivo y los plugins orientados a imágenes sean más importantes que la portabilidad del protocolo. * Usa Dropzone para un flujo XHR sencillo de arrastrar y soltar cuando su contrato de fragmentación y su perfil de mantenimiento se adapten a la aplicación. ## 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. ### Destino de los bytes Identifica al primer receptor y al propietario persistente, en lugar de tratar cada ruta del navegador a un servicio como una «subida directa». ### Contrato del protocolo Registra los métodos, encabezados, identificadores, reglas de desplazamiento, solicitud de finalización y semántica de reintento que el servidor debe implementar. ### Finalización en el producto Define si el éxito implica que se aceptaron los bytes, que se almacenaron de forma persistente, que se inspeccionó el contenido, que se completaron los derivados o que se publicó un recurso. ## 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. ### Mejor opción Productos que necesitan la capacidad de reanudación del protocolo tus, fuentes remotas, varias configuraciones de interfaz o procesamiento de Transloadit en un único flujo de trabajo observable. ### Presta especial atención La cantidad de plugins, Companion alojado por cuenta propia o por Transloadit para fuentes remotas, la integración de CSS y la responsabilidad sobre los eventos del ciclo de vida. ### No des por sentado Usar Uppy no hace que un endpoint multipart cualquiera sea reanudable ni traslada al cliente la autorización y la persistencia de recursos. ## 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. ### Mejor opción Formularios y flujos de trabajo orientados a imágenes que se benefician de una presentación refinada del campo de archivo y de plugins del lado del cliente seleccionados deliberadamente. ### Presta especial atención El registro de plugins, el procesamiento de imágenes del lado del cliente en dispositivos con recursos limitados, la limpieza de archivos temporales y el ciclo de vida personalizado del servidor. ### No des por sentado Que una transformación del lado del cliente sustituya la inspección autoritativa del servidor o que la fragmentación de FilePond pueda reanudarse mediante un endpoint del protocolo tus. ## 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. ### Mejor opción Aplicaciones existentes renderizadas en el servidor o en el cliente que necesitan un área de arrastre configurable sobre un endpoint que el equipo ya controla. ### Presta especial atención El ensamblado de fragmentos, la incompatibilidad entre la división en fragmentos y uploadMultiple, la finalización idempotente, la limpieza tras reintentos, la accesibilidad de las vistas previas personalizadas y la línea de versión seleccionada. ### No des por sentado Los reintentos de fragmentos dentro de la página activa ofrecen el mismo contrato de recuperación que un protocolo reanudable con URL de subida persistentes. ## 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. ### Uppy Prefiérelo cuando la composición modular, el protocolo tus, los proveedores remotos o una transferencia oficial a Transloadit compensen la mayor superficie de integración. ### FilePond Prefiérelo cuando un campo de archivo pulido y los plugins de imágenes se adapten al producto y el equipo acepte su ciclo de vida específico en el servidor. ### Dropzone Prefiérelo cuando un área de arrastre XHR configurable se adapte a un endpoint existente y el equipo pueda encargarse del ensamblado de fragmentos y de los límites de recuperación. ## 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. Usar Uppy Dashboard con un endpoint reanudable del protocolo tus ``` 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) }) ``` Usar FilePond con endpoints explícitos del ciclo de vida y plugins ``` 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/', }, }) ``` Usar Dropzone 6 beta con reintentos de fragmentos en un endpoint de aplicación ``` 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. ### Recuperación de red Interrumpe la transferencia en varios desplazamientos, recarga la página y verifica exactamente qué bytes e identificadores del servidor se reutilizan. ### Idempotencia del servidor Repite las solicitudes de fragmentos y finalización, y demuestra que una sola subida lógica crea un solo resultado persistente en la aplicación. ### Estado accesible Confirma que la selección, el progreso, la cancelación, el rechazo y la finalización sigan siendo comprensibles sin arrastrar y soltar ni depender de la visión. ### Ruta de mantenimiento Fija y actualiza los paquetes seleccionados, prueba la integración real en CI y conserva datos de prueba para los casos límite del protocolo. ## Detalles técnicos que conviene conocer * Uppy Core controla el estado compartido de las subidas, publica eventos del ciclo de vida y aplica restricciones de selección; los plugins instalados por separado añaden interfaces y transportes como Dashboard, Tus o Transloadit. * El plugin Tus de Uppy delega la transferencia al cliente del protocolo tus, por lo que un endpoint que implemente el protocolo tus puede reanudarla desde un desplazamiento de subida confirmado por el servidor, en lugar de volver a transferir el archivo completo. * El plugin de Transloadit para Uppy crea Assemblies, realiza subidas mediante el protocolo tus, puede obtener parámetros firmados de Assembly mediante una función assemblyOptions que llama a un servidor de confianza y, opcionalmente, puede esperar los resultados de la codificación. * FilePond documenta las operaciones de servidor process, revert, restore, load, fetch, patch y remove; el modo de fragmentos comienza con una solicitud POST sin archivo y luego envía los fragmentos y las solicitudes de recuperación al endpoint patch. * Las vistas previas de imágenes, la validación del tipo de archivo, el recorte, el cambio de tamaño, los filtros y las transformaciones de FilePond se proporcionan mediante plugins opcionales que deben registrarse y mantenerse deliberadamente. * Dropzone realiza subidas mediante XMLHttpRequest y puede dividir archivos en fragmentos, reintentar los fragmentos fallidos o subirlos en paralelo, pero el servidor de aplicaciones debe ensamblarlos y finalizarlos correctamente. * Una configuración del lado del cliente para archivos permitidos o aceptados mejora la retroalimentación, pero no constituye un límite de seguridad, ya que las solicitudes pueden eludir el código del navegador y los metadatos de los archivos pueden ser falsos o estar incompletos. * Las tres bibliotecas utilizan semánticas de endpoint, identificadores, comportamientos de cancelación y metadatos de fragmentos diferentes, por lo que sustituir el widget visible no conserva automáticamente el contrato de subida del back end. ## Un enfoque práctico 1. 1\ Documenta el destino requerido de los bytes, el protocolo del servidor, el periodo de recuperación y el estado final que indica el éxito. 2. 2\ Crea prototipos de todos los candidatos viables con el endpoint real, en lugar de usar una solicitud simulada que siempre se complete correctamente. 3. 3\ Prueba la interrupción, la recarga, la finalización duplicada, el rechazo, la cancelación y el vencimiento de la autorización. 4. 4\ Elige según la adecuación medida al producto y documenta el contrato entre cliente y servidor del que ahora es responsable el equipo. Un flujo de trabajo multimedia de cuatro etapas ## Cuándo resulta útil Transloadit Usa el plugin de Transloadit para Uppy, que recibe mantenimiento, cuando el navegador deba crear una Assembly, subir archivos mediante el protocolo tus y hacer seguimiento de los resultados del procesamiento. Companion alojado por Transloadit puede admitir fuentes remotas. Una interfaz de FilePond o Dropzone puede conectarse mediante una integración personalizada, pero tu equipo será responsable de ese adaptador y de su comportamiento de recuperación. ## Límite de la arquitectura Uppy, FilePond y Dropzone son bibliotecas de subida para el navegador. Pueden seleccionar archivos, mostrar el progreso y transferir bytes según un contrato cliente-servidor configurado, pero no sustituyen la autorización del servidor, la inspección de contenido, el almacenamiento persistente, el procesamiento multimedia ni los registros de recursos de la aplicación. ## Preguntas frecuentes ### ¿Cuál es la mejor biblioteca de JavaScript para subir archivos? Uppy es la opción que mejor se adapta al protocolo tus, a las fuentes remotas o a Transloadit; FilePond resulta atractivo para un campo de archivos pulido y orientado a imágenes; Dropzone es útil para un área convencional de arrastrar y soltar mediante XHR. La opción correcta es aquella cuyo protocolo de servidor y comportamiento ante fallos se ajusten a la aplicación. ### ¿La subida fragmentada es lo mismo que la subida reanudable? No. La fragmentación divide un archivo en partes. La capacidad de reanudar también conserva la identidad de la subida, detecta el progreso aceptado y permite continuar de forma segura tras una interrupción. Evalúa la recuperación después de recargar la página y cuando el estado haya vencido, en lugar de comprobar únicamente si existe una opción de fragmentación. ### ¿FilePond o Dropzone pueden subir archivos a Transloadit? Pueden enviar archivos a una integración personalizada, pero Transloadit mantiene un plugin oficial de Uppy que coordina la creación de Assemblies, la subida mediante el protocolo tus y los resultados. Con un adaptador de FilePond o Dropzone, tu equipo es responsable de esa adaptación y de su comportamiento ante fallos. ### ¿Las restricciones de tipo de archivo del lado del cliente protegen una subida? No. Proporcionan una respuesta rápida, pero quien realiza la solicitud puede eludir el código del navegador y los metadatos pueden ser engañosos. Aplica la autorización, los límites de bytes, las reglas sobre el contenido observado y la política de almacenamiento en límites de servidor o procesamiento de confianza. ### ¿Se deben redimensionar las imágenes en el navegador antes de subirlas? Solo como optimización opcional del ancho de banda o de la vista previa cuando sea aceptable perder el original. El trabajo realizado en el navegador varía según el dispositivo y no sustituye la inspección autoritativa del servidor, los derivados reproducibles, la política de metadatos ni la conservación de un archivo de origen. ### ¿Cómo debe migrar un equipo entre bibliotecas de subida? Fija el contrato cliente-servidor actual, define identificadores y estados terminales equivalentes, ejecuta ambos clientes con casos de prueba compartidos que simulen fallos y migra una parte de la interfaz a la vez. Si los protocolos de comunicación difieren, trata el adaptador del servidor como una migración independiente, no como la sustitución de un componente visual. ## Crea el flujo de trabajo Pasa del concepto a una Assembly probada con documentación de Robots y demos funcionales. * [Lee la documentación de la API](/es/docs.md) * [Explora demos funcionales EN (English)](/demos.md) * [Crea un Workspace gratuito](/c/signup/) Subidas e integración frontend ## Continúa con guías relacionadas * [Subidas de archivos con React y Uppy: reanudación, vistas previas, validación y procesamiento](/es/guides/react-file-uploads-with-uppy.md)\ Crea un componente de subida en React con Uppy: vistas previas, validación, progreso accesible, cancelación, reanudación y procesamiento con Transloadit. * [Cómo aceptar subidas grandes pese a una conexión interrumpida](/es/guides/resumable-uploads-for-large-files.md)\ Acepta subidas de varios gigabytes mediante el protocolo tus, reanúdalas tras perder la conexión y mantén viva la Assembly hasta terminarlas. * [Guía de API de subida de archivos: arquitectura, seguridad y selección de proveedores](/es/guides/file-upload-api-guide.md)\ Elige e implementa una API de subida comparando arquitectura, reanudación, transferencia directa a la nube, seguridad, límites de almacenamiento y proveedores. * [Subidas seguras de archivos en Next.js con Uppy y Templates firmados de Transloadit](/es/guides/secure-file-uploads-nextjs-uppy.md)\ Crea una subida segura en Next.js App Router con Uppy: firma en servidor, Template bloqueado, validación autoritativa, transferencia reanudable y fin asíncrono.