Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

File upload

These examples are used for automated tests and may not follow service manual best practice.

File upload default

Open this example in a new tab: File upload default

Code

Markup

<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-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

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

File upload reverse default

Open this example in a new tab: File upload reverse default

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  variant: "reverse"
}) }}

File upload with primary button

Open this example in a new tab: File upload with primary button

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload" data-choose-files-button-class-list="[]">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  chooseFilesButtonClassList: []
}) }}

File upload with small primary button

Open this example in a new tab: File upload with small primary button

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--small"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  chooseFilesButtonClassList: ["nhsuk-button--small"]
}) }}

File upload with small reverse button

Open this example in a new tab: File upload with small reverse button

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse","nhsuk-button--small"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  variant: "reverse",
  chooseFilesButtonClassList: ["nhsuk-button--reverse", "nhsuk-button--small"]
}) }}

File upload with small secondary button

Open this example in a new tab: File upload with small secondary button

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--secondary","nhsuk-button--small"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  chooseFilesButtonClassList: ["nhsuk-button--secondary", "nhsuk-button--small"]
}) }}

File upload disabled

Open this example in a new tab: File upload disabled

Code

Markup

<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-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" disabled>
</div>

Macro

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

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

File upload reverse disabled

Open this example in a new tab: File upload reverse disabled

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" disabled>
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  disabled: true,
  variant: "reverse"
}) }}

File upload with size S label

Open this example in a new tab: File upload with size S label

Code

Markup

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

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "s",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload with size M label

Open this example in a new tab: File upload with size M label

Code

Markup

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

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "m",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload with size L label

Open this example in a new tab: File upload with size L label

Code

Markup

<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-upload">
      Upload a file
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file">
</div>

Macro

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

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

File upload with size XL label

Open this example in a new tab: File upload with size XL label

Code

Markup

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

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "xl",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload with error message

Open this example in a new tab: File upload with error message

Error: The selected file must be a JPG, BMP or TIF
Code

Markup

<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-upload">
      Upload a file
    </label>
  </h1>
  <span class="nhsuk-error-message" id="file-upload-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> The selected file must be a JPG, BMP or TIF
  </span>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-error">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "The selected file must be a JPG, BMP or TIF"
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload reverse with error message

Open this example in a new tab: File upload reverse with error message

Error: The selected file must be a JPG, BMP or TIF
Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="file-upload-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> The selected file must be a JPG, BMP or TIF
  </span>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-error">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "The selected file must be a JPG, BMP or TIF"
  },
  id: "file-upload",
  name: "file-upload",
  variant: "reverse"
}) }}

File upload with error message and hint

Open this example in a new tab: File upload with error message and hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder
Error: The selected file must be a JPG, BMP or TIF
Code

Markup

<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-upload">
      Upload a file
    </label>
  </h1>
  <div class="nhsuk-hint" id="file-upload-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder
  </div>
  <span class="nhsuk-error-message" id="file-upload-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> The selected file must be a JPG, BMP or TIF
  </span>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-hint file-upload-error">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  errorMessage: {
    text: "The selected file must be a JPG, BMP or TIF"
  }
}) }}

File upload reverse with error message and hint

Open this example in a new tab: File upload reverse with error message and hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder
Error: The selected file must be a JPG, BMP or TIF
Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload a file
    </label>
  </h1>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="file-upload-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder
  </div>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="file-upload-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> The selected file must be a JPG, BMP or TIF
  </span>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-hint file-upload-error">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  errorMessage: {
    text: "The selected file must be a JPG, BMP or TIF"
  },
  variant: "reverse"
}) }}

File upload with hint

Open this example in a new tab: File upload with hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder
Code

Markup

<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-upload">
      Upload your photo
    </label>
  </h1>
  <div class="nhsuk-hint" id="file-upload-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder
  </div>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-hint">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload your photo",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload reverse with hint

Open this example in a new tab: File upload reverse with hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder
Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload nhsuk-file-upload--reverse" data-module="nhsuk-file-upload" data-choose-files-button-class-list='["nhsuk-button--reverse"]'>
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--reverse nhsuk-label--l" for="file-upload">
      Upload your photo
    </label>
  </h1>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="file-upload-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder
  </div>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" aria-describedby="file-upload-hint">
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload your photo",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  id: "file-upload",
  name: "file-upload",
  variant: "reverse"
}) }}

File upload with multiple

Open this example in a new tab: File upload with multiple

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload" data-i18n.choose-files-button="Choose files" data-i18n.no-file-chosen="No files chosen" data-i18n.drop-instruction="or drop files">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-upload">
      Upload multiple files
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" multiple>
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Upload multiple files",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  multiple: true,
  chooseFilesButtonText: "Choose files",
  dropInstructionText: "or drop files",
  noFileChosenText: "No files chosen"
}) }}

File upload without page heading

Open this example in a new tab: File upload without page heading

Code

Markup

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

Macro

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

{{ fileUpload({
  label: {
    text: "Upload a file"
  },
  id: "file-upload",
  name: "file-upload"
}) }}

File upload with translations

Open this example in a new tab: File upload with translations

Code

Markup

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload" data-i18n.choose-files-button="Dewiswch ffeil" data-i18n.no-file-chosen="Dim ffeil wedi&#39;i dewis" data-i18n.multiple-files-chosen.other="%{count} ffeil wedi&#39;u dewis" data-i18n.multiple-files-chosen.one="%{count} ffeil wedi&#39;i dewis" data-i18n.drop-instruction="neu ollwng ffeil" data-i18n.entered-drop-zone="Wedi mynd i mewn i&#39;r parth gollwng" data-i18n.left-drop-zone="Parth gollwng i&#39;r chwith">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="file-upload">
      Llwythwch ffeil i fyny
    </label>
  </h1>
  <input class="nhsuk-file-upload__input" id="file-upload" name="file-upload" type="file" multiple>
</div>

Macro

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

{{ fileUpload({
  label: {
    text: "Llwythwch ffeil i fyny",
    size: "l",
    isPageHeading: true
  },
  id: "file-upload",
  name: "file-upload",
  multiple: true,
  chooseFilesButtonText: "Dewiswch ffeil",
  dropInstructionText: "neu ollwng ffeil",
  noFileChosenText: "Dim ffeil wedi'i dewis",
  multipleFilesChosenText: {
    other: "%{count} ffeil wedi'u dewis",
    one: "%{count} ffeil wedi'i dewis"
  },
  enteredDropZoneText: "Wedi mynd i mewn i'r parth gollwng",
  leftDropZoneText: "Parth gollwng i'r chwith"
}) }}