Skip to main content

File Selector

Overview​

Definition​

The file selector enables users to upload one or more files from their device.

Live Demo​

Drag and drop files here to upload

FileSelector

Anatomy​

Screenshot image of the component for the file selector

Screenshot image of the component for the file selector with element for attached file.

  • Dropzone Rectangular box which files can be dragged into and dropped** - **Icon A fixed upload icon** - **Hint text Default text explaining how the control can be used** - **Browse button Launches the file browser on the device, to allow files to be selected

Guidelines​

When to use​

  • Use when the user should be able to add one or more than one file from their device.

When not to use​

  • If only one file can be uploaded, use the file input control instead.

Content​

Hint text​

  • Use the default hint text unless you have a very distinct need to use something else.

Interactions​

  • On dropping files in the dropzone - or confirming files to upload from the device file browser - a progress indicator should be shown.
  • If one or more of the files fails to upload, an error panel should be shown near to the file selector.

Accessibility​

  • The "Browse" button must be available, in a sensible position in the tab order, and accept keyboard focus.