katalyst-govuk-formbuilder 1.30.1 → 2.0.0

data/app/assets/stylesheets/katalyst/govuk/components/_index.scss

@@ -1,3 +1,4 @@
+@use "attachment";
 @use "govuk-frontend/dist/govuk/components/character-count";
 @use "govuk-frontend/dist/govuk/components/checkboxes";
 @use "combobox";

data/app/assets/stylesheets/katalyst/govuk/components/attachment/_index.scss

@@ -0,0 +1,3 @@
+@use "mixin";
+
+@include mixin.styles;

data/app/assets/stylesheets/katalyst/govuk/components/attachment/_mixin.scss

@@ -0,0 +1,89 @@
+@use "govuk-frontend/dist/govuk/base";
+@use "govuk-frontend/dist/govuk/core/typography";
+
+$attachment-background-colour: base.govuk-colour("black", $variant: "tint-95");
+$attachment-border-width: 2px;
+
+@mixin styles {
+  :where(.govuk-attachment) {
+    display: grid;
+    grid-template-areas: "preview caption actions";
+    grid-template-columns: auto 1fr auto;
+    margin: 0;
+    padding: base.govuk-spacing(3) base.govuk-spacing(3);
+    grid-gap: base.govuk-spacing(2);
+    background-color: $attachment-background-colour;
+    border: $attachment-border-width solid
+      base.govuk-functional-colour("border");
+
+    .preview {
+      grid-area: preview;
+      max-width: 4rem;
+      aspect-ratio: 1/1;
+      object-fit: cover;
+    }
+
+    .caption {
+      display: flex;
+      flex-direction: column;
+      grid-area: caption;
+      @include base.govuk-font($size: 16, $line-height: 1.25);
+    }
+
+    .filename {
+      @include base.govuk-typography-weight-bold;
+    }
+
+    .size {
+      color: base.govuk-functional-colour(secondary-text);
+    }
+
+    .actions {
+      grid-area: actions;
+    }
+
+    // Buttons require JavaScript
+    .actions button {
+      display: none;
+    }
+
+    &[data-state="upload-successful"] {
+      .status {
+        color: base.govuk-functional-colour("success");
+      }
+    }
+
+    &[data-state="upload-failed"] {
+      border-color: base.govuk-functional-colour("error");
+
+      .status {
+        color: base.govuk-functional-colour("error");
+      }
+    }
+  }
+
+  .govuk-attachment {
+    margin-bottom: base.govuk-spacing(2);
+  }
+
+  // With JavaScript running the button is the figure's only interactive
+  // control; the select still carries the submitted value but leaves the
+  // display, tab order, and accessibility tree.
+  .govuk-frontend-supported :where(.govuk-attachment) {
+    .actions select {
+      display: none;
+    }
+
+    .actions button {
+      display: revert;
+    }
+  }
+
+  // Hide duplicate inputs when multiple is not enabled, this allows reverting
+  // but the value from the last select will overwrite the others in save.
+  .govuk-file-upload-wrapper:has(input[type="file"]:not([multiple])) {
+    .govuk-attachment:has(+ .govuk-attachment) {
+      display: none;
+    }
+  }
+}

data/app/helpers/katalyst/govuk/form_builder/builder.rb

@@ -7,6 +7,9 @@ module Katalyst
         extend ActiveSupport::Concern
 
         included do
+          # Delegate image_tag for attachment previews
+          delegate :image_tag, to: :@template
+
           # Overwrite GOVUK default to set small to true
           # @see GOVUKDesignSystemFormBuilder::Builder#govuk_collection_radio_buttons
           def govuk_collection_radio_buttons(attribute_name, collection, value_method, text_method = nil,
@@ -248,6 +251,136 @@ module Katalyst
           ).html
         end
 
+        # Generates an input of type +file+ with active storage and preview support.
+        #
+        # @param attribute_name [Symbol] The name of the attribute
+        # @option label text [String] the label text
+        # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+        # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
+        # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by
+        #   screenreaders
+        # @option label kwargs [Hash] additional arguments are applied as attributes on the +label+ element
+        # @param caption [Hash] configures or sets the caption content which is inserted above the label
+        # @option caption text [String] the caption text
+        # @option caption size [String] the size of the caption, can be +xl+, +l+ or +m+. Defaults to +m+
+        # @option caption kwargs [Hash] additional arguments are applied as attributes on the caption +span+ element
+        # @param hint [Hash,Proc] The content of the hint. No hint will be added if 'text' is left +nil+. When a
+        #   +Proc+ is supplied the hint will be wrapped in a +div+ instead of a +span+
+        # @option hint text [String] the hint text
+        # @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
+        # @option kwargs [Hash] kwargs additional arguments are applied as attributes to the +input+ element
+        # @param form_group [Hash] configures the form group
+        # @option form_group kwargs [Hash] additional attributes added to the form group
+        # @param before_input [String,Proc] the content injected before the input. No content will be added if left
+        #   +nil+
+        # @param after_input [String,Proc] the content injected after the input. No content will be added if left
+        #   +nil+
+        # @param choose_files_button_text [String] The text of the button that opens the file picker. Default is
+        #   "Choose file". If javascript is not provided, this option will be ignored.
+        # @param drop_instruction_text [String] The text informing users they can drop files. Default is
+        #   "or drop file". If javascript is not provided, this option will be ignored.
+        # @param multiple_files_chosen_text [Hash] The text displayed when multiple files have been chosen by the
+        #   user. The component will replace the %{count} placeholder with the number of files selected. This uses
+        #   the govuk-frontend pluralisation rules. If javascript is not provided, this option will be ignored.
+        # @param multiple_files_chosen_one_text [String] The text displayed when JavaScript is enabled and one file
+        #   has been chosen by the user. The component will replace the %{count} placeholder with the number of files
+        #   selected. This can also be set by passing a hash with key +one:+ to +multiple_files_chosen_text+.
+        # @param multiple_files_chosen_other_text [String] The text displayed when JavaScript is enabled and multiple
+        #   files have been chosen by the user. The component will replace the %{count} placeholder with the number of
+        #   files selected. This can also be set by passing a hash with key +other:+ to +multiple_files_chosen_text+.
+        # @param no_file_chosen_text [String] The text displayed when no file has been chosen by the user. Default is
+        #   "No file chosen". If javascript is not provided, this option will be ignored.
+        # @param entered_drop_zone_text [String] The text announced by assistive technology when user drags files and
+        #   enters the drop zone. Default is "Entered drop zone". If javascript is not provided, this option will be
+        #   ignored.
+        # @param left_drop_zone_text [String] The text announced by assistive technology when user drags files and
+        #   leaves the drop zone without dropping. Default is "Left drop zone". If javascript is not provided, this
+        #   option will be ignored.
+        # @param upload_succeeded_text [String] The status shown in a figure's caption when its direct upload
+        #   completes. Default is "Uploaded successfully". If javascript is not provided, this option will be ignored.
+        # @param upload_failed_text [String] The status shown in a figure's caption when its direct upload fails.
+        #   Default is "Upload failed — try again". If javascript is not provided, this option will be ignored.
+        # @param retry_button_text [String] The label of the retry control offered on a failed upload. Default is
+        #   "Try again". If javascript is not provided, this option will be ignored.
+        # @param file_removed_text [String] The text announced by assistive technology when a figure is removed. The
+        #   component will replace the %{filename} placeholder with the removed file's name. Default is
+        #   "%{filename} removed". If javascript is not provided, this option will be ignored.
+        # @param remove_button_text [String] The accessible name of each figure's remove control and the text of its
+        #   no-JavaScript remove option. The component will replace the %{filename} placeholder with the figure's
+        #   file name. Default is "Remove %{filename}".
+        # @param remove_button_content_text [String] The visible content of each figure's remove button. Default is
+        #   "Remove".
+        # @param & [Block] arbitrary HTML that will be rendered between the hint and the input
+        #
+        # @example A photo upload field with file type specifier and injected content
+        #   = f.govuk_attachment_field :photo, label: { text: 'Upload your photo' }, accept: 'image/*' do
+        #
+        #     p.govuk-inset-text
+        #       | Explicit images will result in account termination
+        #
+        # @example A CV upload field with label as a proc
+        #   = f.govuk_attachment_field :cv, label: -> { tag.h3('Upload your CV') }
+        #
+        # @see https://design-system.service.gov.uk/components/file-upload/ GOV.UK file upload
+        # @see https://design-system.service.gov.uk/styles/typography/#headings-with-captions Headings with captions
+        # @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file MDN documentation for file upload
+        def govuk_attachment_field(
+          attribute_name,
+          label: {},
+          caption: {},
+          hint: {},
+          form_group: {},
+          before_input: nil,
+          after_input: nil,
+          choose_files_button_text: nil,
+          drop_instruction_text: nil,
+          multiple_files_chosen_text: nil,
+          multiple_files_chosen_one_text: nil,
+          multiple_files_chosen_other_text: nil,
+          no_file_chosen_text: nil,
+          entered_drop_zone_text: nil,
+          left_drop_zone_text: nil,
+          upload_succeeded_text: nil,
+          upload_failed_text: nil,
+          retry_button_text: nil,
+          file_removed_text: nil,
+          remove_button_text: nil,
+          remove_button_content_text: nil,
+          direct_upload: true,
+          direct_upload_url: (self.direct_upload_url if direct_upload),
+          **,
+          &
+        )
+          Elements::Attachment.new(
+            self,
+            object_name,
+            attribute_name,
+            label:,
+            caption:,
+            hint:,
+            form_group:,
+            before_input:,
+            after_input:,
+            direct_upload_url:,
+            choose_files_button_text:,
+            drop_instruction_text:,
+            multiple_files_chosen_text:,
+            multiple_files_chosen_one_text:,
+            multiple_files_chosen_other_text:,
+            no_file_chosen_text:,
+            entered_drop_zone_text:,
+            left_drop_zone_text:,
+            upload_succeeded_text:,
+            upload_failed_text:,
+            retry_button_text:,
+            file_removed_text:,
+            remove_button_text:,
+            remove_button_content_text:,
+            **,
+            &
+          ).html
+        end
+
         # Generates a file input element for uploading documents.
         #
         # @example A upload field with label as a proc
@@ -261,9 +394,15 @@ module Katalyst
                                  mime_types: config.document_mime_types,
                                  **,
                                  &)
-          Elements::Document.new(
-            self, object_name, attribute_name, label:, caption:, hint:, form_group:, mime_types:, **, &
-          ).html
+          if config.use_legacy_file_fields
+            Elements::Document.new(
+              self, object_name, attribute_name, label:, caption:, hint:, form_group:, mime_types:, **, &
+            ).html
+          else
+            govuk_attachment_field(
+              attribute_name, label:, caption:, hint:, form_group:, accept: mime_types&.join(","), **, &
+            )
+          end
         end
 
         # Generates a file input element with a preview for uploading images.
@@ -309,9 +448,15 @@ module Katalyst
                               mime_types: config.image_mime_types,
                               **,
                               &)
-          Elements::Image.new(
-            self, object_name, attribute_name, label:, caption:, hint:, form_group:, mime_types:, **, &
-          ).html
+          if config.use_legacy_file_fields
+            Elements::Image.new(
+              self, object_name, attribute_name, label:, caption:, hint:, form_group:, mime_types:, **, &
+            ).html
+          else
+            govuk_attachment_field(
+              attribute_name, label:, caption:, hint:, form_group:, accept: mime_types&.join(","), **, &
+            )
+          end
         end
 
         # Keep track of whether we are inside a fieldset
@@ -320,8 +465,31 @@ module Katalyst
           @fieldset_context ||= []
         end
 
+        # URL for an attachment preview. ActiveStorage's representation route
+        # lives in the application's route set, so engine-mounted forms
+        # resolve it through main_app. Returns nil when no route is
+        # available, in which case the figure renders without a preview.
+        #
+        # @param [ActiveStorage::Variant,ActiveStorage::VariantWithRecord,ActiveStorage::Preview] representation
+        # @return [String,nil]
+        def attachment_preview_url(representation)
+          if @template.respond_to?(:rails_representation_path)
+            @template.rails_representation_path(representation)
+          elsif @template.respond_to?(:main_app) && @template.main_app.respond_to?(:rails_representation_path)
+            @template.main_app.rails_representation_path(representation)
+          end
+        end
+
         private
 
+        def direct_upload_url
+          if @template.respond_to?(:rails_direct_uploads_url)
+            @template.rails_direct_uploads_url
+          elsif @template.respond_to?(:main_app) && @template.main_app.respond_to?(:rails_direct_uploads_url)
+            @template.main_app.rails_direct_uploads_url
+          end
+        end
+
         def enum_values(attribute_name)
           object.class.defined_enums[attribute_name.to_s].keys
         end

data/app/helpers/katalyst/govuk/form_builder/elements/attachment.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+      module Elements
+        class Attachment < GOVUKDesignSystemFormBuilder::Elements::File
+          include FormBuilder::Traits::Attachment
+
+          def initialize(builder, object_name, attribute_name, direct_upload_url:,
+                         upload_succeeded_text: nil, upload_failed_text: nil,
+                         retry_button_text: nil, file_removed_text: nil,
+                         remove_button_text: nil, remove_button_content_text: nil, **, &)
+            super(builder, object_name, attribute_name, javascript: true, **, &)
+
+            @direct_upload_url          = direct_upload_url
+            @upload_succeeded_text      = upload_succeeded_text
+            @upload_failed_text         = upload_failed_text
+            @retry_button_text          = retry_button_text
+            @file_removed_text          = file_removed_text
+            @remove_button_text         = remove_button_text
+            @remove_button_content_text = remove_button_content_text
+
+            raise ArgumentError, "Unsupported attribute type #{value.class} for #{attribute_name}" unless attachment?
+          end
+
+          def options
+            super.merge(
+              "data-direct-upload-url" => @direct_upload_url,
+              include_hidden: false, # we always render remove_field
+              multiple: many?,
+            )
+          end
+
+          private
+
+          # Extends the file element's data-i18n.* attributes with the
+          # attachment strings: an explicit option wins, else the current
+          # locale's translation. When neither adds anything beyond the
+          # gem's en defaults the attribute is omitted and the JS falls
+          # back to its bundled mirror of the same table.
+          def i18n_data
+            super.merge({
+              "data-i18n.upload-succeeded"      => attachment_text(@upload_succeeded_text, :upload_succeeded),
+              "data-i18n.upload-failed"         => attachment_text(@upload_failed_text, :upload_failed),
+              "data-i18n.retry-button"          => attachment_text(@retry_button_text, :retry_button),
+              "data-i18n.file-removed"          => attachment_text(@file_removed_text, :file_removed),
+              "data-i18n.remove-button"         => attachment_text(@remove_button_text, :remove_button),
+              "data-i18n.remove-button-content" => attachment_text(@remove_button_content_text, :remove_button_content),
+            }.compact)
+          end
+
+          def attachment_text(option, key)
+            return option if option
+
+            text = attachment_translation(key)
+            text unless text == Traits::Attachment::BUNDLED_DEFAULTS[key.to_s]
+          end
+
+          def file
+            safe_join([remove_field, attachment, @builder.file_field(@attribute_name, attributes(@html_attributes))])
+          end
+
+          def file_with_javascript_markup
+            tag.div(class: "#{brand}-file-upload-wrapper", data: { controller: "govuk-file-upload" }, **i18n_data) do
+              file
+            end
+          end
+
+          # A removed figure takes its select with it and an empty file input contributes
+          # no value. This input ensures that there's always a value to process so that
+          # attachments can be removed (both one? and many? cases).
+          def remove_field
+            tag.input(name: @builder.field_name(@attribute_name, multiple: many?), type: "hidden", value: "")
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/katalyst/govuk/form_builder/frontend.rb

@@ -4,18 +4,30 @@ module Katalyst
   module GOVUK
     module FormBuilder
       module Frontend
+        # Marks the page as JS-capable and enhances govuk-frontend components,
+        # on load and as the DOM changes (Turbo morphs, lazily-loaded frames,
+        # stream inserts). Render at the end of <body>; on a Turbo replace
+        # render the snippet re-executes with the new body, and everything it
+        # sets up is scoped to the body element it ran against.
         # rubocop:disable Rails/OutputSafety
         def govuk_formbuilder_init
           tag.script type: "module", nonce: request.content_security_policy_nonce do
             <<~JS.html_safe
-              document.body.classList.toggle("js-enabled", true);
-              document.body.classList.toggle("govuk-frontend-supported", ('noModule' in HTMLScriptElement.prototype));
               import {initAll} from "@katalyst/govuk-formbuilder";
-              initAll();
+              initAll(#{govuk_formbuilder_init_options});
             JS
           end
         end
         # rubocop:enable Rails/OutputSafety
+
+        private
+
+        # The bundle's own default is govuk; only a non-default brand renders.
+        def govuk_formbuilder_init_options
+          brand = GOVUKDesignSystemFormBuilder.brand
+
+          brand.to_s == "govuk" ? "" : "{brand: #{brand.to_json}}"
+        end
       end
     end
   end

data/app/helpers/katalyst/govuk/form_builder/traits/attachment.rb

@@ -0,0 +1,215 @@
+# frozen_string_literal: true
+
+require "govuk_design_system_formbuilder"
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+      module Traits
+        # Generates attachment inputs and previews for ActiveStorage associations.
+        module Attachment
+          extend ActiveSupport::Concern
+
+          include ActionView::Helpers::NumberHelper
+
+          # The attachment strings' canonical home (config/locales).
+          I18N_SCOPE = %i[katalyst govuk attachment].freeze
+
+          # The gem's own en strings, read straight from its locale file:
+          # resolving them through I18n would absorb a host app's en
+          # overrides, and this table is the baseline those overrides are
+          # detected against.
+          BUNDLED_DEFAULTS = YAML.load_file(
+            Engine.root.join("config/locales/en.yml"),
+          ).dig("en", *I18N_SCOPE.map(&:to_s)).freeze
+
+          def attachment?
+            value.is_a?(ActiveStorage::Attached)
+          end
+
+          def one?
+            value.is_a?(ActiveStorage::Attached::One)
+          end
+
+          def many?
+            value.is_a?(ActiveStorage::Attached::Many)
+          end
+
+          def value
+            @builder.object.send(@attribute_name)
+          end
+
+          delegate :attached?, to: :value
+
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment
+            return unless attached?
+
+            # Preserve unsaved multi-part form uploads before rendering
+            # mimics direct-upload for non-js consumers.
+            persist_pending_blobs
+
+            blobs = (one? ? [value.blob] : value.blobs).select(&:persisted?)
+            safe_join(blobs.map { |blob| attachment_for(blob) })
+          end
+
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment_for(blob)
+            tag.figure(class: "#{brand}-attachment",
+                       aria:  { labelledby: attachment_id_for(blob, :filename) },
+                       data:  { controller: "govuk-attachment" }) do
+              safe_join([
+                          attachment_preview_for(blob),
+                          attachment_caption_for(blob),
+                          attachment_actions_for(blob),
+                        ])
+            end
+          end
+
+          # A <div> with form elements for managing the attachment.
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer|nil]
+          def attachment_actions_for(blob)
+            return if blob.nil?
+
+            tag.div(class: "actions") do
+              safe_join([
+                          attachment_input_for(blob),
+                          attachment_remove_for(blob),
+                        ])
+            end
+          end
+
+          # A <select> with options to keep or remove the attachment that can be used without JavaScript.
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment_input_for(blob)
+            @builder.select(
+              @attribute_name,
+              [[blob.filename.to_s, blob.signed_id],
+               [remove_button_label(blob), ""]],
+              { selected: blob.signed_id },
+              id:   attachment_id_for(blob, :input),
+              name: @builder.field_name(@attribute_name, multiple: many?),
+              aria: { labelledby: attachment_id_for(blob, :filename) },
+            )
+          end
+
+          # A <button> that will remove the attachment when clicked (requires javascript).
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment_remove_for(blob)
+            tag.button(remove_button_content,
+                       type:  "button",
+                       class: "#{brand}-button #{brand}-button--secondary #{brand}-attachment__remove",
+                       aria:  { label: remove_button_label(blob) },
+                       data:  { action: "govuk-attachment#destroy", module: "govuk-button" })
+          end
+
+          # The remove strings render here and in the JS figure template, so
+          # both draw from the same options (or matching defaults) — the two
+          # figure sources must stay string-identical.
+          # @param [ActiveStorage::Blob] blob
+          # @return [String]
+          def remove_button_label(blob)
+            if @remove_button_text
+              # %{filename} is the option placeholder (govuk-frontend's i18n
+              # convention), substituted directly — not a Ruby format token.
+              # rubocop:disable Style/FormatStringToken
+              @remove_button_text.gsub("%{filename}", blob.filename.to_s)
+              # rubocop:enable Style/FormatStringToken
+            else
+              attachment_translation(:remove_button, filename: blob.filename.to_s)
+            end
+          end
+
+          # @return [String]
+          def remove_button_content
+            @remove_button_content_text || attachment_translation(:remove_button_content)
+          end
+
+          # The current locale's translation, falling back to the gem's en
+          # defaults rather than a "translation missing" marker.
+          # @return [String]
+          def attachment_translation(key, **)
+            I18n.t(key, scope: I18N_SCOPE, default: nil, **) ||
+              I18n.t(key, scope: I18N_SCOPE, locale: :en, **)
+          end
+
+          # The representation is rendered lazily: the variant is processed
+          # when the browser requests it, never during the form render. If the
+          # blob's bytes turn out to be missing or unprocessable the preview
+          # simply fails to load — validating attachment content is the
+          # model's responsibility, not the form's.
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment_preview_for(blob)
+            return unless blob.representable?
+
+            url = @builder.attachment_preview_url(
+              blob.representation(config.attachment_preview_representation),
+            )
+            return if url.nil?
+
+            # Setting alt to "" as the details already describe the attachment, equivalent to role="presentation"
+            @builder.image_tag(url, alt: "", class: "preview")
+          end
+
+          # The caption is a polite atomic live region: JS writes upload status
+          # into the status span, and the announcement reads the whole caption
+          # so the user hears which file the status belongs to.
+          # @param [ActiveStorage::Blob] blob
+          # @return [ActiveSupport::SafeBuffer,nil]
+          def attachment_caption_for(blob)
+            tag.figcaption(class: "caption", aria: { atomic: true, live: "polite" }) do
+              safe_join([
+                          tag.span(blob.filename, id: attachment_id_for(blob, :filename), class: "filename"),
+                          " ",
+                          tag.span(number_to_human_size(blob.byte_size), class: "size"),
+                          " ",
+                          tag.span(class: "status"),
+                        ])
+            end
+          end
+
+          # @param [ActiveStorage::Blob] blob
+          # @return [String,nil]
+          def attachment_id_for(blob, *suffixes)
+            return nil if @html_attributes.fetch(:skip_default_ids, false)
+
+            @builder.field_id(@attribute_name, :attachment, blob.id, *suffixes)
+          end
+
+          private
+
+          def persist_pending_blobs
+            case (change = @builder.object.attachment_changes[@attribute_name.to_s])
+            when ActiveStorage::Attached::Changes::CreateOne
+              persist_pending_change(change)
+            when ActiveStorage::Attached::Changes::CreateMany
+              change.pending_uploads.each do |subchange|
+                persist_pending_change(subchange)
+              end
+            end
+          end
+
+          def persist_pending_change(change)
+            change.upload
+            change.blob.save!
+          rescue ActiveStorage::Error, Errno::ENOENT => e
+            # no recovery available (ENOENT: tempfile vanished before render)
+            log_dropped_upload(e)
+          end
+
+          def log_dropped_upload(error)
+            Rails.logger.warn(
+              "Dropped pending attachment for " \
+              "#{@builder.object.class}##{@attribute_name}: #{error.class}: #{error.message}",
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/config/importmap.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 pin "@katalyst/govuk-formbuilder", to: "katalyst/govuk/formbuilder.js"
+pin "@rails/activestorage", to: "activestorage.esm.js"
 
 pin_all_from Katalyst::GOVUK::FormBuilder::Engine.root.join("app/assets/javascripts"),
              # preload in tests so that we don't start clicking before controllers load

data/config/locales/en.yml

@@ -0,0 +1,16 @@
+# The attachment field's string defaults — the canonical vocabulary.
+# The JS bundle carries a mirror of this table as its offline defaults
+# (app/javascript/katalyst/govuk/config.js); keep the two in step.
+# Strings that differ from these defaults — a translation, or a host
+# app's override in any locale, en included — render onto the field's
+# data-i18n.* attributes, where the JS enhancement reads them.
+en:
+  katalyst:
+    govuk:
+      attachment:
+        upload_succeeded: "Uploaded successfully"
+        upload_failed: "Upload failed — try again"
+        retry_button: "Try again"
+        file_removed: "%{filename} removed"
+        remove_button: "Remove %{filename}"
+        remove_button_content: "Remove"