This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

File upload

File upload

Open this example in a new tab: file upload

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  }
}) }}

File upload allows multiple files

Open this example in a new tab: file upload allows multiple files

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  multiple: true
}) }}

File upload allows image files only

Open this example in a new tab: file upload allows image files only

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" accept="image/*">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  attributes: {
    accept: "image/*"
  }
}) }}

File upload allows direct media capture

Open this example in a new tab: file upload allows direct media capture

Currently only works on mobile devices.

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" capture="user">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  attributes: {
    capture: "user"
  }
}) }}

File upload disabled

Open this example in a new tab: file upload disabled

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" disabled>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  disabled: true
}) }}

File upload with hint text

Open this example in a new tab: file upload with hint text

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-2">
    Upload your photo
  </label>
  <div id="file-upload-2-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </div>
  <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-2",
  name: "file-upload-2",
  label: {
    text: "Upload your photo"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  }
}) }}

File upload with error message and hint

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="file-upload-3">
    Upload a file
  </label>
  <div id="file-upload-3-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </div>
  <p id="file-upload-3-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </p>
  <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-3",
  name: "file-upload-3",
  label: {
    text: "Upload a file"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  },
  errorMessage: {
    text: "Error message goes here"
  }
}) }}

File upload with label as page heading

Open this example in a new tab: file upload with label as page heading

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="file-upload-1">
      Upload a file
    </label>
  </h1>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}) }}

File upload with optional form-group classes

Open this example in a new tab: file upload with optional form-group classes

Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  formGroup: {
    classes: "extra-class"
  }
}) }}

File upload enhanced

Open this example in a new tab: file upload enhanced

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <div
    class="govuk-drop-zone"
    data-module="govuk-file-upload">
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  javascript: true
}) }}

File upload enhanced, disabled

Open this example in a new tab: file upload enhanced, disabled

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-error">
    Upload a file
  </label>
  <div id="file-upload-error-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </div>
  <div
    class="govuk-drop-zone"
    data-module="govuk-file-upload">
  <input class="govuk-file-upload" id="file-upload-error" name="file-upload-error" type="file" disabled aria-describedby="file-upload-error-hint">
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  javascript: true,
  disabled: true,
  id: "file-upload-error",
  name: "file-upload-error",
  label: {
    text: "Upload a file"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  }
}) }}

File upload enhanced, with error message and hint

Open this example in a new tab: file upload enhanced, with error message and hint

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="file-upload-3">
    Upload a file
  </label>
  <div id="file-upload-3-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </div>
  <p id="file-upload-3-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </p>
  <div
    class="govuk-drop-zone"
    data-module="govuk-file-upload">
  <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  javascript: true,
  id: "file-upload-3",
  name: "file-upload-3",
  label: {
    text: "Upload a file"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  },
  errorMessage: {
    text: "Error message goes here"
  }
}) }}

File upload translated

Open this example in a new tab: file upload translated

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Llwythwch ffeil i fyny
  </label>
  <div
    class="govuk-drop-zone"
    data-module="govuk-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">
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Llwythwch ffeil i fyny"
  },
  multiple: true,
  javascript: 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"
}) }}