Lightweight
Core bundle under 10KB gzipped. Tree-shakeable for optimal size.
TypeScript
Written in TypeScript with comprehensive type definitions.
Zero Dependencies
No runtime dependencies. Only requires React as a peer.
Features
Headless Design
No built-in UI components. You have complete control over the look and feel. Build exactly the upload experience you want.
Drag & Drop
Intuitive drag-and-drop file selection with visual feedback for valid and invalid file types during drag.
Upload Progress
Real-time progress tracking for individual files and overall upload progress. Build beautiful progress indicators.
File Validation
Built-in validation for file types, sizes, and dimensions. Add custom validation rules for your specific needs.
Cloud Storage
Upload directly to S3, Google Cloud Storage, Azure Blob, and more using presigned URLs. No server proxy needed.
Chunked Uploads
Split large files into chunks for reliable uploads. Support for resumable uploads with the tus protocol.
Image Processing
Compress, resize, and crop images before upload. Fix EXIF orientation issues automatically.
React Native
Works in React Native with the native adapter. Same API for web and mobile applications.
SSR Safe
Works seamlessly with Next.js, Remix, and other SSR frameworks. No hydration issues.
Quick Start
1. Install
npm install @samithahansaka/dropup
2. Use
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>
);
}