File Drop

A styled file input drop zone using label.file-drop.

Works with

Field: Wrapper for a label

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/file-drop.css" />

Default

Drag files here or choose from folder

<label class="file-drop">
  <input type="file" />
  <svg><!-- upload icon --></svg>
  Drag files here or choose from folder
</label>

With hint

Drag image here or choose from folder PNG, JPG or WebP up to 10 MB

<label class="file-drop">
  <input type="file" accept="image/*" />
  <svg><!-- upload icon --></svg>
  Drag image here or choose from folder
  <small>PNG, JPG or WebP up to 10 MB</small>
</label>

With filename

Drag files here or choose from folder

<label class="file-drop">
  <input
    type="file"
    onchange="
      this.nextElementSibling.nextElementSibling.textContent =
        this.files[0]?.name ?? 'Drag files here or choose from folder'
    "
  />
  <svg><!-- upload icon --></svg>
  <span>Drag files here or choose from folder</span>
</label>

With field

Attachment Drag files here or choose from folder Max 10 MB.

<div class="field">
  <span>Attachment</span>
  <label class="file-drop">
    <input type="file" />
    <svg><!-- upload icon --></svg>
    Drag files here or choose from folder
  </label>
  <small>Max 10 MB.</small>
</div>