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
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.
@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) ?
Would you have examples of what it looks like after you have uploaded a file? e.g. a link to the file listed below the pattern with a remove circle icon to delete the file.
When will the Drag and drop variant of File Upload be released? We allow user to drag and drop files on numerous forms and would love to get some consistency for this method.
This looks good @andrei.vidaicu . I’ve often found on projects that we also need additional help text. Such as to outline or recommend a range of specific and acceptable documents that could be required. In this scenario, would this additional help text sit above the ‘Formats’ and ‘File size’ text?
