File upload

<h2 class="nhsw-h2">Upload a file</h2>
<div class="nhsw-file-upload">
  <span class="nhsw-file-upload__status">No file chosen</span>
  <div class="nhsw-file-upload__actions">
    <input class="nhsw-file-upload__input" id="file-upload-1" name="file-upload-1" type="file">
    <label class="nhsw-button nhsw-button--secondary nhsw-button--inline nhsw-file-upload__button" for="file-upload-1">Choose file</label>
    <span class="nhsw-file-upload__hint">or drop file</span>
  </div>
</div>

{% from "file-upload/macro.njk" import nhswFileUpload %}

<h2 class="nhsw-h2">Upload a file</h2>
{{ nhswFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  chooseFilesButtonText: "Choose file"
}) }}

When to use file upload

You should only ask users to upload something if it's critical to the delivery of your service.

Read a blog post about design tips for uploading things (GOV.UK).

How to use file upload

To upload a file, the user can either:

• use the "Choose file" button
• drag and drop a file into the file upload input area

Let users reuse uploaded files

Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security or privacy concern.

For example, a user might need to upload a photo of their driving licence to prove their identity, then again to prove their address.

You can make it easier for the user to reuse a file by showing it as an option for the user to select. Consider users on public devices before choosing to make the file available to preview or download.

Changing the button text

You can change the text on the button and in the "No file chosen" message. This text is changeable so you can translate it or be specific about the file to upload.

Keep the text as short as possible. Screen reader users, for example, might find it difficult to use the component if the text is too long.

All the text in the component can be translated to match the language of the page content when JavaScript is running.

Accessibility

Users of Dragon, a speech recognition tool, may not be able to interact with the component until they have first interacted with another part of the page. For example, they could click the mouse in an empty area or they could say "press tab" to move the focus. After that, the Dragon user should be able to interact successfully with the file upload component.

If they need to use the component more than once (for example, to correct a mistake), they may need to perform another action again before using it.

Source

Learn more about File upload in the GOV.UK Design System.

Back to top