Prototype Library

File List

A list of existing files (server records) rendered as bordered icon · name · actions rows — the read/manage counterpart to esa-file-upload. Ported from Beacon's simple-file-display.

Inherited wc import '@esa/ecology/esa-file-list';

Preview

<esa-file-list id="files"></esa-file-list>

<script>
  el.files = [
    { name: 'nesting-bird-survey-2026.pdf', href: '#' },
    { name: 'weap-signin-2026-05.pdf', href: '#' },
  ];
</script>

Download & remove

Each row can carry a download action, a remove action, or both. The editor case uses removable with downloadable=false; a read-only display uses the default (download only).

<esa-file-list downloadable removable></esa-file-list>  <!-- both -->
<esa-file-list removable downloadable="false"></esa-file-list>  <!-- remove only -->

API

PropTypeDefaultDescription
files EsaFile[] [] The files to list. Set as a property (an array, not an attribute). A row with an href renders its name as a link.
removable boolean false Show a remove button on each row; removing drops it from the local files copy and emits remove.
downloadable boolean true Show a download button on each row (emits download). On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.

Events

EventTypeDefaultDescription
download CustomEvent<{ file, index }> — Fired when a row’s download button is clicked. Composed and bubbles.
remove CustomEvent<{ file, index }> — Fired when a row’s remove button is clicked. The row is removed from the local files copy first. Composed and bubbles.

Accessibility

  • Each action button carries an explicit aria-label naming the file (e.g. “Download nesting-bird-survey.pdf”).
  • File names truncate with ellipsis; the full name is available via the row title.
  • Removing a row updates the local files array and emits remove; consumers persist the change.