Components / Library version 3.28.0

File List

The File List component represents a list of files. It is visually similar to the Uploader component, but only allows the user to access files, not to upload them. Each file block contains the file’s name, and may also include the date uploaded, file size and actions a user may take.

Properties Examples Events Accessibility

* Required property

files
JSON string
The files to display (uploaded or retrieved from the server). Should be a JSON string representation of an array of objects representing a file. For more information about the properties of that object, see section below.
show-info
time | size | none
The additional information which should be displayed for each file. Defaults to time.

Properties of the objects passed to files

id *
string
A unique identifier for the file.
name *
string
The file name (as displayed).
lastUpdated
string
The internationalized upload date and time in display format, e.g. "11/14/2010 1:21 PM".
size
string
The size of the file in display format. Unit is uppercase and preceded by a space, e.g. "30 KB".
fileActions
preview | download
Space-separated list of available file actions. Accepts preview download. No button is rendered if left empty.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm
wmFilePreview
Emitted when the user clicks the preview button. The event's detail property contains the file ID.
wmFileDownload
Emitted when the user clicks the download button. The event's detail property contains the file ID.

The component renders a list. The semantics provide additional affordances to screen reader, such as the number of items in the list.

The icononly buttons have a tooltip for visual users, e.g. "Download" and a context-specific message for screen reader users, e.g. "Download filename.xls".

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.