Multi-file upload

[matthewsolle]

We are working on a multi-file upload pattern which includes and develops the following components and patterns (some of which are in use in other design systems or being discussed in backlogs):

• Drag and drop file upload component in MOJ Design System
• Basic file upload component in GOV.UK Design System
• An 'alert' component in the GOV.UK Design System backlog
• The upload files pattern in MOJ Design System

We currently have the challenge of designing it for multiple user cases. One being the uploading of files as attachments as part of an application (Waste Permissions) and one being the uploading of multiple photos (Ivory).

Initial basic flows (v1.2) can be viewed here

[matthewsolle]

The alert component of the pattern has been added to the discussion on the GOV.UK Design System backlog https://github.com/alphagov/govuk-design-system-backlog/issues/2#issuecomment-582919170

[atrvrs]

I think I've made this suggestion on other instances of this pattern but here goes.

Should we consider enabling users to either: rename the file on upload or to add a description of what the upload is to identify what the upload relates to?

For example, an image/scan by default is unlikely to have a descriptive name. More IMG_789.jpg than receipt-20Jan2020.png. Renaming the file or - I suspect, better - adding a short description of what the file is might benefit both user confidence (I'm confident I've given govt the info required in an understandable format) and any eventual case worker processing (cross-referencing what's been asked for with what's been provided by the user).

[nicprice]

I think I've made this suggestion on other instances of this pattern but here goes.

Should we consider enabling users to either: rename the file on upload or to add a description of what the upload is to identify what the upload relates to?

For example, an image/scan by default is unlikely to have a descriptive name. More IMG_789.jpg than receipt-20Jan2020.png. Renaming the file or - I suspect, better - adding a short description of what the file is might benefit both user confidence (I'm confident I've given govt the info required in an understandable format) and any eventual case worker processing (cross-referencing what's been asked for with what's been provided by the user).

Makes total sense in those particular use cases.

In the case of the ivory service, an applicant has to register an item and pay a fee, before they can sell it. They also have to provide at least one photo of the item.

After several rounds of testing and improving, the plain old simple html version of the multiple file upload has tested well, without the need to provide extra info about each photo.

[chris-barrett-ddts]

A few more points to consider:

• Page order.
• How the pattern could work with and without Javascript enabled.
• How the pattern handles partial successes. E.g. 2 files uploaded 1 didn't.
• Whether the "remove" action should be a button or a link and how that works.
• Reaching the max number of files that could be uploaded.
• Users trying to continue without uploading a file.

[matthewsolle]

Two further versions with no alert at top of page.

View further mock ups v1.3

View further mock ups v1.4

To do

1. List Defra services which could require multi-file upload pattern
2. What are their user cases for multi-file upload
3. Document how the different components that make up the pattern can be used in different ways to support those user cases

[matthewsolle]

I think I've made this suggestion on other instances of this pattern but here goes.

Should we consider enabling users to either: rename the file on upload or to add a description of what the upload is to identify what the upload relates to?

For example, an image/scan by default is unlikely to have a descriptive name. More IMG_789.jpg than receipt-20Jan2020.png. Renaming the file or - I suspect, better - adding a short description of what the file is might benefit both user confidence (I'm confident I've given govt the info required in an understandable format) and any eventual case worker processing (cross-referencing what's been asked for with what's been provided by the user).

Waste Permits is going to do some further research on the benefit of including the capacity for an applicant to add a description of the file(s) they have uploaded. The challenge is [cough] Sharepoint

[nicprice]

This looks good and interesting from Code for America https://twitter.com/hackyourcity/status/1227671316355895296?s=19