File upload

File upload

(open in a new window)

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 "file-upload/macro.njk" import govukFileUpload %}

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

File upload with hint text

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-2">
    Upload your photo
  </label>
  <span 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.
  </span>
  <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>

Macro

{% from "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

(open in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="file-upload-3">
    Upload a file
  </label>
  <span 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.
  </span>
  <span id="file-upload-3-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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 "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 and attributes

(open in a new window)

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:\fakepath\myphoto.jpg" accept=".jpg, .jpeg, .png">
</div>

Macro

{% from "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"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  }
}) }}

File upload with label as page heading

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" 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 "file-upload/macro.njk" import govukFileUpload %}

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

File upload with optional form-group classes

(open in a new window)

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 "file-upload/macro.njk" import govukFileUpload %}

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