Saltar al contenido principal

Cómo funciona Dropup

Dropup está construido alrededor del concepto de UI sin cabeza - maneja toda la lógica compleja de carga de archivos mientras te da control total sobre la presentación visual.

Arquitectura​

┌─────────────────────────────────────────────────────────────┐
│                     Tu componente React                      │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Zona de     │  │ Lista de    │  │ Botón de carga      │  │
│  │ soltar (UI) │  │ archivos    │  │ (tu UI)             │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    Hook useDropup                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │Motor de   │ │ Gestor de │ │ Motor de  │ │Adaptador│  ││
│  │  │validación │ │  estado   │ │  carga    │ │plataform│  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Componentes clave​

1. Gestor de estado​

Dropup usa useReducer de React para gestión de estado predecible:

  • Rastrea todos los archivos y sus estados
  • Gestiona el estado de arrastre
  • Maneja el progreso de carga
  • Proporciona valores calculados

2. Motor de validación​

Antes de que se agreguen los archivos, pasan por validación:

const { files } = useDropup({
  accept: 'image/*',           // Validación de tipo de archivo
  maxSize: 5 * 1024 * 1024,    // Tamaño máximo de archivo
  minSize: 1024,               // Tamaño mínimo de archivo
  maxFiles: 10,                // Número máximo de archivos
  maxWidth: 4096,              // Ancho máximo de imagen
  maxHeight: 4096,             // Alto máximo de imagen
  customRules: [               // Validación personalizada
    (file) => file.name.length < 100 || 'Nombre de archivo muy largo'
  ],
});

3. Motor de carga​

El motor de carga maneja:

  • Cargas simples (una solicitud por archivo)
  • Cargas fragmentadas (divide archivos grandes)
  • Lógica de reintento con retroceso exponencial
  • Gestión de cargas concurrentes
  • Seguimiento de progreso

4. Adaptador de plataforma​

Dropup funciona en todas las plataformas:

  • Web - Usa APIs nativas del navegador
  • React Native - Usa manejo nativo de archivos
  • SSR - Seguro para renderizado del lado del servidor

Flujo de datos​

Acción del usuario → Validación → Actualización de estado → Carga → Callbacks
       │                 │              │                    │         │
       ▼                 ▼              ▼                    ▼         ▼
   Seleccionar/    Aceptar/Rechazar  files[]             XHR/Fetch  onComplete
   Soltar archivos                   Actualizado         Progreso   onError

Principios de diseño​

1. Sin cabeza primero​

Sin componentes de UI integrados - construyes exactamente lo que necesitas:

// Tú controlas toda la UI
<div {...getDropProps()}>
  <TuZonaDeSoltarPersonalizada />
  <input {...getInputProps()} />
</div>

2. Seguridad de tipos​

Soporte completo de TypeScript con tipos comprehensivos:

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

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

3. Divisible en árboles​

Importa solo lo que necesitas:

// Solo el núcleo (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// Agrega soporte de nube cuando lo necesites
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// Agrega procesamiento de imágenes cuando lo necesites
import { compressImage } from '@samithahansaka/dropup/image';

4. Mejora progresiva​

Comienza simple, agrega características según las necesites:

// Uso básico
const { files } = useDropup();

// Agregar validación
const { files } = useDropup({ maxSize: 10_000_000 });

// Agregar carga automática
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// Agregar almacenamiento en la nube
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});