Component

Form file upload

Help users select and upload a file

Search for usage of this component on GitHub.

How it looks (preview) (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/*"
} %>

With label as heading (preview)

Wraps the label in a heading tag. Valid options are 1 to 6. To adjust the size of the label/heading, use the heading_size option. Valid options are s, m, l and xl.

Based on the heading/label pattern in the GOV.UK Design System.

<%= render "govuk_publishing_components/components/file_upload", {
  label: {
    text: "This is a heading 1 and a label"
  },
  name: "name",
  heading_level: 1,
  heading_size: "l"
} %>