Zum Hauptinhalt springen

Wie Dropup funktioniert

Dropup basiert auf dem Konzept der Headless UI - es übernimmt die gesamte komplexe Datei-Upload-Logik und gibt Ihnen dabei die vollständige Kontrolle über die visuelle Darstellung.

Architektur​

┌─────────────────────────────────────────────────────────────┐
│                     Ihre React-Komponente                     │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Ablagezone  │  │ Dateiliste  │  │ Upload-Button       │  │
│  │ (Ihre UI)   │  │ (Ihre UI)   │  │ (Ihre UI)           │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup Hook                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │Validierung│ │  Zustands-│ │  Upload-  │ │Plattform│  ││
│  │  │  Engine   │ │  Manager  │ │  Engine   │ │ Adapter │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Kernkomponenten​

1. Zustandsmanager​

Dropup verwendet React's useReducer für vorhersagbare Zustandsverwaltung:

  • Verfolgt alle Dateien und deren Status
  • Verwaltet den Drag-Zustand
  • Behandelt den Upload-Fortschritt
  • Stellt berechnete Werte bereit

2. Validierungs-Engine​

Bevor Dateien hinzugefügt werden, durchlaufen sie die Validierung:

const { files } = useDropup({
  accept: 'image/*',           // Dateityp-Validierung
  maxSize: 5 * 1024 * 1024,    // Max Dateigröße
  minSize: 1024,               // Min Dateigröße
  maxFiles: 10,                // Max Anzahl Dateien
  maxWidth: 4096,              // Max Bildbreite
  maxHeight: 4096,             // Max Bildhöhe
  customRules: [               // Benutzerdefinierte Validierung
    (file) => file.name.length < 100 || 'Dateiname zu lang'
  ],
});

3. Upload-Engine​

Die Upload-Engine behandelt:

  • Einfache Uploads (einzelne Anfrage pro Datei)
  • Chunked Uploads (große Dateien aufteilen)
  • Wiederholungslogik mit exponentiellem Backoff
  • Verwaltung gleichzeitiger Uploads
  • Fortschrittsverfolgung

4. Plattform-Adapter​

Dropup funktioniert plattformübergreifend:

  • Web - Verwendet native Browser-APIs
  • React Native - Verwendet native Dateiverarbeitung
  • SSR - Sicher für serverseitiges Rendering

Datenfluss​

Benutzeraktion → Validierung → Zustandsupdate → Upload → Callbacks
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  Auswählen/   Akzeptieren/   files[]    XHR/Fetch   onComplete
  Ablegen      Ablehnen       Aktualisiert Fortschritt onError

Designprinzipien​

1. Headless First​

Keine eingebauten UI-Komponenten - Sie erstellen genau das, was Sie brauchen:

// Sie kontrollieren die gesamte UI
<div {...getDropProps()}>
  <IhreBenutzerdefinierteDropZone />
  <input {...getInputProps()} />
</div>

2. Typsicherheit​

Volle TypeScript-Unterstützung mit umfassenden Typen:

import type { DropupFile, UseDropupOptions } from '@samithahansaka/dropup';

const options: UseDropupOptions = {
  accept: 'image/*',
  onUploadComplete: (file: DropupFile) => {
    console.log(file.uploadedUrl);
  },
};

3. Tree Shakeable​

Importieren Sie nur, was Sie brauchen:

// Nur Core (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// Cloud-Unterstützung bei Bedarf hinzufügen
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// Bildverarbeitung bei Bedarf hinzufügen
import { compressImage } from '@samithahansaka/dropup/image';

4. Progressive Erweiterung​

Einfach beginnen, Features bei Bedarf hinzufügen:

// Grundlegende Verwendung
const { files } = useDropup();

// Validierung hinzufügen
const { files } = useDropup({ maxSize: 10_000_000 });

// Auto-Upload hinzufügen
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// Cloud-Speicher hinzufügen
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});