Lewati ke konten utama

Memulai dengan Dropup

Dropup adalah library upload file React yang ringan dan headless yang memberikan Anda kontrol penuh atas UI sambil menangani semua logika upload yang kompleks.

Mengapa Dropup?​

  • 🪶 Ringan - Inti hanya ~10KB gzipped
  • 🎨 Headless - Kontrol penuh atas UI Anda dengan API berbasis hooks
  • 📁 Drag & Drop - Dukungan seret-dan-lepas bawaan
  • 📊 Pelacakan Progres - Progres upload real-time untuk setiap file
  • 🔄 Upload Chunked - Memecah file besar untuk upload yang andal
  • ☁️ Siap Cloud - Helper bawaan untuk S3, GCS, dan Azure
  • 🖼️ Pemrosesan Gambar - Kompresi dan pembuatan preview bawaan
  • 📱 Lintas Platform - Bekerja dengan React DOM dan React Native
  • 🔒 TypeScript - Dukungan TypeScript penuh

Instalasi​

Instal Dropup menggunakan package manager pilihan Anda:

npm install @samithahansaka/dropup

Peer Dependencies​

Dropup memerlukan React 16.8 atau lebih tinggi (untuk dukungan hooks):

npm install react

Mulai Cepat​

Berikut contoh sederhana untuk memulai:

import { useDropup } from '@samithahansaka/dropup';

function FileUploader() {
  const {
    files,
    state,
    actions,
    getDropProps,
    getInputProps
  } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
  });

  return (
    <div>
      {/* Zona drop */}
      <div
        {...getDropProps()}
        style={{
          border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
          padding: 40,
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <input {...getInputProps()} />
        <p>Seret & lepas file di sini, atau klik untuk memilih</p>
      </div>

      {/* Daftar file */}
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            {file.name} - {file.status}
            {file.status === 'uploading' && ` (${file.progress}%)`}
            <button onClick={() => actions.remove(file.id)}>Hapus</button>
          </li>
        ))}
      </ul>

      {/* Tombol upload */}
      {files.length > 0 && (
        <button onClick={() => actions.upload()}>
          Upload Semua
        </button>
      )}
    </div>
  );
}

Konsep Inti​

1. Hook useDropup​

Hook useDropup adalah titik masuk utama. Hook ini mengembalikan semua yang Anda butuhkan untuk membangun UI upload file:

const {
  files,           // Array file dengan status, progres, dll.
  state,           // State keseluruhan (isDragging, isUploading, progress)
  actions,         // Method untuk upload, hapus, batal, reset
  getDropProps,    // Props untuk elemen zona drop Anda
  getInputProps,   // Props untuk input file tersembunyi
} = useDropup(options);

2. Objek File​

Setiap file dalam array files berisi:

{
  id: string;          // Identifier unik
  file: File;          // Objek File asli
  name: string;        // Nama file
  size: number;        // Ukuran file dalam bytes
  type: string;        // Tipe MIME
  preview?: string;    // URL preview (untuk gambar)
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // Progres upload (0-100)
  error?: Error;       // Objek error jika upload gagal
  uploadedUrl?: string; // URL setelah upload berhasil
}

3. Actions​

Objek actions menyediakan method untuk mengontrol upload:

actions.upload(fileIds?)    // Mulai upload (semua atau file tertentu)
actions.cancel(fileId?)     // Batalkan upload
actions.remove(fileId)      // Hapus file dari daftar
actions.reset()             // Bersihkan semua file
actions.retry(fileIds?)     // Coba ulang upload yang gagal

Mengonfigurasi Upload​

Untuk mengaktifkan upload yang sebenarnya, berikan konfigurasi upload:

const { files } = useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },
  autoUpload: true, // Upload otomatis saat file ditambahkan
});

Langkah Selanjutnya​