Uploader
The wm-uploader
component is to be used in situations where users are uploading files that they will be able to access later; it is not for entering data into our system,
for example by uploading a CSV. At this point, the component does not have filtering capabilities; if the pattern you are implementing includes a filter section, you won't be able to use the component.
The uploader comprises the input and the file list. It takes a list of files to display as input (files
property).
When the user selects files, the component checks whether they are valid then displays eventual error(s) and exposes the valid files to upload via the wmUploaderFilesSelected
event.
Once the files are uploaded, when the user clicks on an element's preview, delete, or download button, an event is emitted with the file id so that you can create a callback function to handle these cases (see Events tab).
While wm-uploader
previously made use of multiple types, they have since been deprecated (in addition to wm-network-uploader
) in lieu of a single design.
wm-uploader
and ensure proper screen reader accessibility, wmUploadProgress
events must be dispatched from the component. See the Events and Notes tab for more information.
* Required property
string
string
string
number
number
name | date
JSON string
JSON string
"time" | "size" | "none"
time
.Properties of the objects passed to files
string
string
string
ISO string
string
number
string
preview download delete
. Defaults to download delete
Deprecated wm-uploader
properties
"1" | "2"
"1" | "2"
uploader-type
. Previously, the style of the uploader.
string
string
Deprecated wm-network-uploader
properties
string
string
string
string
string
JSON string
Please note that the example above is not fully functional.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Javascript Sample
Example code for functionality.
Usage in Elm
wmFilesSelected
.wmDownloadFile
.wmDeleteFile
.id
(corresponding to the file's id) and progress
(0-100). Not applicable for wm-network-uploader.The number of files uploading is shown as a notification and announced via an aria-live region.
When a file is deleted, you should announce it with the snackbar component.
wm-uploader
To show upload progress and ensure screen reader accessibility, the wmUploadProgress
event must be dispatched from the component during and at the end of an upload. This will show the currently uploading file in the list with a progress bar, announce progress via live-region, update the "x files uploading" text, and announce when the file is finished uploading.
wmUploadProgress
's detail must contain the keys id
and progress
.