File upload

[klaudiarybicka]

File upload

Overview

We are working on a new file upload pattern for the HMRC Design Resources. Our services require some upload features not included in the GDS file upload component. Our goal is to improve the consistency and usability of our solutions.

Some considerations

• option to change/delete file
• multiple file upload
• "choose a file button" vs "drag & drop" field vs file URL
• progress bar/spinner + reading the status back while using screen readers
• feedback on whether the file format is correct
• success and error messages
• if the format or file size is wrong: instructions or more info
• file name/description: is the option needed? if so, text input or dropdown menu?
• name of the pattern
• various user abilities to change the format or reduce file size
• a few "choose a file" buttons on one page vs asking the user whether they would like to add another file
• acceptable file formats: always visible vs dropdown
• file preview: is it needed?
• a separate information on the page that some files are still uploading, especially for screen readers
• compatibility with UpScan: each file has to be uploaded individually, error message has to be on a separate page, supports maximum 100MB files

Existing components or patterns

GOV Design System

https://design-system.service.gov.uk/components/file-upload/

Ministry of Justice

https://design-patterns.service.justice.gov.uk/patterns/upload-files/

Examples of services using file upload

• Send documents for a customs check
• Valuation Office Agency
• Penalty reform
• Claim for reimbursement of import duties
• Gforms
• NIDAC
• CDS

Relevant discussions

File upload on GitHub

alphagov/govuk-design-system-backlog#49

Upload files on GitHub

#68

GOV.UK blog post

https://designnotes.blog.gov.uk/2017/02/14/some-design-tips-for-uploading-things/

MOJ multi-file upload on GitHub

ministryofjustice/moj-design-system-backlog#1

NHS file upload on GitHub

nhsuk/nhsuk-service-manual-community-backlog#93

Existing research

• some users struggle with the GDS pattern as they needed a list of the files uploaded (are they going to lose their progress if they continue?)
• the users expect the file upload element to follow familiar standards and conventions
• the users need information on what kind of files they need to upload
• it feels most natural to upload the documents during the same step - once they uploaded all their files, the question whether they would like to upload more confused the users
• the examples and information on file size and format were useful
• the users find it confusing to indicate beforehand how many files they would like to upload
• a shorter journey is beneficial, the users want to be taken directly to the upload page
• if there is an error, the users want to know which file caused it
• asking the users what kind of file they want to upload can lead to confusion
• when using the "change" option, it is essential to allow the users to change only one file, not all of them from the beginning
• a confirmation of the files being submitted is an important reassurance, the users find it useful
• any assisting links need distinct, easy to understand names

[richardhattonUX]

Has there been any accessibility testing on this pattern?

I can see in one example it uses aria-live="polite". I wonder how well each stage of the upload process is announced by screen readers when multiple states are happening at once.

Also wondering how errors are announced when multiple files are uploading?

[danlaceyhmrc]

For tasklist, various colour status tags were descoped, I thought, because they were perceived to add little or no value to teh user and colours could be interpreted in different ways - does the same thinking perhaps apply here too?

[Jon-Rowe-HMRC]

Hey @danlaceyhmrc

We retired HMRC's supplemental guidance on tags a year ago when GDS made a number of changes to their guidance related to our concerns.

Tag backgrounds have survived in the GDS guidance but are less used and light.

[Kerrzinga]

This pattern needs more thought on how to handle the case where JavaScript isn’t available. Right now, the only mention of this is:

Use a yellow 'Uploading' tag to show that a file is being uploaded or scanned. When JavaScript isn’t available, include a ‘Refresh page to update file upload progress’ link to the same page above the summary list.

The yellow tag idea must be talking about when JS is available as it isn’t possible to update the page between selecting a file and the upload completing without JS. But manually refreshing the page, as suggested, would cancel any uploads still in progress—so that’s not a great solution.

The page will refresh or redirect once the POST request completes. Until then, the file input field stays visible, which means users could try to upload more files or click submit again while waiting. So some extra guidance text will probably be needed for the non-js users to tell them to press submit and wait.

Things to keep in mind with no JS:

• The page won’t update between selecting a file and finishing the upload.
• It will only refresh or redirect once the POST request completes.
• The file input field stays visible and usable while uploads are happening.