Skip to main content

FileSelector

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

Structure​

  • 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

FileSelector

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.