Drop Zone

Drag and drop files here is like droppin' postcards into a mailbox easy and effective for quick uploads.

Basic

DropZone provides support for mouse, keyboard, and touch interactions. Simply connect the onDrop prop to handle all the drop actions. Additionally, you’ll receive real-time updates through onDropEnter, onDropMove, and onDropExit events as users interact with the drop zone.

Preview

Code

Toss your stuff here

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add drop-zone

Using FileTrigger

The FileTrigger component can be used to select files from the file system, making it an excellent tool for managing files that have been dragged and dropped into the browser.

Preview

Code

Or drag and drop PNG, JPG, GIF up to 10MB

Date Range Picker Form