File upload

The file-upload component (.file-upload) wraps a real native <input type="file"> in a styled dropzone, giving you click-to-browse and drag-and-drop while keeping the native input as the single source of truth — it still participates in form submission, validation, and FormData exactly as an unstyled input would. The visible dashed dropzone is a <label>, so clicking anywhere on it opens the OS file picker with no JavaScript required. flickui.js progressively enhances it: mirroring the input's FileList into a .file-upload-list (one card per file, with a remove button), highlighting the dropzone while a drag is over it, and keeping the input in sync when files are dropped or removed.

<div class="file-upload">
  <label class="file-upload-dropzone">
    <input type="file" class="file-upload-input" multiple>
    <span class="file-upload-icon" aria-hidden="true">↥</span>
    <span class="file-upload-prompt">
      <strong class="file-upload-title">Drop files here or browse</strong>
      <span class="file-upload-hint">PNG, JPG up to 10 MB</span>
    </span>
  </label>
  <ul class="file-upload-list" aria-live="polite"></ul>
</div>