1. Government Frontend Component Guide
  2. Form file upload

Component

Form file upload

Help users select and upload a file

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "Upload a file"
  },
  name: "file-upload"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

The component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus
  • be recognisable as input field elements
  • have correctly associated labels

Labels use the label component.

Other examples

With hint (preview)

Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "Upload a file"
  },
  name: "file-upload-with-hint",
  hint: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
} %>

With error (preview)

Error: Please upload a file
<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "Upload a file"
  },
  name: "file-upload-with-error",
  error_message: "Please upload a file"
} %>

With error items (preview)

Error: Descriptive link to the question with an error 1
Descriptive link to the question with an error 2
<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "Upload a file"
  },
  name: "file-upload-with-error",
  error_items: [
    {
      text: "Descriptive link to the question with an error 1",
      href: "#example-error-1"
    },
    {
      text: "Descriptive link to the question with an error 2",
      href: "#example-error-2"
    }
  ]
} %>

With file accept (preview)

<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "Upload an image"
  },
  name: "file-upload-specific",
  accept: "image/*"
} %>