Panduan Migrasi

Cara migrasi ke Dropup dari library upload populer lainnya.

Dari react-dropzone

react-dropzone adalah library drag-and-drop yang populer. Dropup menyediakan fungsionalitas serupa dengan dukungan upload bawaan.

Sebelum (react-dropzone)

import { useDropzone } from 'react-dropzone';

function OldUploader() {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: { 'image/*': [] },
    maxSize: 10485760,
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map(file => ({
        ...file,
        preview: URL.createObjectURL(file),
      })));
    },
  });

  const handleUpload = async () => {
    for (const file of files) {
      const formData = new FormData();
      formData.append('file', file);
      await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
    }
  };

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? <p>Lepas di sini</p> : <p>Seret file ke sini</p>}
    </div>
  );
}

Sesudah (Dropup)

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

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },  // Upload bawaan!
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {state.isDragging ? <p>Lepas di sini</p> : <p>Seret file ke sini</p>}

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>Upload</button>
    </div>
  );
}

Perbedaan Utama

react-dropzone	Dropup
getRootProps()	getDropProps()
isDragActive	state.isDragging
accept: { 'image/*': [] }	accept: 'image/*'
Tidak ada dukungan upload	Upload bawaan dengan progres
Pembersihan preview manual	Pembersihan otomatis

Dari react-uploady

react-uploady adalah library upload dengan fitur lengkap dengan banyak komponen.

Sebelum (react-uploady)

import Uploady, { useItemProgressListener, useUploady } from '@rpldy/uploady';
import UploadDropZone from '@rpldy/upload-drop-zone';

function OldApp() {
  return (
    <Uploady destination={{ url: '/api/upload' }}>
      <UploadDropZone onDragOverClassName="drag-over">
        <div>Lepas file di sini</div>
      </UploadDropZone>
      <UploadProgress />
    </Uploady>
  );
}

function UploadProgress() {
  useItemProgressListener((item) => {
    console.log(`${item.file.name}: ${item.completed}%`);
  });

  const { processPending } = useUploady();

  return <button onClick={processPending}>Upload</button>;
}

Sesudah (Dropup)

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

function NewApp() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadProgress: (file, progress) => {
      console.log(`${file.name}: ${progress}%`);
    },
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <div>Lepas file di sini</div>

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

      <button onClick={() => actions.upload()}>Upload</button>
    </div>
  );
}

Perbedaan Utama

react-uploady	Dropup
Provider + Komponen	Hook tunggal
useItemProgressListener	Callback onUploadProgress
processPending()	actions.upload()
Banyak paket	Semua dalam satu

Dari react-dropzone-uploader

react-dropzone-uploader menggabungkan dropzone dengan fungsionalitas upload.

Sebelum (react-dropzone-uploader)

import Dropzone from 'react-dropzone-uploader';
import 'react-dropzone-uploader/dist/styles.css';

function OldUploader() {
  const getUploadParams = () => ({ url: '/api/upload' });

  const handleChangeStatus = ({ meta, file }, status) => {
    console.log(status, meta, file);
  };

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      accept="image/*"
      maxSizeBytes={10485760}
    />
  );
}

Sesudah (Dropup)

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

function NewUploader() {
  const { files, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },
    autoUpload: true,

    onUploadStart: (file) => console.log('uploading', file),
    onUploadComplete: (file) => console.log('done', file),
    onUploadError: (file, err) => console.log('error', file, err),
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {/* UI kustom Anda */}
    </div>
  );
}

Perbedaan Utama

react-dropzone-uploader	Dropup
Komponen dengan UI bawaan	Headless (buat UI sendiri)
getUploadParams	Opsi upload
onChangeStatus	Callback spesifik
Perlu import CSS	Tanpa style

Dari Uppy

Uppy adalah toolkit upload dengan fitur lengkap.

Sebelum (Uppy)

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

const uppy = new Uppy()
  .use(Dashboard, { inline: true, target: '#uppy' })
  .use(XHRUpload, { endpoint: '/api/upload' });

uppy.on('upload-success', (file, response) => {
  console.log('Sukses:', file, response);
});

function OldUploader() {
  return <div id="uppy" />;
}

Sesudah (Dropup)

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

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadComplete: (file, response) => {
      console.log('Sukses:', file, response);
    },
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        Lepas file di sini
      </div>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.name}</span>
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>Upload</button>
    </div>
  );
}

Perbedaan Utama

Uppy	Dropup
UI penuh disertakan	Headless
Sistem plugin	Semua dalam satu
Bundle lebih besar	< 10KB
API imperatif	React hooks

Langkah Migrasi Umum

1. Install Dropup

npm uninstall react-dropzone react-uploady @rpldy/uploady  # Hapus yang lama
npm install @samithahansaka/dropup

2. Update Import

// Sebelum
import { useDropzone } from 'react-dropzone';

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

3. Update Penggunaan Hook

// Sebelum
const { getRootProps, getInputProps, isDragActive } = useDropzone({...});

// Sesudah
const { getDropProps, getInputProps, state } = useDropup({...});
// Gunakan state.isDragging sebagai ganti isDragActive

4. Tambahkan Konfigurasi Upload

// Dropup menyertakan fungsionalitas upload
useDropup({
  upload: { url: '/api/upload' },
});

5. Update Event Handler

// Sebelum (react-dropzone)
onDrop: (files) => {...}

// Sesudah (Dropup)
onFilesAdded: (files) => {...}
onUploadComplete: (file) => {...}

6. Update Template

// Sebelum
<div {...getRootProps()}>
  <input {...getInputProps()} />
</div>

// Sesudah
<div {...getDropProps()}>
  <input {...getInputProps()} />
</div>

Perbandingan Fitur

Fitur	react-dropzone	react-uploady	Uppy	Dropup
Seret & Lepas	✓	✓	✓	✓
Upload	✗	✓	✓	✓
Progres	✗	✓	✓	✓
Chunked	✗	✓	✓	✓
tus	✗	✓	✓	✓
Cloud (S3)	✗	✓	✓	✓
React Native	✗	✗	✗	✓
Ukuran Bundle	~10KB	~30KB	~100KB+	<10KB
TypeScript	✓	✓	✓	✓
Headless	✓	Sebagian	✗	✓