File drop zone with upload progress
Drag files in or click to choose them: the zone lights up and each file uploads with its own progress bar.
Settings
Code
<div class="uv-ifd"><label class="dz"><input type="file" multiple><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V4M7.5 8.5L12 4l4.5 4.5"/><path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15"/></svg></span><b>Drag your files here</b><span class="or">or <u>browse your computer</u></span><span class="hn">PNG, JPG or PDF up to 10 MB</span></label><ul aria-live="polite"></ul></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Upload areas should welcome both mouse users who drag files and people who prefer a file picker. This dashed zone wraps a real file input, highlights and bounces its icon while files are dragged over it, and lists each added file with a progress bar and percentage that end in a check. The list keeps the latest three files.
The progress is simulated in the demo; plug your upload request into the add function to drive it with real progress events. Accepted formats and size go in the hint so expectations are clear before choosing.