Pular para o conteúdo principal

Como o Dropup Funciona

O Dropup é construído em torno do conceito de UI headless - ele lida com toda a lógica complexa de upload de arquivos enquanto dá a você controle total sobre a apresentação visual.

Arquitetura​

┌─────────────────────────────────────────────────────────────┐
│                   Seu Componente React                       │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Zona Drop   │  │ Lista Arq.  │  │ Botão Upload        │  │
│  │ (sua UI)    │  │ (sua UI)    │  │ (sua UI)            │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    Hook useDropup                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │ Motor de  │ │ Gerenc.   │ │ Motor de  │ │Adaptador│  ││
│  │  │ Validação │ │ Estado    │ │  Upload   │ │Platafor.│  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Componentes Principais​

1. Gerenciador de Estado​

O Dropup usa useReducer do React para gerenciamento de estado previsível:

  • Rastreia todos os arquivos e seus status
  • Gerencia o estado de arraste
  • Controla o progresso do upload
  • Fornece valores computados

2. Motor de Validação​

Antes de serem adicionados, os arquivos passam por validação:

const { files } = useDropup({
  accept: 'image/*',           // Validação de tipo de arquivo
  maxSize: 5 * 1024 * 1024,    // Tamanho máximo do arquivo
  minSize: 1024,               // Tamanho mínimo do arquivo
  maxFiles: 10,                // Número máximo de arquivos
  maxWidth: 4096,              // Largura máxima da imagem
  maxHeight: 4096,             // Altura máxima da imagem
  customRules: [               // Validação personalizada
    (file) => file.name.length < 100 || 'Nome do arquivo muito longo'
  ],
});

3. Motor de Upload​

O motor de upload lida com:

  • Uploads simples (uma requisição por arquivo)
  • Uploads em partes (dividir arquivos grandes)
  • Lógica de retry com backoff exponencial
  • Gerenciamento de uploads concorrentes
  • Rastreamento de progresso

4. Adaptador de Plataforma​

O Dropup funciona em várias plataformas:

  • Web - Usa APIs nativas do navegador
  • React Native - Usa manipulação nativa de arquivos
  • SSR - Seguro para renderização no servidor

Fluxo de Dados​

Ação do Usuário → Validação → Atualização de Estado → Upload → Callbacks
       │              │              │                  │          │
       ▼              ▼              ▼                  ▼          ▼
    Selecionar/  Aceitar/Rejeitar  files[]           XHR/Fetch  onComplete
    Soltar arquivos               Atualizado         Progresso  onError

Princípios de Design​

1. Headless Primeiro​

Sem componentes de UI integrados - você constrói exatamente o que precisa:

// Você controla toda a UI
<div {...getDropProps()}>
  <SuaDropZonePersonalizada />
  <input {...getInputProps()} />
</div>

2. Segurança de Tipos​

Suporte completo a TypeScript com tipos abrangentes:

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

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

3. Tree Shakeable​

Importe apenas o que você precisa:

// Apenas o core (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// Adicione suporte a nuvem quando necessário
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// Adicione processamento de imagem quando necessário
import { compressImage } from '@samithahansaka/dropup/image';

4. Aprimoramento Progressivo​

Comece simples, adicione recursos conforme necessário:

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

// Adicione validação
const { files } = useDropup({ maxSize: 10_000_000 });

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

// Adicione armazenamento em nuvem
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});