File upload

File upload

Open this example in a new tab

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" data-module="govuk-file-upload">
</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"
  }
}) }}

File upload allows multiple files

Open this example in a new tab

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" data-module="govuk-file-upload" multiple="true">
</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: {
    multiple: true
  }
}) }}

File upload allows image files only

Open this example in a new tab

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" data-module="govuk-file-upload" 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

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" data-module="govuk-file-upload" 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 with hint text

Open this example in a new tab

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" data-module="govuk-file-upload" 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

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" data-module="govuk-file-upload" 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

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" data-module="govuk-file-upload">
</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

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" data-module="govuk-file-upload">
</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"
  }
}) }}