Component

Single Image Upload

A component for use where a single image is uploaded within the page

This component is used to provide an image upload section on pages where a single image needs to be uploaded and there is no dedicated image tab.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Image (required)

Upload image

Images must be 960px by 640px

Image description (alt text)

How to call this component

<%= render "components/single_image_upload", {
  id: "single-image-upload",
  name: "single-image-upload"
} %>

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 form input elements
have correctly associated labels

Other examples

With custom title (preview)

Custom title

Upload image

Images must be 960px by 640px

Image description (alt text)

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-title",
  name: "ingle-image-upload-with-title",
  title: "Custom title"
} %>

With custom name fields (preview)

Image (required)

Upload image

Images must be 960px by 640px

Image description (alt text)

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-title",
  name: "ingle-image-upload-with-title",
  alt_text_name: "klass[logo_alt_text]",
  alt_text_id: "klass_logo_alt_text",
  image_name: "klass[logo]",
  image_id: "klass_logo",
  image_cache_name: "klass[logo_cache]"
} %>

With error (preview)

Image (required)

Upload image

Images must be 960px by 640px

Error: Image cannot be blank

Image description (alt text)

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-error",
  name: "single-image-upload-with-error",
  error_items: [
    {
      text: "Image cannot be blank"
    }
  ]
} %>

With image uploaded (preview)

Image (required)

Uploaded image

Alt text: Some optional text that describes the image

Replace image

Images must be 960px by 640px

Image description (alt text)

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-image",
  name: "single-image-upload-with-image",
  image_src: "https://assets.publishing.service.gov.uk/media/11aa22bbbbbb33cccccccccc/No10DoorAjar-2.jpg",
  image_alt: "Some optional text that describes the image",
  image_uploaded: "True if all assets have finished uploading"
} %>

With errors on page (preview)

Image (required)

Uploaded image

File name: No10DoorAjar-2.jpg,

Alt text: Some optional text that describes the image

Replace image

Images must be 960px by 640px

Image description (alt text)

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-errors-on-page",
  name: "single-image-upload-with-errors-on-page",
  image_alt: "Some optional text that describes the image",
  page_errors: true,
  image_src: "https://assets.publishing.service.gov.uk/media/11aa22bbbbbb33cccccccccc/No10DoorAjar-2.jpg",
  filename: "No10DoorAjar-2.jpg,",
  image_cache: "1686052895-990540429428995-0004-6416/No10DoorAjar-2.jpg"
} %>

With no alt text fields (preview)

Image (required)

Uploaded image

Processing

Replace image

Images must be 960px by 640px

<%= render "components/single_image_upload", {
  id: "single-image-upload-with-no-alt-text-field",
  name: "single-image-upload-with-no-alt-text-field",
  image_src: "https://assets.publishing.service.gov.uk/media/11aa22bbbbbb33cccccccccc/No10DoorAjar-2.jpg",
  remove_alt_text_field: true
} %>