Repolode
Enviar
pqina

pqina/filepond

Una biblioteca de JavaScript para subir archivos, con arrastrar y soltar, optimización de imágenes, cargas por partes y adaptadores para React, Vue, Angular y Svelte.

Ver en GitHubSitio web
Estrellas
16,393
Forks
852
Issues abiertos
147
Último commit
hace 9 días

¿Qué es?

FilePond es una biblioteca de JavaScript para gestionar la carga de archivos en el navegador. Los usuarios pueden arrastrar y soltar archivos, seleccionarlos del sistema de archivos, pegarlos o añadirlos mediante la API. El componente también acepta directorios, blobs, URL remotas y Data URIs como entrada.

Antes de subirlos, FilePond puede redimensionar, recortar, aplicar filtros y rotar imágenes, corregir su orientación EXIF y enviar archivos mediante AJAX, en partes o codificados en base64 dentro de un envío de formulario. La interfaz se puede recorrer con el teclado, se ha probado con lectores de pantalla como VoiceOver y JAWS, y se adapta tanto a diseños móviles como de escritorio.

La biblioteca principal se amplía mediante un sistema de plugins que incluye funciones para vistas previas, validación, cambio de nombre, metadatos y gestión de PDF. Hay adaptadores oficiales para React, Vue, Angular, Svelte y jQuery, y adaptadores de la comunidad para varios frameworks del lado del servidor.

Funciones clave

  • 01Acepta archivos, directorios, URL remotas y Data URIs mediante arrastrar y soltar, el selector de archivos, el portapapeles o la API.
  • 02Admite cargas por partes y mediante AJAX, con codificación base64 opcional en los envíos de formularios.
  • 03Redimensiona, recorta y aplica filtros a las imágenes, además de corregir su orientación EXIF antes de subirlas.
  • 04Se puede recorrer con el teclado y se ha probado con lectores de pantalla, incluidos VoiceOver y JAWS.
  • 05Se amplía mediante plugins para vistas previas, validación y metadatos.

Casos de uso

  • Añadir a una aplicación web la carga de avatares o fotos con redimensionamiento del lado del cliente.
  • Crear un formulario para subir varios archivos en proyectos con React, Vue, Angular o Svelte.
  • Subir archivos grandes por partes desde el navegador a un servidor backend.
  • Ofrecer un widget accesible para subir archivos a usuarios que utilizan lectores de pantalla.

Inicio rápido

  1. 1

    Instala FilePond desde npm

    npm install filepond
  2. 2

    Importa FilePond y crea un componente para subir varios archivos

    import * as FilePond from 'filepond';
  3. 3

    Añade el componente al DOM

Antes de usarlo

  • El código de Quick Start es un ejemplo esquemático; necesitas un endpoint de backend para recibir las cargas.
  • Según el README, la cobertura de pruebas ronda el 65%.
  • Hay una versión alfa de la v5 disponible para probar, por lo que la API principal podría cambiar.

En colecciones

Bibliotecas y herramientas de visión artificial

Temas

#file-upload#javascript#drag-and-drop#image-processing#frontend-components#ui-library#filepond#plugin#vanilla

Preguntas frecuentes

¿Qué es filepond?
Una biblioteca de JavaScript para subir archivos, con arrastrar y soltar, optimización de imágenes, cargas por partes y adaptadores para React, Vue, Angular y Svelte. FilePond es una biblioteca de JavaScript para gestionar la carga de archivos en el navegador. Los usuarios pueden arrastrar y soltar archivos, seleccionarlos del sistema de archivos, pegarlos o añadirlos mediante la API. El componente también acepta directorios, blobs, URL remotas y Data URIs como entrada.
¿filepond es gratuito? ¿Qué licencia tiene?
filepond es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿filepond sigue mantenido?
Mantenimiento activo. El último commit de filepond fue el 28 oct 2026.
¿Para qué puedo usar filepond?
Añadir a una aplicación web la carga de avatares o fotos con redimensionamiento del lado del cliente. Crear un formulario para subir varios archivos en proyectos con React, Vue, Angular o Svelte. Subir archivos grandes por partes desde el navegador a un servidor backend. Ofrecer un widget accesible para subir archivos a usuarios que utilizan lectores de pantalla.
¿Cómo se instala filepond?
Instala FilePond desde npm: npm install filepond Importa FilePond y crea un componente para subir varios archivos: import * as FilePond from 'filepond'; Añade el componente al DOM
¿Dónde consigo filepond?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pqina/filepond

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados

transloadit / uppy

Un cargador modular de archivos JavaScript para navegadores, con cargas reanudables, selectores de archivos en la nube, captura con webcam y una interfaz Dashboard lista para usar.

Frontend y UI#file-upload#javascript#typescript
31,1 mil+3 esta semana2,1 milTypeScriptMITBien mantenidoActualizado hace 17 horas