Leichtgewichtig
Kernpaket unter 10KB komprimiert. Tree-shakeable für optimale Größe.
TypeScript
In TypeScript geschrieben mit umfassenden Typdefinitionen.
Null Abhängigkeiten
Keine Runtime-Abhängigkeiten. Benötigt nur React als Peer-Abhängigkeit.
Funktionen
Headless Design
Keine eingebauten UI-Komponenten. Sie haben volle Kontrolle über Aussehen und Verhalten. Erstellen Sie genau die Upload-Erfahrung, die Sie möchten.
Drag & Drop
Intuitive Dateiauswahl per Drag & Drop mit visuellem Feedback für gültige und ungültige Dateitypen während des Ziehens.
Upload-Fortschritt
Verfolgen Sie den Fortschritt einzelner Dateien in Echtzeit und den Gesamt-Upload-Fortschritt. Erstellen Sie schöne Fortschrittsanzeigen.
Dateivalidierung
Integrierte Validierung für Dateitypen, Größen und Dimensionen. Fügen Sie benutzerdefinierte Validierungsregeln für Ihre spezifischen Anforderungen hinzu.
Cloud-Speicher
Laden Sie direkt zu S3, Google Cloud Storage, Azure Blob und mehr mit vorab signierten URLs hoch. Kein Server-Proxy erforderlich.
Chunked Uploads
Teilen Sie große Dateien in Chunks für zuverlässige Uploads. Unterstützung für fortsetzbare Uploads mit dem tus-Protokoll.
Bildverarbeitung
Komprimieren, skalieren und zuschneiden Sie Bilder vor dem Upload. Korrigiert automatisch EXIF-Orientierungsprobleme.
React Native
Funktioniert in React Native mit dem nativen Adapter. Gleiche API für Web- und Mobile-Apps.
SSR-sicher
Funktioniert nahtlos mit Next.js, Remix und anderen SSR-Frameworks. Keine Hydratationsprobleme.
Schnellstart
1. Installation
npm install @samithahansaka/dropup
2. Verwendung
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>
);
}