Ligero
El paquete principal es de menos de 10KB comprimido. Divisible en árboles para un tamaño óptimo.
TypeScript
Escrito en TypeScript con definiciones de tipos completas.
Cero Dependencias
Sin dependencias en tiempo de ejecución. Solo requiere React como dependencia de pares.
Características
Diseño sin Interfaz
Sin componentes de interfaz incorporados. Tienes control total sobre la apariencia y sensación. Construye la experiencia de carga que desees exactamente.
Arrastrar y Soltar
Selección de archivos intuitiva mediante arrastrar y soltar con retroalimentación visual para tipos de archivos válidos e inválidos durante el arrastre.
Progreso de Carga
Seguimiento del progreso en tiempo real para archivos individuales y progreso general de carga. Construye hermosos indicadores de progreso.
Validación de Archivos
Validación incorporada de tipos de archivos, tamaños y dimensiones. Agrega reglas de validación personalizadas para tus necesidades específicas.
Almacenamiento en la Nube
Carga directamente a S3, Google Cloud Storage, Azure Blob y más usando URLs prefirmadas. Sin necesidad de servidor proxy.
Cargas Fragmentadas
Divide archivos grandes en fragmentos para cargas confiables. Soporte para cargas reanudables con protocolo tus.
Procesamiento de Imágenes
Comprime, redimensiona y recorta imágenes antes de cargarlas. Corrige problemas de orientación EXIF automáticamente.
React Native
Funciona en React Native con el adaptador nativo. Misma API para aplicaciones web y móviles.
Compatible con SSR
Funciona sin problemas con Next.js, Remix y otros frameworks SSR. Sin problemas de hidratación.
Inicio 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>
);
}