Lewati ke konten utama

Pertanyaan yang Sering Diajukan

Pertanyaan dan jawaban umum tentang Dropup.

Umum​

Apa itu Dropup?​

Dropup adalah library React yang ringan dan headless untuk upload file. Library ini menyediakan fungsionalitas seret-dan-lepas, validasi file, pelacakan progres upload, dan dukungan untuk cloud storage - semua dalam paket di bawah 10KB gzipped.

Mengapa "headless"?​

Headless berarti Dropup tidak menyertakan komponen UI apa pun. Library ini menyediakan logika dan manajemen state, sementara Anda membangun UI sesuai keinginan. Ini memberi Anda kontrol penuh atas tampilan dan nuansa.

Berapa ukuran bundle-nya?​

  • Core (@samithahansaka/dropup): < 10KB gzipped
  • Dengan dukungan cloud: +2KB per provider
  • Dengan pemrosesan gambar: +5KB
  • Dengan protokol tus: +3KB (memerlukan peer tus-js-client)

Apakah mendukung TypeScript?​

Ya! Dropup ditulis dalam TypeScript dan menyertakan definisi tipe yang komprehensif. Tidak perlu paket @types.

Versi React apa yang diperlukan?​

React 16.8+ (memerlukan dukungan hooks).

Penggunaan​

Bagaimana cara mengupload file?​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// Upload semua file
actions.upload();

// Upload file tertentu
actions.upload(['file-id-1', 'file-id-2']);

Bagaimana cara menangani error validasi?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

Bisakah saya menggunakan logika upload kustom?​

Ya! Berikan fungsi alih-alih objek konfigurasi:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // Logika upload kustom Anda
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

Bagaimana cara menambahkan file secara programatik?​

const { actions } = useDropup();

// Dari clipboard
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

Bisakah saya memiliki beberapa zona drop?​

Ya! Setiap pemanggilan useDropup membuat instance independen:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// Gunakan secara terpisah
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

Upload​

Bagaimana cara menampilkan progres upload?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

Bagaimana cara membatalkan upload?​

const { actions } = useDropup();

// Batalkan file tertentu
actions.cancel('file-id');

// Batalkan semua upload
actions.cancel();

Bagaimana cara mencoba ulang upload yang gagal?​

const { actions } = useDropup();

// Coba ulang file tertentu
actions.retry(['file-id']);

// Coba ulang semua yang gagal
actions.retry();

Apakah mendukung upload chunked?​

Ya! Gunakan createChunkedUploader:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

Bisakah saya upload langsung ke S3?​

Ya! Gunakan cloud uploader:

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3/presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name }),
      });
      return res.json();
    },
  }),
});

Validasi​

Bagaimana cara membatasi tipe file?​

// Berdasarkan tipe MIME
useDropup({ accept: 'image/*' });

// Berdasarkan ekstensi
useDropup({ accept: '.pdf, .doc' });

// Multiple
useDropup({ accept: ['image/*', 'application/pdf'] });

Bagaimana cara mengatur batas ukuran?​

useDropup({
  maxSize: 10 * 1024 * 1024, // 10MB maks
  minSize: 1024,             // 1KB min
});

Bagaimana cara membatasi jumlah file?​

useDropup({
  maxFiles: 5,
});

Bisakah saya menambahkan validasi kustom?​

Ya! Gunakan customRules:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'File draft tidak diperbolehkan';
      }
      return true;
    },
  ],
});

Preview​

Bagaimana cara menampilkan preview gambar?​

Preview diaktifkan secara default:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

Apakah saya perlu membersihkan URL preview?​

Tidak! Dropup secara otomatis mencabut Object URL saat file dihapus atau komponen unmount.

Bisakah saya menonaktifkan preview?​

useDropup({ generatePreviews: false });

Pemecahan Masalah​

File tidak terupload​

  1. Periksa bahwa upload sudah dikonfigurasi:

    useDropup({ upload: { url: '/api/upload' } });

  2. Pastikan Anda memanggil actions.upload() (kecuali autoUpload: true)

  3. Periksa console browser untuk error jaringan

URL preview tidak berfungsi​

  1. Pastikan file adalah gambar
  2. Periksa bahwa generatePreviews bukan false
  3. Verifikasi objek file memiliki properti preview yang valid

Drag and drop tidak berfungsi​

  1. Pastikan Anda menyebarkan getDropProps() pada elemen container
  2. Sertakan input tersembunyi: <input {...getInputProps()} />
  3. Periksa bahwa disabled bukan true

Error TypeScript​

  1. Perbarui ke versi Dropup terbaru
  2. Pastikan tsconfig.json memiliki moduleResolution yang tepat
  3. Periksa bahwa @samithahansaka/dropup ada di dependencies, bukan devDependencies

Kebocoran memori​

  1. Pastikan komponen yang menggunakan useDropup unmount dengan benar
  2. Panggil actions.reset() sebelum unmounting jika diperlukan
  3. Jangan simpan file di state eksternal tanpa pembersihan

Kompatibilitas​

Apakah berfungsi dengan Next.js?​

Ya! Gunakan direktif 'use client':

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

Apakah berfungsi dengan React Native?​

Ya! Gunakan native adapter:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

Apakah mendukung SSR?​

Ya! Dropup aman untuk SSR. Hanya menggunakan API browser saat tersedia.

Dukungan browser?​

Semua browser modern:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

Kontribusi​

Bagaimana cara berkontribusi?​

  1. Fork repository
  2. Buat branch fitur
  3. Kirim pull request

Lihat CONTRIBUTING.md untuk detail.

Bagaimana cara melaporkan bug?​

Buka issue di github.com/samithahansaka/dropup/issues.

Apakah ada roadmap?​

Periksa GitHub issues dan diskusi untuk fitur yang direncanakan.