New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File upload #49

govuk-design-system opened this Issue Jan 12, 2018 · 7 comments


8 participants
Copy link

govuk-design-system commented Jan 12, 2018


Help users select and upload a file.

Use this issue to discuss this component in the GOV.UK Design System.

Related link

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018


This comment has been minimized.

Copy link

ignaciaorellana commented Jan 19, 2018

The HO has a version of this Home Office Design System: Add file

and HMRC has this HMRC Design System: File upload

@timpaul timpaul added the component label May 21, 2018


This comment has been minimized.

Copy link

quis commented Aug 22, 2018

Here’s an example from GOV.UK Notify:



This comment has been minimized.

Copy link

Emilyallinson commented Sep 5, 2018

Hidden quotation marks in CSV files causing uploads to fail

We used the standard file upload component on Look up residency status for relief at source.

We found a particular problem in private beta that we didn’t anticipate. We wanted to share our findings on this, in case other teams want to use the component and come up against the same problem.

When people used Microsoft Excel to create CSVs, this sometimes caused hidden quotation marks to be added to their data. This caused a problem on our back end, because quotation marks are unacceptable characters. This caused the file upload to fail.

A user can resolve this by opening the CSV in a text editor, removing the quotation marks, and re-saving.

We found that once we’d explained this to people, they were able to easily recover from this mistake, and didn’t go on to repeat it. But new users didn’t know what to do.

We added some code to check the files for quotation marks before they’re uploaded, and added a validation message to let them know what the problem is and how to solve it. We also added extra information to a specialist guidance page about uploading CSVs to our service.

We tested a couple of different versions over a couple of sprints, but nothing we tried helped all our users.

To resolve this, we put in some code to programmatically remove the quotation marks. This means that users will never encounter this error again.


This comment has been minimized.

Copy link

nickcolley commented Oct 18, 2018

I think there is an opportunity to increase the target size of this component to satisfy WCAG 2.1 Level AAA

If we were to style it with custom styles it would help this.


This comment has been minimized.

Copy link

mikeash82 commented Nov 29, 2018

@gavinwye commented on 31 Jan 2017

#Drag and drop file upload#

Select file - file upload

Other links

GOV.UK elements:

@elizabethbartram commented on 3 Feb 2017

file upload

@gavinwye commented on 4 May 2017
New screenshots of the employment intermediaries service provided by @stevenaproctor

there is a problem
upload with error

@jennifer-hodgson commented on 29 Jan 2018
Following our discussions in the working group last week - is file upload (and file download), in fact, a service pattern rather than a pattern?

@adamliptrot-oc commented on 29 Jan 2018
@jennifer-hodgson my view is that if the component parts can be extracted into re-usable patterns, that is fine and those can be documented. There is also a difference in requirements between multiple file upload and single file upload.

@jennifer-hodgson commented on 29 Jan 2018
Thanks for this @adamliptrot-oc. Service patterns are reusable too (they currently exist on a separate backlog, we're discussing how to most usefully house them and make them visible). It seemed to a few of us on the WG call, if I remember correctly, that this was a more complex, multi-step process fulfilling a task which stands as a service pattern. That doesn't preclude, of course, its constituent parts being broken down into useful components and patterns.

@JamesPBoyle commented on 29 Jan 2018
Can I hook you guys into #event-upscan? UpScan is going to replace File-Upload-as-a-Service. We are still in the process of building the service, but it would be useful to make sure the pattern is consistent with the capabilities of the backend system

@adamliptrot-oc commented on 29 Jan 2018
@jennifer-hodgson yep, I raised that, but keen not to rule out the chance for other services to benefit from the findings of a service built purely to handle this type of interaction. Other services look to be finding their own solutions (outside of a service-based one) so it would be useful to find some common ground between them and document a pattern.

@jennifer-hodgson commented on 29 Jan 2018
Thanks for that, @JamesPBoyle, yes that would be useful. I wonder is this also of interest to @benwakefield?

And thanks for your comments also, @adamliptrot-oc. I think you raise an interesting issue about the relationships between components, design patterns and service patterns, and how to organise and display them within the design system in such a way that everyone who needs a certain thing can find it. Perhaps we could discuss this broader issue at the next working group, @stevenaproctor?

@stevenaproctor commented on 29 Jan 2018
@jennifer-hodgson It is definitely something that needs to be discussed, especially because technical reasons may mean a service-design pattern cannot be implemented as designed. Also, there could be conflicting user research from different services.

@lfritzsche commented on 8 Feb

Large file upload with drag and drop and progress bar

screenshot-sdes-ux herokuapp com-2018 02 08-09-32-53
screenshot-sdes-ux herokuapp com-2018 02 08-09-33-48
screenshot-sdes-ux herokuapp com-2018 02 08-09-36-20
screenshot-sdes-ux herokuapp com-2018 02 08-09-37-24
screenshot-sdes-ux herokuapp com-2018 02 08-09-40-47
screenshot-sdes-ux herokuapp com-2018 02 08-09-46-55

@lfritzsche commented on 8 Feb 2018

This pattern allows users to upload large files to HMRC and understand its status, before during and after transfer.

Describe when to use this pattern/component
Is it a pattern or component?
Pattern as it uses a combination of different components
What need does it help you meet?
Allows users to securely send large files to the intended recipient with a record of what happened.
When is it appropriate to use?
When there is a need to send documents to a user where alternatives such as email are not appropriate. Not tested with users who upload lots (e.g. 20+ files daily) of small files

@lfritzsche commented on 8 Feb 2018
How it works
Full description
This upload pattern has been designed to handle the secure transfer of large files from third parties and other government departments to HMRC. It is different to File Upload As A Service (FUUAS) as there are few restrictions on the type and size of files for intended transfer.

Users can send individual files up to the size of 10GB and any format, excluding executable files (.exe). The pattern allows users to select either individual or multiple files at a time via the main CTA or drag and drop. Once the user has selected the files they wish to upload, there is the opportunity for them to remove (if any have been selected in error) or add new files. Basic checks to ensure selected files are not over 10GB individually or .exe format are done in the backend first so that we can provide appropriate erroring. This allows users to correct any issues with file size and also to mitigate files sent in error.

Errors have been dealt with in a unique way and require further testing from an accessibility and usability perspective within Private Beta. Users must fix the issue before they can proceed to upload by removing the file selected with the issue. This allows users to record the file with the issue in case they need to investigate further.

The error box at the top of the screen allows users to remove all files with problems, however this may cause usability issues for users with screen readers as they are unable to link to the individual files. They can then continue to upload, which will then launch the uploading functionality.

Uploads in progress is a new component which uses a progress bar in addition to a percentage indicator with the opportunity to cancel any in flight uploads. If users send files that are larger than average, we found that it was important to give the user more visual feedback for the stats of that upload. A similar erroring pattern is used for files with connection errors as previously described. If any errors occur, the user is still able to proceed with the successful files.

Coded examples
Speak to David Birchall.

Why it works
This pattern works because it is a single page application that gives dynamic inline error messaging when something goes wrong, giving user feedback as to the progress of the upload and individual file control at all stages of the upload process. User research has found that users find this pattern easy to follow with minimal errors encountered.

@lfritzsche commented on 8 Feb 2018

Research on this pattern

SDES has just moved into Private Beta from January 29th 2018. Further research is required to understand how users deal with the transfer of large files (2GB and upwards)

All Alpha research is available in confluence.

Feature specific research summary:
Real time feedback such as error messages and status (failed, cancelled, complete) -
Dynamic components - The upload journey uses a single page which uses JS to dynamically change components based on the scenario. This tested very well with users and they found the additional info, inline errors and individual control very intuitive. Further testing is required for large batches of files uploaded at once.

User control before and during upload - This tested well in alpha, although users didn’t have actual reasons to cancel and retry as they were using dummy files with the prototype. More extensive contextual research is required in Private Beta.

Multi file uploads - Most of our users selected single files to upload. Multi file uploads were useful for those uploading on behalf of their organisation, however within that group only those with a higher technical proficiency used the drag and drop functionality. This is why the design reflects drag and drop as a secondary action.

10GB per individual files - this needs to be extensively tested via contextual enquiry within Private beta. The prototype and the machines we tested on were super efficient and potentially don’t give an accurate reflection of the time it actually takes to upload files. Best practice stipulates around 1GB per file for efficient browser uploading.

@mikeash82 mikeash82 referenced this issue Nov 29, 2018


Upload files #68


This comment has been minimized.

Copy link

timpaul commented Jan 8, 2019

Dropbox Paper audit

The research below was taken from a Dropbox Paper document, which was reviewed and archived on 8 Jan 2019 by the Design System team.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

Research and examples

Report landfill data

Landfill operators have a requirement to report daily, monthly and yearly environmental data. This service allows operators to upload CSV files using either the file browser or drag and drop.

The CSV is subject to a 2-step validation process. The service checks for:

  • File errors. (Unsupported file type, incorrect headers, empty file, file too large, file contains a virus)
  • Data errors (Users are required to format the files to comply with the landfill data rules)

Formatting errors are identified and grouped and contextual guidance is given which explains how to correct them. The user can delve deeper to identify errors in individual rows and is prompted to fix the errors in their CSV before uploading again.

The pattern has tested well with users of the beta private (9 operators with users of medium to high levels of digital proficiency) and will have more thorough testing in beta live (June’17)

Upload page
Browse for files
Drag and drop multiple files

The files have been validated and data errors found
Corrections summarised and guidance is provided
Further detail on individual errors

GOV.UK Notify


This comment has been minimized.

Copy link

sanjaypoyzer commented Jan 29, 2019

Not sure if it's worth having a separate issue for Upload a photo of a paper document, but that's what the Blue Badge service has

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment