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 javascript (preview) 

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

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