File uploader

The file uploader creates a region to drag and drop files to upload.

form--upload

Upload queue

The upload queue displays a listing of files currently being uploaded and their progress. Each item contains the file name, a progress bar with percentage, and an “x” icon to cancel it. Once a file has completed the upload process it is removed from the queue and added to the files listing.

upload-queue

Best practices

Accessibility

The progressbar role should be used along with the aria-valuenow, aria-valuemin, and aria-valuemax attributes. The aria-valuenow value should be updated dynamically to indicate progress to assistive devices.