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
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