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.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
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.