File uploader

The file uploader lets users select one or more files to upload to a specific location. File uploaders are commonly found in forms, but can also be a standalone element.

Overview

Keyboard Interactions

Tab to reach the drag and drop file section; Press Enter or Space to activate.

Activate the delete (x) button beside each file name to remove an uploaded file.

The drop zone is also a button that responds to standard keyboard interaction.

Error messages about file uploads must be exposed to assistive technologies.

Associate the uploaded file name with the delete button so users understand which file will be removed.

Use proper labels and attributes. Each file input should have a <label>. Associate the two by matching the <label>’s for attribute to the <input>’s id attribute.

Use as a progressive enhancement. The file input component should be a progressive enhancement of <input type="file" />. If the component doesn’t initialize, it should still work and appear like a standard file input.