# File Upload Dropzone > A drag-and-drop upload area with a real file input behind its button: dropped files land as rows on a stagger, the progress bar catches each one and counts up, and a finished upload collapses the bar into a check mark that draws itself. Canonical: https://gsapvault.com/ui-elements/file-upload-dropzone Live demo: https://gsapvault.com/demos/file-upload-dropzone/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Flip | | Techniques | progress-bar, count-up, stagger, flip-layout, svg-line-draw, micro-interaction | | Uses Lenis | No | ## Overview An upload dropzone that shows every stage of the job. The zone's dashed hairline turns to the accent and its icon lifts the moment a file is dragged over it, and on release the files land as rows on a stagger while each progress bar sweeps out from the left to catch its row. The percentage counts up on tabular numerals, and when a file finishes the bar collapses into a check mark that draws itself into the space the bar leaves, so completion is one movement rather than a swap of icons. Every other state is built too. A file whose type or size the markup does not accept is rejected before it is ever sent and takes a red row naming the reason; an upload that fails offers Retry, which restarts that file alone. Removing a row lifts it out of the flow, collapses its height, and reflows the survivors with GSAP Flip so nothing jumps. The demo's progress is simulated by a GSAP tween, and swapping in real upload progress is a single call: setUploader receives the file and a progress callback and returns a promise, so XMLHttpRequest upload progress events or a fetch stream drop straight in. Accepted types and the size ceiling are data attributes on the component root. Real buttons throughout, a progressbar role with aria-valuenow kept in step, and a polite live region announcing what landed, finished, failed or was removed. One HTML file, one stylesheet, one script, vanilla JavaScript, GSAP and the Flip plugin, no framework. Light and dark themes come from one set of custom properties switched with a single data-variant attribute. ## Features - Real drag-and-drop plus a real multiple file input behind a Choose files button, so it is one tab stop, not two - The zone's dashed hairline becomes the accent and the icon lifts on dragenter, settling back with an elastic ease - Rows land on a stagger while each progress bar scales out from the left to catch its row - Percentage counts up on tabular numerals and drives aria-valuenow on a progressbar role - Done collapses the bar and draws a check mark in with strokeDashoffset - Client-side validation from data-accept and data-max-size, with the reason written into the row - Failed uploads keep a Retry button that restarts that file alone; rejections do not offer one - Removing a row collapses it out of flow while GSAP Flip reflows the rest - Image files preview from URL.createObjectURL, revoked when the row goes - setUploader(fn) swaps the simulated progress for XHR or fetch upload events - Polite aria-live announcements for added, uploaded, failed and removed files - Light and dark themes on one set of custom properties ## Use Cases - Document and asset uploads inside an admin or dashboard product - Support and claims forms where the buyer must see each attachment succeed or fail - Media libraries and CMS screens that accept several images at once - Onboarding and verification flows that reject the wrong file type before sending it - Any upload field where the current answer is a spinner and a page reload ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### The drop landing Entering and leaving the zone are counted rather than toggled, so crossing a child element inside the zone cannot flicker the highlight off. The landing itself is two movements sharing one stagger: the rows come up from sixteen pixels, and a moment later each progress track runs in from the left so the bar appears to catch its own row. A near miss outside the zone is swallowed too, which is what stops the browser navigating to the dropped file. ### Progress, and replacing it Progress is a single value from 0 to 100 that drives the bar, the percentage text and the announced value together, so the visual and the spoken number can never disagree. The demo's uploader simply animates that value. A buyer replaces it with one documented hook that receives the file and a progress callback and returns a promise: resolving marks the row done, rejecting moves it to the error state with the message shown in the row. ### Done, error and retry Completion collapses the track while the check mark scales up in the cell the percentage vacated and draws itself in, so the bar reads as becoming the check. Rejections are decided before any upload starts, from the accepted types and size limit on the component root, and carry no Retry because the file will never pass; a failed upload keeps Retry, which restarts that one file. ### Removing a row The departing row is pinned in place and taken out of the flow instantly, so its own collapse cannot drag its neighbours down; the survivors then slide into the gap while the list's height eases from its old value to its new one so the card does not jump. Under reduced motion the row is simply removed. ## Documentation How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### What's Included - `index.html`: the demo page and the markup to copy - `assets/style.css`: component styles, plain CSS custom properties for colours - `assets/script.js`: readable, commented source with an `onReady` guard - **Real drag-and-drop and a real file input.** The input stays in the DOM and does the work; the Choose files button fronts it, so the component is one tab stop rather than two. - **The zone reacts before the drop.** `dragenter` and `dragleave` are counted, not toggled, so crossing a child inside the zone cannot flicker the highlight off. The dashed hairline becomes the accent and the icon lifts, settling back on an elastic ease. - **Progress you can replace in one call.** `window.fileDropzone.setUploader(fn)` swaps the demo's simulated tween for your own XHR or fetch upload progress. - **Every state built, not just the happy one.** Uploading, done, rejected (non-retryable), failed (retryable) and removed, each with its own row treatment. - **Removal reflows with Flip.** The departing row leaves the flow and collapses; the survivors travel into the gap and the card's height is tweened rather than jumping. - **Roles:** `role="list"` on the list, `role="progressbar"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` on each track, `role="status"` with `aria-live="polite"` on the announcement line, and real `