<re-file-picker>

A self-managing wrapper around the file picker (enhanceFilePicker). Author the .re-file-picker__* parts inside it; the element adds the container class + behavior marker, reflects name/multiple/accept/ disabled/required onto the native input, and enhances on connect. See the custom elements overview for how the <re-*> tags work.

Import once to register the tag, then use it declaratively:

import "@relements/core/elements/re-file-picker";

Basic

Choose files or drag them here

<re-file-picker name="docs" multiple>
  <label class="re-file-picker__field">
    <input type="file" class="re-file-picker__input" aria-label="Upload documents" />
    <span class="re-file-picker__ui">
      <svg
        class="re-file-picker__icon"
        aria-hidden="true"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
        <polyline points="17 8 12 3 7 8" />
        <line x1="12" y1="3" x2="12" y2="15" />
      </svg>
      <span class="re-file-picker__prompt">Choose files or drag them here</span>
    </span>
  </label>
  <p class="re-file-picker__list" hidden></p>
  <button
    class="re-file-picker__clear"
    data-re-file-clear
    hidden
    type="button"
    aria-label="Clear selection"
  >
    Clear
  </button>
  <span class="re-file-picker__status re-sr-only" role="status" aria-live="polite"></span>
</re-file-picker>

API

element.files — the selected files as a File[] (read/write; writing dispatches change).
element.clear() — empties the selection.
Emits a bubbling re-error ({ reason, rejected, accepted }) when a drop is rejected by accept / data-re-file-max-files / data-re-file-max-size. Value changes use the native bubbling change event (it already carries event.target.files).

Accessibility

The element adds no semantics of its own — the native <input type="file"> stays the form value and the focusable control, the OS picker is the keyboard path, and the selection is announced through the sr-only role="status" region the behavior writes to. Give the input an accessible name (aria-label or a .re-field label). See the file picker accessibility notes and the accessibility guide.