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.

Overview

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.

Do

  • 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

This looks great! Has there been much more progress on this? It will be interesting to see if there will be any styling to the text after a file has been selected, or if it will use the browser styles.

Thanks @JeffersonBledsoe! We’re excited to announce it should be released in the next 2-4 weeks. Sadly due to technical restrictions we are unable to release the drag and drop version, however the standard upload version will still be available.

1 Like

@JeffersonBledsoe has included a Plone 6 implementation of the draft widget. You can see an example on Forms.
@amy.howard will we need to revise it to remove the drag and drop?

Thanks @amy.howard for the file upload component release updates, We are eagerly looking for this component. Can you please confirm when will be available standard upload version (not drag and drop version) ?