File upload examples

• # default

  Open this example in a new tab

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

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "name": "file-upload-1",
    "label": {
      "text": "Upload a file"
    }
  }) }}
          

• # with hint text

  Open this example in a new tab

  Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

  {
    "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."
    }
  }

  
  {% 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."
    }
  }) }}
          

• # with error message and hint

  Open this example in a new tab

  Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

  Error message goes here

  {
    "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"
    }
  }

  
  {% 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"
    }
  }) }}
          

• # with label as page heading

  Open this example in a new tab

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

  
  {% 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
    }
  }) }}
          

• # enhanced

  Open this example in a new tab

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

  
  {% 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
  }) }}
          

• # enhanced, with error message and hint

  Open this example in a new tab

  Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

  Error message goes here

  {
    "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"
    }
  }

  
  {% 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"
    }
  }) }}
          

• # enhanced, multiple files

  Open this example in a new tab

  {
    "javascript": true,
    "id": "file-upload-3",
    "name": "file-upload-3",
    "label": {
      "text": "Upload files"
    },
    "multiple": true
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "javascript": true,
    "id": "file-upload-3",
    "name": "file-upload-3",
    "label": {
      "text": "Upload files"
    },
    "multiple": true
  }) }}
          

• # with value

  Open this example in a new tab

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

  
  {% 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"
    }
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "id": "file-upload-attributes",
    "name": "file-upload-attributes",
    "label": {
      "text": "Upload a file"
    },
    "attributes": {
      "accept": ".jpg, .jpeg, .png"
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-attributes",
    "name": "file-upload-attributes",
    "label": {
      "text": "Upload a file"
    },
    "attributes": {
      "accept": ".jpg, .jpeg, .png"
    }
  }) }}
          

• # classes

  Open this example in a new tab

  {
    "id": "file-upload-classes",
    "name": "file-upload-classes",
    "label": {
      "text": "Upload a file"
    },
    "classes": "app-file-upload--custom-modifier"
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-classes",
    "name": "file-upload-classes",
    "label": {
      "text": "Upload a file"
    },
    "classes": "app-file-upload--custom-modifier"
  }) }}
          

• # id

  Open this example in a new tab

  {
    "id": "file-upload-id",
    "name": "test-name",
    "label": {
      "text": "Upload a file"
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-id",
    "name": "test-name",
    "label": {
      "text": "Upload a file"
    }
  }) }}
          

• # with describedBy

  Open this example in a new tab

  {
    "id": "file-upload-describedby",
    "name": "file-upload-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element"
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-describedby",
    "name": "file-upload-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element"
  }) }}
          

• # with hint and describedBy

  Open this example in a new tab

  Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

  {
    "id": "file-upload-hint-describedby",
    "name": "file-upload-hint-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-hint-describedby",
    "name": "file-upload-hint-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
    }
  }) }}
          

• # error

  Open this example in a new tab

  Error message

  {
    "id": "file-upload-with-error",
    "name": "file-upload-with-error",
    "label": {
      "text": "Upload a file"
    },
    "errorMessage": {
      "text": "Error message"
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-with-error",
    "name": "file-upload-with-error",
    "label": {
      "text": "Upload a file"
    },
    "errorMessage": {
      "text": "Error message"
    }
  }) }}
          

• # with error and describedBy

  Open this example in a new tab

  Error message

  {
    "id": "file-upload-error-describedby",
    "name": "file-upload-error-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-error-describedby",
    "name": "file-upload-error-describedby",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    }
  }) }}
          

• # with error, describedBy and hint

  Open this example in a new tab

  hint

  Error message

  {
    "id": "file-upload-error-describedby-hint",
    "name": "file-upload-error-describedby-hint",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    },
    "hint": {
      "text": "hint"
    }
  }

  
  {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
  
  {{ govukFileUpload({
    "id": "file-upload-error-describedby-hint",
    "name": "file-upload-error-describedby-hint",
    "label": {
      "text": "Upload a file"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    },
    "hint": {
      "text": "hint"
    }
  }) }}
          

• # translated, no javascript enhancement

  Open this example in a new tab

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

  
  {% 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,
    "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"
  }) }}
          

• # allows multiple files

  Open this example in a new tab

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

  
  {% 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
  }) }}
          

• # disabled

  Open this example in a new tab

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

  
  {% 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
  }) }}
          

• # with optional form-group classes

  Open this example in a new tab

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

  
  {% 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"
    }
  }) }}
          

• # translated

  Open this example in a new tab

  {
    "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"
  }

  
  {% 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"
  }) }}