---
title: "Drop Zone"
url: "https://sanyam.sh/lab/drop-zone"
date: "2026-10-16"
---

# Drop Zone

Drop files on the card, or try the samples.

an upload card that tells every state with its picture: the flap falls open for a drag, refused files shake it, accepted ones fall in and rise out as they upload, and a check draws when they are gone.

key insight: the card's own edge is the progress bar. it marches when a file enters the window, closes into a solid line over the card, traces round it as the upload goes, and turns green or red when it ends.

nothing on it changes size. a drag is judged by its types before it lands, and whether the pointer is over the card is a test against its box on every `dragover`, never `dragenter`, which flickers.

- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/drop-zone/folder.tsx