Collab space: File upload

This is an open space for collaborating on a file upload pattern. To join in the conversation please add a comment below.


File uploads helps users to select and upload files.

When to use dialogues

Use file upload when a user is required to upload one or more files from their device to a specific location. Only ask users to upload files when it’s critical to the delivery of your service.


  • Use help text to highlight any input restrictions to the users upfront, for example format or size.
  • Clearly communicate if a user can upload multiple files
  • Allow multiple file formats as not everyone has access to the same software
  • Be considerate of asking for large files, as some users may have limited band width or data
  • Let users know exactly what errors happened during an upload process so they can fix them.

Types of dialogues

  • Select files - Users click an action button that opens a file explorer to select files to upload.
  • Drag and drop - Users drag and drop selected files directly into a drop zone area to upload.

Interaction Design & Usability Research

File uploads should:

  • Clearly communicate the status of the file being uploaded
  • Ensure robust validation messages are provided in the event of errors

UI Design

It’s great to see progress on this. There’s even a drag and drop variant!

1 Like