Repolode
Enviar
pqina

pqina/filepond

Biblioteca JavaScript para upload de arquivos, com arrastar e soltar, otimização de imagens, uploads em partes e adaptadores para React, Vue, Angular e Svelte.

Ver no GitHubSite
Estrelas
16,393
Forks
852
Issues abertas
147
Último commit
há 9 dias

O que é?

FilePond é uma biblioteca JavaScript para gerenciar uploads de arquivos no navegador. Os usuários podem arrastar e soltar arquivos, selecioná-los no sistema de arquivos, colá-los ou adicioná-los pela API. O componente também aceita diretórios, blobs, URLs remotas e Data URIs como entrada.

No processamento, o FilePond pode redimensionar, cortar, aplicar filtros e girar imagens antes do upload, corrigir a orientação EXIF e enviar arquivos via AJAX, em partes ou codificados em base64 dentro de um envio de formulário. A interface pode ser navegada pelo teclado, foi testada com leitores de tela como VoiceOver e JAWS e se adapta a layouts para dispositivos móveis e desktops.

A biblioteca principal pode ser estendida por um sistema de plugins que abrange pré-visualizações, validação, renomeação, metadados e processamento de PDFs. Há adaptadores oficiais para React, Vue, Angular, Svelte e jQuery, além de adaptadores da comunidade para vários frameworks de back-end.

Recursos principais

  • 01Aceita arquivos, diretórios, URLs remotas e Data URIs por arrastar e soltar, seletor de arquivos, colagem ou API.
  • 02Oferece suporte a uploads em partes e via AJAX, com opção de codificar em base64 nos envios de formulário.
  • 03Redimensiona, corta e aplica filtros às imagens, além de corrigir a orientação EXIF antes do upload.
  • 04Pode ser navegado pelo teclado e foi testado com leitores de tela, incluindo VoiceOver e JAWS.
  • 05Pode ser estendido com plugins para pré-visualizações, validação e metadados.

Casos de uso

  • Adicionar uploads de avatar ou fotos a um app web com redimensionamento no cliente.
  • Criar um formulário para upload de vários arquivos em projetos com React, Vue, Angular ou Svelte.
  • Enviar arquivos grandes em partes do navegador para um servidor de back-end.
  • Oferecer um componente de upload acessível para usuários que dependem de leitores de tela.

Início rápido

  1. 1

    Instale o FilePond pelo npm

    npm install filepond
  2. 2

    Importe o FilePond e crie um componente para enviar vários arquivos

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

    Adicione o componente ao DOM

Antes de usar

  • O código do Quick Start é apenas um esboço; você ainda precisa de um endpoint de backend para receber os uploads.
  • Segundo o README, a cobertura de testes é de cerca de 65%.
  • Uma versão alfa da v5 está disponível para testes, então a API principal pode mudar.

Em coleções

Bibliotecas e ferramentas de visão computacional

Tópicos

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

Perguntas frequentes

O que é filepond?
Biblioteca JavaScript para upload de arquivos, com arrastar e soltar, otimização de imagens, uploads em partes e adaptadores para React, Vue, Angular e Svelte. FilePond é uma biblioteca JavaScript para gerenciar uploads de arquivos no navegador. Os usuários podem arrastar e soltar arquivos, selecioná-los no sistema de arquivos, colá-los ou adicioná-los pela API. O componente também aceita diretórios, blobs, URLs remotas e Data URIs como entrada.
filepond é gratuito? Qual é a licença?
filepond é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
filepond ainda é mantido?
Manutenção ativa. O último commit de filepond foi em 28 de out. de 2026.
Para que posso usar filepond?
Adicionar uploads de avatar ou fotos a um app web com redimensionamento no cliente. Criar um formulário para upload de vários arquivos em projetos com React, Vue, Angular ou Svelte. Enviar arquivos grandes em partes do navegador para um servidor de back-end. Oferecer um componente de upload acessível para usuários que dependem de leitores de tela.
Como instalar filepond?
Instale o FilePond pelo npm: npm install filepond Importe o FilePond e crie um componente para enviar vários arquivos: import * as FilePond from 'filepond'; Adicione o componente ao DOM
Onde consigo filepond?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pqina/filepond

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados