Siêu nhẹ
Gói core dưới 10KB khi nén. Có thể tree-shake để tối ưu kích thước.
TypeScript
Được viết bằng TypeScript với định nghĩa kiểu đầy đủ.
Không phụ thuộc
Không có phụ thuộc runtime. Chỉ yêu cầu React là peer dependency.
Tính năng
Thiết kế Headless
Không có thành phần UI được xây dựng sẵn. Bạn có toàn quyền kiểm soát giao diện. Xây dựng trải nghiệm tải lên chính xác như bạn muốn.
Kéo & Thả
Chọn tệp trực quan bằng cách kéo và thả với phản hồi trực quan cho các loại tệp hợp lệ và không hợp lệ trong khi kéo.
Tiến trình tải lên
Theo dõi tiến trình theo thời gian thực cho từng tệp và tổng tiến trình tải lên. Xây dựng các thanh tiến trình đẹp mắt.
Xác thực tệp
Xác thực tích hợp cho loại tệp, kích thước và kích thước. Thêm quy tắc xác thực tùy chỉnh cho nhu cầu cụ thể của bạn.
Lưu trữ đám mây
Tải lên trực tiếp lên S3, Google Cloud Storage, Azure Blob và nhiều hơn nữa bằng URL đã ký trước. Không cần proxy server.
Tải lên theo khối
Chia tệp lớn thành các khối để tải lên đáng tin cậy. Hỗ trợ tải lên có thể tiếp tục với giao thức tus.
Xử lý hình ảnh
Nén, thay đổi kích thước và cắt ảnh trước khi tải lên. Tự động sửa vấn đề định hướng EXIF.
React Native
Hoạt động trong React Native với adapter native. Cùng API cho ứng dụng web và di động.
An toàn SSR
Hoạt động liền mạch với Next.js, Remix và các framework SSR khác. Không có vấn đề hydration.
Bắt đầu nhanh
1. Cài đặt
npm install @samithahansaka/dropup
2. Sử dụng
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}