Leve
Pacote core com menos de 10KB minificado. Tree-shakeable para tamanho otimizado.
TypeScript
Escrito em TypeScript com definições de tipos abrangentes.
Zero Dependências
Nenhuma dependência de runtime. Requer apenas React como dependência de pares.
Recursos
Design Headless
Sem componentes de UI embutidos. Você tem controle total sobre a aparência. Crie exatamente a experiência de upload que você deseja.
Arrastar e Soltar
Seleção de arquivos intuitiva por arrastar e soltar com feedback visual para tipos de arquivo válidos e inválidos durante o arrasto.
Progresso de Upload
Acompanhe o progresso em tempo real de arquivos individuais e o progresso geral do upload. Crie belos indicadores de progresso.
Validação de Arquivos
Validação integrada de tipos de arquivo, tamanhos e dimensões. Adicione regras de validação personalizadas para suas necessidades específicas.
Armazenamento em Nuvem
Faça upload diretamente para S3, Google Cloud Storage, Azure Blob e mais usando URLs pré-assinadas. Sem necessidade de servidor proxy.
Uploads em Partes
Divida arquivos grandes em partes para upload confiável. Suporte para uploads retomáveis com o protocolo tus.
Processamento de Imagens
Comprima, redimensione e recorte imagens antes do upload. Corrija problemas de orientação EXIF automaticamente.
React Native
Funciona no React Native com o adaptador nativo. Mesma API para aplicações web e mobile.
Seguro para SSR
Funciona perfeitamente com Next.js, Remix e outros frameworks SSR. Sem problemas de hidratação.
Início Rápido
1. Instalar
npm install @samithahansaka/dropup
2. Usar
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}