Upload Dropzone Card
Dashed dropzone with accepted types and a transfer list showing uploading, done, and failed states with errors.
Dashed dropzone with accepted types and a transfer list showing uploading, done, and failed states with errors.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Upload Dropzone Card is the full upload surface in one panel: a dashed drop target with the copy Drop files here or browse and the accepted types list (PDF, PNG, JPG, XLSX, ZIP, max 50 MB), then a Transfers list below it. The four rows cover every transfer state: two uploading with Progress bars at 62% and 21%, one done with a check icon (Hero-Banner-Final.png, 4.6 MB), and one failed with the honest error, File exceeds the 50 MB upload limit, plus Retry and dismiss buttons.
Transfers are one const array with a status union field. The failed row names the actual limit so the user knows before they retry; that one line deflects a support ticket.
Reach for this block on any upload flow, wired to your multipart upload API and a polling endpoint that feeds real progress values. Replace the static progress numbers with live state from your upload manager.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the media upload flow. Other dropzone shapes:
Tip: surface the exact limit in the error row, not a generic upload failed, and the Retry button earns its place.