Form elements – File upload

Help users select and upload a file.

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-hint">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-hint" name="file-hint" type="file">
</div>

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  name: "file-hint"
}) }}

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, and 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.

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-hint">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-hint" name="file-hint" type="file">
</div>

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  name: "file-hint"
}) }}

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.

Error messages

Style error messages like this.

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-file-upload" data-module="nhsuk-file-upload">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-hint">
      Upload a file
    </label>
  </h1>
  <span id="file-hint-error" class="nhsuk-error-message">
    <span class="nhsuk-u-visually-hidden">Error:</span> The CSV must be smaller than 2MB
  </span>
  <input class="nhsuk-file-upload__input" id="file-hint" name="file-hint" type="file" aria-describedby="file-hint-error">
</div>

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "The CSV must be smaller than 2MB"
  },
  name: "file-hint"
}) }}

Make sure errors follow the guidance in the error message component and have specific error messages for specific error states.

If no file has been selected

Say "Select a [whatever they need to select]".

For example, "Select a report".

If the file is the wrong file type

Say "The selected file must be a [list of file types]".

For example, "The selected file must be a CSV" or "The selected file must be a JPG, BMP, PNG, TIF or PDF".

If the file is too big

Say "The selected file must be smaller than [largest file size]".

For example, "The selected file must be smaller than 2MB".

If the file is empty

Say "The selected file is empty".

If the file contains a virus

Say "The selected file contains a virus".

If the file is password protected

Say "The selected file is password protected".

If there was a problem and the file was not uploaded

Say "The selected file could not be uploaded – try again".

If there is a limit on how many files the user can select

Say "You can only select up to [highest number] files at the same time".

For example, "You can only select up to 10 files at the same time".

If the file is not in a template that must be used or the template has been changed

Say "The selected file must use the template".

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.

Research

This component is based on GOV.UK's March 2025 file upload component.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: January 2026