Multi File Upload

[Jonathon-Marc]

What

I am looking to propose a Multi File upload pattern that currently does not exist in GDS. Currently, there are variations from HMRC and the MoJ which is most closely related to our use case for UKHSA. I have contacted govuk-design-system-support@digital.cabinet-office.gov.uk. who asked me to start a new issues.

Why

Explain why you think this should be added to the GOV.UK Design System.

1. The pattern would allow users to upload multiple files at once, review the uploaded files, and remove unwanted files, in it's MVP format with possible other features being explored.
2. There is currently no other pattern in GDS that meets a users need to upload a bulk amount of files at once.
3. There is also a current issue on GitHub 'upload file component has no visual target area when dragging and dropping a file'.
4. We have use cases where users need to upload multiple files at once, over 100 files in one submission. After our research, the NPIS team and the user-centred design team from UKHSA have concluded that no component in GDS meets the users needs.

• What evidence do you have that it's needed by multiple services across the government?
  Research shows multiple file upload patterns being used by HMRC and MoJ. There are further use cases within UKHSA.

• What evidence do you have that it meets the needs of the users of those services?
  The file upload component proposal build on what is being used by the MoJ and addresses accessibility concerns from the MoJ patterns. For examples, the use of green and red colours to distinguish if a file is ready uploaded and ticks and cross icons that could present problems with screen readers. Futher research has shows users want to know more details on upload space available and the number of files uploaded giving more clarity to the user.

• Have you checked that it doesn't already exist in the GOV.UK Design System?
  Yes

Anything else

Include links to any examples, research or code to support your proposal, if available.

[Jonathon-Marc]

[File upload research insights.pptx](https://github.com/user-attachments/files/15567966/File.upload.research.insights.pptx)

Updating this with round 1 UR insights and a recent iteration of the copy to show the status of the file.

---

Had a helpful conversation with a colleague from Of Qual who is in the alpha phase of a multi-file upload with similar use cases who is using a slightly different approch

[Jonathon-Marc]

Interaction Design Onboarding.pdf

Following our second round of UR we simplified the content on the page and the hierarchy of the file upload page.

Consideration for our future backlog is a toast notification when a file has been deleted.

[diroussel]

Can I make a few suggestions, comments and raise some discussion points, based on working on a very similar design for a UK public corporation (So government owned, but not part of the government).

1. Drop zone. I like the drag and drop zone with the dashed edge, because it's some how now part of the vernacular of drag and drop components. But it doesn't look right with square corners. Just a small rounding of the corners makes the dashes work better, and makes it even clearer that it's a drag and drop target.

2. Drag and drop. If we are going to have this part of the design system, then there should be guidance about how the drag and drop behaves in a dynamic way, not just how it looks. In particular I had issues with the default behaviour of the browser. If you drag and drop an image or PDF and miss the drop zone by a small amount, then the browser takes it as an instruction to open the image or PDF. Either in a new tab, or the current tab. This is counter to what the user is trying to acheive. My solution was on any page that includes a file upload component, disable the default drag and drop behaviour, and also highlight the file upload component when the drag hover is above the component to reassure that they are dragging to the right place. You can see this on other drag and drop implementations out there.

3. File types. When using the input element with type=file, the developer can restrict which file extensions can be picked, for instance only .jpg, .png and .docx. The user can see other files in the file picker, but they are greyed out and can't be selected. This is a clear visual guidance to the user. But when file are drag and dropped this filtering doesn't occur. So if 5 files are dragged on, and two are not-allowed file types, then what should we do? Perhaps silently ignore them? Or show a toast notification? Or add them to the file upload list, but with the standard error bars and message?

4. File sizes. The examples on the issue page are not precise about file sizes should be displayed. I think we should use KB, MB, GB using SI units (megabyes, not mebibytes). Also do we really need a column for the file size? The file name is more important, so you can just display: John's tax records 2022-2023 (1).pdf (2MB)

5. File naming, should we have guidance on which characters are acceptable for file names? I would suggest to make sure we can include french, german, polish, cyrilic characters along with the regular english-latin alphabet.

6. Upload progess. In my system we are dealing with a complex business domain, so some supporting documents might be quite big, particularly if they are scanned images in a PDF. Behind the scenes we break the file into 1MB chunks, and do a series of chunked uploads. This can take time if the user is on a slower connection, for instance in a rural setting. So we must be sure to give visual feedback on the success of the upload. I have implemented this as a subltle progress bar in the background of the status Tag component. So the status text changes from PREPARING, STARTING, UPLOADING, PROCESSING to UPLOADED, inside the Tag component, with a suitable colour. Meanwhile the background moves like a progress bar as each step of the upload completes.

7. File list order. It's interesting to see that you have the select/dragdrop area at the top of the list. Whereas we have it at the bottom. When we add new files we add them to the bottom of the list. In your prototype do you drag them to the top, but they appear at the bottom? Or do you also add new items to the top? I don't think either one is more right. But I currently like the add-to-bottom approach.

8. Malware scanning. The solution I'm working on incorporates malware scanning. Unfortunatly this is an async backend process. So the frontend upload the file to 'PROCESSING' state, then later when we know the malware scan succeed, we update the status to 'UPLOADED'. If the malware scan detects problems, then we update the status to 'FAILED', and the user must remove the file before completing the section. If the malware scan hasn't completed yet, the user can leave the page, but can't complete the section.

9. Parallel upload. We currently upload up to 2 files in parallel. And in each file up to two chunks at a time. If a user selects 10 files, then visually they all apear on the page, but with status 'PREPARING' while waiting their turn to upload.

That's all for now. It's a suprisingly complex topic.

[Jonathon-Marc]

Here is our Beta iteration enhanced for accessibility:

[Jonathon-Marc]

We also did some future thinking for notifications.

[Jonathon-Marc]

File.upload.screen.recording.mov

[elken]

This is really great.

We in MoJ have also done a similar component to enhance multi file uploads (more featureful than https://design-patterns.service.justice.gov.uk/components/multi-file-upload/, matching what @Jonathon-Marc has demoed)

Curious what the priority of adding this in is? Our design system team have recently made some large-scale changes to all the components we use and that has caused us to have to maintain our own version of the multi-file upload; would be ideal if we could use this one instead!

Thanks all for the great work, demo of ours below for posterity.

Screen.Recording.2025-05-07.at.09.43.52.mov

[CharlotteDowns]

Hi folks, for the next few weeks we're reviewing the improved version of the File upload component in the GOV.UK Design System. Get in touch if you're using it, and if you want to suggest any improvements or findings from user research 🙏.

I think there's some limitations to add multi file upload to the component itself but we may be able to investigate the pattern approach.