Skip to content
LSD Framework
Component

File uploader

A drop-zone primitive for catching files mid-flight. Dashed perimeter marches when you hover, lights up cyan on drag-over, then collapses into a queue with per-file progress and a tap-to-jettison control.

01 · Drag-and-drop zone

Drop files here

or click anywhere in the zone — PNG, JPG, PDF up to 20 MB

02 · With browse button (single file)

Choose a file to launch

One file at a time — replaces the previous selection

03 · Queue with progress + remove
04 · Live demo — drop or pick

Send something through

Real handlers — drop-over highlight, simulated progress, remove

View HTML
<div class="fu-zone">
  <input type="file" multiple />
  <div class="fu-zone__glyph">↥</div>
  <p class="fu-zone__title">Drop files here</p>
</div>

<ul class="fu-list">
  <li class="fu-item" style="--p: 62%">
    <span class="fu-item__icon">PNG</span>
    <div><p class="fu-item__name">file.png</p>
      <span class="fu-bar"><span class="fu-bar__fill"></span></span></div>
    <button class="fu-remove">×</button>
  </li>
</ul>