Live Demo — react-dropkit

Demo 1

Styled Component

Drop files or click to browse. Supports drag-and-drop, image previews, and simulated upload progress.

Drag & drop files here

image/*, .pdf, .docx Max 10MB Up to 6 files

Demo 2

Headless Hook

Full control over the UI. The hook handles all logic — you bring the design.

useFileUpload()

🎨

Custom drop zone — click or drag anything

Any file type · Max 20MB

Demo 3

Single File — Avatar Uploader

Set multiple=false. Adding a new image replaces the previous one.

👤

Click the circle to upload an image

Demo 4

Validation — PDFs Only, Max 2MB

Try dragging an image or a large file. Validation rejects it before anything is added.

PDFs only

.pdf onlyMax 2MBUp to 3 files

Demo 5

Manual Upload + Custom Buttons

Set autoUpload=false and showUploadButton. Files sit idle until you click Upload.

autoUpload=false

Add files — they won't upload until you click the button

image/*, .pdf Max 10MB Up to 5 files

Experiencereact-dropkit live.