Components / Library Version 5.2.1

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 contains the file’s name, and may also include the date uploaded, file size and actions a user may take.

PropertiesExamplesAPIAccessibility
show-info
last-updated | size | uploaded-by | all | none
The additional information which should be displayed for each file. Defaults to last-updated.

Properties of the children wm-file.

id *
string
A unique identifier for the file.
name *
string
The file name, without the extension.
type *
string
The file extension. NOT the MIME type! e.g. pdf, not application/pdf.
error-message
string
Sets the file in an error state with the provided message.
file-actions
string
Space-separated list of available file actions. Accepts preview download delete. Defaults to download delete.
last-updated
string
The date and time the file was uploaded, in the user's format, e.g. 1/28/2020 5:29 PM
progress
string
A percentage value (0-100).
size
string
The size of the file. The unit should be capitalized and separated by a space, e.g. 3 MB.
uploaded-by
string
The file uploader, e.g. Uploaded by Alonso, Fernando.

Usage in HTML

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

Usage in Elm

Code generated from HTML.
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".

Back to Top