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 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 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 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>
  <p 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
  </p>
  <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 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 with hint and error

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

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>
  <p 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
  </p>
  <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 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"
}) }}