Design Atlas
한국어
▣ UI components

Dropzone

드롭존

An area you can drag files onto, whose border reacts when a file passes over it to signal it can be dropped.

Also known as: File dropzoneUpload areaDrag-and-drop uploader
···
html
<div class="dz" id="dz">
  <div class="dzicon" id="dzi">⬆</div>
  <div class="dztext" id="dzt">파일을 끌어다 놓으세요</div>
  <div class="dzfile" id="dzf"><span>📄 report.pdf</span><i>✓</i></div>
</div>
css
.dz{width:min(230px,90%);height:78%;max-height:150px;border:2px dashed var(--line);border-radius:14px;
  display:grid;place-items:center;gap:6px;transition:border-color .2s,background .2s,transform .2s;position:relative}
.dz[data-over]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);transform:scale(1.02)}
.dzicon{font-size:20px;color:var(--muted);transition:color .2s}
.dz[data-over] .dzicon{color:var(--accent)}
.dztext{font-size:12px;color:var(--muted)}
.dzfile{position:absolute;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:7px 12px;font-size:12px;color:var(--fg);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .25s,transform .25s}
.dzfile[data-show]{opacity:1;transform:translateY(0) scale(1)}
.dzfile i{color:#18c29c;font-weight:700}
js
const dz = document.getElementById('dz'), dzf = document.getElementById('dzf'), dzt = document.getElementById('dzt'), dzi = document.getElementById('dzi');
function loop() {
  dz.setAttribute('data-over', '');
  setTimeout(() => {
    dz.removeAttribute('data-over');
    dzt.style.opacity = '0'; dzi.style.opacity = '0';
    dzf.setAttribute('data-show', '');
    setTimeout(() => {
      dzf.removeAttribute('data-show');
      dzt.style.opacity = ''; dzi.style.opacity = '';
      setTimeout(loop, 900);
    }, 1400);
  }, 900);
}
loop();

The reactive border is purely decorative — a hidden <input type="file"> must handle the actual file selection. Wrapping the whole dropzone in a <label> means clicking it opens the file picker too, and tabbing in with the keyboard and pressing Enter works the same way — drag-and-drop is a mouse-only gesture, so an alternative path is mandatory.

If the interaction category's "drag-and-drop" covers the gesture itself, a dropzone is the "target area" UI that gesture lands on. Watch for the common mistake of forgetting preventDefault on dragenter/dragover, which makes the browser open the dropped file in a new tab instead.

If there's a file type or size limit, validate right after the drop rather than during it, and tell the user clearly why a file was rejected.