Hướng dẫn di chuyển

Cách di chuyển sang Dropup từ các thư viện tải lên phổ biến khác.

Từ react-dropzone

react-dropzone là một thư viện kéo-và-thả phổ biến. Dropup cung cấp chức năng tương tự với hỗ trợ tải lên tích hợp.

Trước (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>Thả vào đây</p> : <p>Kéo tệp vào đây</p>}
    </div>
  );
}

Sau (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' },  // Tải lên tích hợp!
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {state.isDragging ? <p>Thả vào đây</p> : <p>Kéo tệp vào đây</p>}

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

      <button onClick={() => actions.upload()}>Tải lên</button>
    </div>
  );
}

Sự khác biệt chính

react-dropzone	Dropup
`getRootProps()`	`getDropProps()`
`isDragActive`	`state.isDragging`
`accept: { 'image/*': [] }`	`accept: 'image/*'`
Không hỗ trợ tải lên	Tải lên tích hợp với tiến trình
Dọn dẹp xem trước thủ công	Dọn dẹp tự động

Từ react-uploady

react-uploady là thư viện tải lên giàu tính năng với nhiều component.

Trước (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>Thả tệp vào đây</div>
      </UploadDropZone>
      <UploadProgress />
    </Uploady>
  );
}

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

  const { processPending } = useUploady();

  return <button onClick={processPending}>Tải lên</button>;
}

Sau (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>Thả tệp vào đây</div>

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

      <button onClick={() => actions.upload()}>Tải lên</button>
    </div>
  );
}

Sự khác biệt chính

react-uploady	Dropup
Provider + Components	Hook duy nhất
`useItemProgressListener`	callback `onUploadProgress`
`processPending()`	`actions.upload()`
Nhiều gói	Tất cả trong một

Từ react-dropzone-uploader

react-dropzone-uploader kết hợp dropzone với chức năng tải lên.

Trước (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}
    />
  );
}

Sau (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('đang tải', file),
    onUploadComplete: (file) => console.log('xong', file),
    onUploadError: (file, err) => console.log('lỗi', file, err),
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {/* UI tùy chỉnh của bạn */}
    </div>
  );
}

Sự khác biệt chính

react-dropzone-uploader	Dropup
Component với UI tích hợp	Headless (tự tạo UI)
`getUploadParams`	tùy chọn `upload`
`onChangeStatus`	Callbacks cụ thể
Yêu cầu import CSS	Không có styles

Từ Uppy

Uppy là bộ công cụ tải lên đầy đủ tính năng.

Trước (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('Thành công:', file, response);
});

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

Sau (Dropup)

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

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

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        Thả tệp vào đây
      </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()}>Tải lên</button>
    </div>
  );
}

Sự khác biệt chính

Uppy	Dropup
Bao gồm UI đầy đủ	Headless
Hệ thống plugin	Tất cả trong một
Bundle lớn hơn	< 10KB
API mệnh lệnh	React hooks

Các bước di chuyển chung

1. Cài đặt Dropup

npm uninstall react-dropzone react-uploady @rpldy/uploady  # Gỡ cái cũ
npm install @samithahansaka/dropup

2. Cập nhật Imports

// Trước
import { useDropzone } from 'react-dropzone';

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

3. Cập nhật sử dụng Hook

// Trước
const { getRootProps, getInputProps, isDragActive } = useDropzone({...});

// Sau
const { getDropProps, getInputProps, state } = useDropup({...});
// Sử dụng state.isDragging thay vì isDragActive

4. Thêm cấu hình Upload

// Dropup bao gồm chức năng tải lên
useDropup({
  upload: { url: '/api/upload' },
});

5. Cập nhật Event Handlers

// Trước (react-dropzone)
onDrop: (files) => {...}

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

6. Cập nhật Template

// Trước
<div {...getRootProps()}>
  <input {...getInputProps()} />
</div>

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

So sánh tính năng

Tính năng	react-dropzone	react-uploady	Uppy	Dropup
Kéo & Thả	✓	✓	✓	✓
Tải lên	✗	✓	✓	✓
Tiến trình	✗	✓	✓	✓
Theo khối	✗	✓	✓	✓
tus	✗	✓	✓	✓
Cloud (S3)	✗	✓	✓	✓
React Native	✗	✗	✗	✓
Kích thước Bundle	~10KB	~30KB	~100KB+	<10KB
TypeScript	✓	✓	✓	✓
Headless	✓	Một phần	✗	✓

Từ react-dropzone​

Trước (react-dropzone)​

Sau (Dropup)​

Sự khác biệt chính​

Từ react-uploady​

Trước (react-uploady)​

Sau (Dropup)​

Sự khác biệt chính​

Từ react-dropzone-uploader​

Trước (react-dropzone-uploader)​

Sau (Dropup)​

Sự khác biệt chính​

Từ Uppy​

Trước (Uppy)​

Sau (Dropup)​

Sự khác biệt chính​

Các bước di chuyển chung​

1. Cài đặt Dropup​

2. Cập nhật Imports​

3. Cập nhật sử dụng Hook​

4. Thêm cấu hình Upload​

5. Cập nhật Event Handlers​

6. Cập nhật Template​

So sánh tính năng​

Từ react-dropzone

Trước (react-dropzone)

Sau (Dropup)

Sự khác biệt chính

Từ react-uploady

Trước (react-uploady)

Sau (Dropup)

Sự khác biệt chính

Từ react-dropzone-uploader

Trước (react-dropzone-uploader)

Sau (Dropup)

Sự khác biệt chính

Từ Uppy

Trước (Uppy)

Sau (Dropup)

Sự khác biệt chính

Các bước di chuyển chung

1. Cài đặt Dropup

2. Cập nhật Imports

3. Cập nhật sử dụng Hook

4. Thêm cấu hình Upload

5. Cập nhật Event Handlers

6. Cập nhật Template

So sánh tính năng