Challenge

File Upload Drop Zone

Medium

css
javascript
design-match

Match the target: a dashed-border drop zone that highlights while a file is dragged over it, then swaps for a filename row with a progress bar once a file lands.

Check your work against

A dashed-border drop zone with an icon and a click-or-drag label
The drop zone visibly highlights (border/background change) while a file is dragged over it
Choosing a file — by drop or via the hidden file input — replaces the drop zone with a filename row and a progress bar
The progress bar animates from 0% to 100% rather than jumping straight there

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.