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">
</div>

Macro

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

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

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" 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" 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 value

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-4">
    Upload a photo
  </label>
  <input class="govuk-file-upload" id="file-upload-4" name="file-upload-4" type="file" value="C:&#92;fakepath&#92;myphoto.jpg">
</div>

Macro

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

{{ govukFileUpload({
  id: "file-upload-4",
  name: "file-upload-4",
  value: "C:\\fakepath\\myphoto.jpg",
  label: {
    text: "Upload a photo"
  }
}) }}

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