Aller au contenu principal

Comment fonctionne Dropup

Dropup est construit autour du concept d'interface utilisateur headless - il gère toute la logique complexe de téléchargement de fichiers tout en vous donnant un contrôle total sur la présentation visuelle.

Architecture​

┌─────────────────────────────────────────────────────────────┐
│                     Your React Component                     │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Drop Zone   │  │ File List   │  │ Upload Button       │  │
│  │ (your UI)   │  │ (your UI)   │  │ (your UI)           │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup Hook                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │Validation │ │  State    │ │  Upload   │ │ Platform│  ││
│  │  │  Engine   │ │ Manager   │ │  Engine   │ │ Adapter │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Composants clés​

1. Gestionnaire d'état​

Dropup utilise le useReducer de React pour une gestion d'état prévisible :

  • Suit tous les fichiers et leurs statuts
  • Gère l'état de glissement
  • Gère la progression du téléchargement
  • Fournit des valeurs calculées

2. Moteur de validation​

Avant que les fichiers ne soient ajoutés, ils passent par la validation :

const { files } = useDropup({
  accept: 'image/*',           // Validation du type de fichier
  maxSize: 5 * 1024 * 1024,    // Taille maximale du fichier
  minSize: 1024,               // Taille minimale du fichier
  maxFiles: 10,                // Nombre maximum de fichiers
  maxWidth: 4096,              // Largeur maximale de l'image
  maxHeight: 4096,             // Hauteur maximale de l'image
  customRules: [               // Validation personnalisée
    (file) => file.name.length < 100 || 'Filename too long'
  ],
});

3. Moteur de téléchargement​

Le moteur de téléchargement gère :

  • Les téléchargements simples (une requête par fichier)
  • Les téléchargements fragmentés (diviser les gros fichiers)
  • La logique de nouvelle tentative avec backoff exponentiel
  • La gestion des téléchargements simultanés
  • Le suivi de la progression

4. Adaptateur de plateforme​

Dropup fonctionne sur toutes les plateformes :

  • Web - Utilise les API natives du navigateur
  • React Native - Utilise la gestion native des fichiers
  • SSR - Sûr pour le rendu côté serveur

Flux de données​

User Action → Validation → State Update → Upload → Callbacks
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  Select/     Accept/Reject   files[]    XHR/Fetch   onComplete
  Drop files                  Updated    Progress    onError

Principes de conception​

1. Headless d'abord​

Aucun composant UI intégré - vous construisez exactement ce dont vous avez besoin :

// Vous contrôlez entièrement l'interface utilisateur
<div {...getDropProps()}>
  <YourCustomDropZone />
  <input {...getInputProps()} />
</div>

2. Sécurité des types​

Support complet de TypeScript avec des types complets :

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

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

3. Tree Shakeable​

Importez uniquement ce dont vous avez besoin :

// Uniquement le cœur (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// Ajoutez le support cloud si nécessaire
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// Ajoutez le traitement d'image si nécessaire
import { compressImage } from '@samithahansaka/dropup/image';

4. Amélioration progressive​

Commencez simplement, ajoutez des fonctionnalités selon vos besoins :

// Utilisation basique
const { files } = useDropup();

// Ajoutez la validation
const { files } = useDropup({ maxSize: 10_000_000 });

// Ajoutez le téléchargement automatique
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// Ajoutez le stockage cloud
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});