Ringan
Paket inti kurang dari 10KB yang di-gzip. Tree-shakeable untuk ukuran optimal.
TypeScript
Ditulis dalam TypeScript dengan definisi tipe yang komprehensif.
Tanpa Dependensi
Tanpa dependensi runtime. Hanya memerlukan React sebagai peer dependency.
Fitur
Desain Headless
Tidak ada komponen UI bawaan. Anda memiliki kontrol penuh atas tampilan dan nuansa. Bangun pengalaman pengunggahan persis seperti yang Anda inginkan.
Seret & Lepas
Pemilihan file intuitif dengan seret dan lepas dengan umpan balik visual untuk tipe file yang valid dan tidak valid saat diseret.
Progres Pengunggahan
Lacak progres real-time untuk file individual dan progres pengunggahan keseluruhan. Bangun indikator progres yang indah.
Validasi File
Validasi bawaan untuk tipe file, ukuran, dan dimensi. Tambahkan aturan validasi kustom untuk kebutuhan khusus Anda.
Penyimpanan Cloud
Unggah langsung ke S3, Google Cloud Storage, Azure Blob, dan lainnya menggunakan URL yang sudah ditandatangani. Tidak perlu proxy server.
Pengunggahan Chunked
Pecah file besar menjadi chunk untuk pengunggahan yang andal. Dukungan untuk pengunggahan yang dapat dilanjutkan dengan protokol tus.
Pemrosesan Gambar
Kompres, ubah ukuran, dan potong gambar sebelum diunggah. Perbaiki masalah orientasi EXIF secara otomatis.
React Native
Bekerja di React Native dengan adapter native. API yang sama untuk aplikasi web dan mobile.
Aman untuk SSR
Bekerja mulus dengan Next.js, Remix, dan framework SSR lainnya. Tidak ada masalah hidrasi.
Mulai Cepat
1. Instalasi
npm install @samithahansaka/dropup
2. Penggunaan
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>
);
}