Lewati ke konten utama

Cara Kerja Dropup

Dropup dibangun dengan konsep headless UI - menangani semua logika upload file yang kompleks sambil memberi Anda kontrol penuh atas presentasi visual.

Arsitektur​

┌─────────────────────────────────────────────────────────────┐
│                   Komponen React Anda                        │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Zona Drop   │  │ Daftar File │  │ Tombol Upload       │  │
│  │ (UI Anda)   │  │ (UI Anda)   │  │ (UI Anda)           │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    Hook useDropup                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │  Mesin    │ │  Manajer  │ │   Mesin   │ │ Adapter │  ││
│  │  │ Validasi  │ │   State   │ │  Upload   │ │Platform │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Komponen Utama​

1. Manajer State​

Dropup menggunakan useReducer React untuk manajemen state yang dapat diprediksi:

  • Melacak semua file dan statusnya
  • Mengelola state seret
  • Menangani progres upload
  • Menyediakan nilai yang dihitung

2. Mesin Validasi​

Sebelum file ditambahkan, mereka melalui validasi:

const { files } = useDropup({
  accept: 'image/*',           // Validasi tipe file
  maxSize: 5 * 1024 * 1024,    // Ukuran file maksimum
  minSize: 1024,               // Ukuran file minimum
  maxFiles: 10,                // Jumlah file maksimum
  maxWidth: 4096,              // Lebar gambar maksimum
  maxHeight: 4096,             // Tinggi gambar maksimum
  customRules: [               // Validasi kustom
    (file) => file.name.length < 100 || 'Nama file terlalu panjang'
  ],
});

3. Mesin Upload​

Mesin upload menangani:

  • Upload sederhana (satu request per file)
  • Upload chunked (memecah file besar)
  • Logika retry dengan exponential backoff
  • Manajemen upload konkuren
  • Pelacakan progres

4. Adapter Platform​

Dropup bekerja lintas platform:

  • Web - Menggunakan API browser native
  • React Native - Menggunakan penanganan file native
  • SSR - Aman untuk server-side rendering

Alur Data​

Aksi Pengguna → Validasi → Update State → Upload → Callback
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  Pilih/      Terima/Tolak   files[]    XHR/Fetch   onComplete
  Lepas file                 Diupdate    Progres    onError

Prinsip Desain​

1. Headless First​

Tidak ada komponen UI bawaan - Anda membangun persis apa yang Anda butuhkan:

// Anda mengontrol seluruh UI
<div {...getDropProps()}>
  <ZonaDropKustomAnda />
  <input {...getInputProps()} />
</div>

2. Keamanan Tipe​

Dukungan TypeScript penuh dengan tipe yang komprehensif:

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

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

3. Tree Shakeable​

Import hanya apa yang Anda butuhkan:

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

// Tambahkan dukungan cloud saat dibutuhkan
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// Tambahkan pemrosesan gambar saat dibutuhkan
import { compressImage } from '@samithahansaka/dropup/image';

4. Progressive Enhancement​

Mulai sederhana, tambahkan fitur sesuai kebutuhan:

// Penggunaan dasar
const { files } = useDropup();

// Tambahkan validasi
const { files } = useDropup({ maxSize: 10_000_000 });

// Tambahkan auto-upload
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// Tambahkan cloud storage
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});