From 5a86c69affae5a59bc38e5b280bb1cc0cd89b624 Mon Sep 17 00:00:00 2001 From: Stephen Daly Date: Tue, 31 Mar 2026 10:58:37 +0100 Subject: [PATCH 1/2] NEEDS TRANSLATION - Use JavaScript enhanced file upload component Pass in `javascript: true` to the file component to use the JavaScript enhanced file upload component. This is using placeholder translations copied from some examples in the govuk-frontend repository that are not production ready. We need to update with verified translations before we can merge this. Requires a new release of govuk-formbuilder with https://github.com/x-govuk/govuk-form-builder/commit/b156fe78df8f74dc1574b16449d0515a9ddcd174 --- app/components/question/file_component/view.html.erb | 8 +++++++- config/locales/cy.yml | 7 +++++++ config/locales/en.yml | 7 +++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/app/components/question/file_component/view.html.erb b/app/components/question/file_component/view.html.erb index b9147efc9..ab6f98910 100644 --- a/app/components/question/file_component/view.html.erb +++ b/app/components/question/file_component/view.html.erb @@ -7,5 +7,11 @@ text: question.hint_text, class: "govuk-!-margin-bottom-7" }, - accept: Question::File::FILE_TYPES.join(", ") + choose_files_button_text: t("govuk_design_system_formbuilder.govuk_file_field.choose_files_button_text"), + drop_instruction_text: t("govuk_design_system_formbuilder.govuk_file_field.drop_instruction_text"), + no_file_chosen_text: t("govuk_design_system_formbuilder.govuk_file_field.no_file_chosen_text"), + entered_drop_zone_text: t("govuk_design_system_formbuilder.govuk_file_field.entered_drop_zone_text"), + left_drop_zone_text: t("govuk_design_system_formbuilder.govuk_file_field.left_drop_zone_text"), + accept: Question::File::FILE_TYPES.join(", "), + javascript: true %> diff --git a/config/locales/cy.yml b/config/locales/cy.yml index 26280e048..293f51673 100644 --- a/config/locales/cy.yml +++ b/config/locales/cy.yml @@ -412,6 +412,13 @@ cy: govuk_components: govuk_summary_list: change: Newid + govuk_design_system_formbuilder: + govuk_file_field: + choose_files_button_text: Dewiswch ffeil + drop_instruction_text: neu ollwng ffeil + entered_drop_zone_text: Wedi mynd i mewn i'r parth gollwng + left_drop_zone_text: Parth gollwng i'r chwith + no_file_chosen_text: Dim ffeil wedi'i dewis helpers: error: message_prefix: Gwall diff --git a/config/locales/en.yml b/config/locales/en.yml index 8e31fa3ef..01f7f3d9e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -412,6 +412,13 @@ en: govuk_components: govuk_summary_list: change: Change + govuk_design_system_formbuilder: + govuk_file_field: + choose_files_button_text: Choose file + drop_instruction_text: or drop file + entered_drop_zone_text: Entered drop zone + left_drop_zone_text: Left drop zone + no_file_chosen_text: No file chosen helpers: error: message_prefix: Error From d7eb921667c722b628dbdf1f65d771464d5914df Mon Sep 17 00:00:00 2001 From: Stephen Daly Date: Tue, 31 Mar 2026 12:21:45 +0100 Subject: [PATCH 2/2] Make feature test work with enhanced file upload component With javascript enabled, the file input is hidden and replaced with a custom file upload component. Update the test to expect a hidden file input. As the label is no longer attached to the file input, don't provide a "locator" argument to `attach_file` and allow it to find the only file input on the page. --- spec/features/fill_in_file_upload_question_spec.rb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/spec/features/fill_in_file_upload_question_spec.rb b/spec/features/fill_in_file_upload_question_spec.rb index d5505c5a9..b1515b8e5 100644 --- a/spec/features/fill_in_file_upload_question_spec.rb +++ b/spec/features/fill_in_file_upload_question_spec.rb @@ -116,11 +116,12 @@ def then_i_should_see_the_first_question end def then_i_see_the_file_upload_component - expect(page).to have_css("input[type=file]") + expect(page).to have_css("input[type=file]", visible: :hidden) + expect(page).to have_css("[data-module='govuk-file-upload']") end def when_i_upload_a_file - attach_file question_text, test_file + attach_file test_file, make_visible: true end def and_i_click_on_continue @@ -177,6 +178,6 @@ def and_an_email_submission_should_have_been_sent def then_i_see_an_error_message_that_the_file_contains_a_virus expect(page.find(".govuk-error-summary")).to have_text "The selected file contains a virus" - expect(page).to have_css("input[type=file]") + expect(page).to have_css("input[type=file]", visible: :hidden) end end