Fix/df 1069 file upload: Handles translations

src/client/javascripts/file-upload.js

@@ -305,17 +305,19 @@ function pollUploadStatus(uploadId) {
  * @param {HTMLButtonElement} uploadButton - The upload button
  * @param {HTMLButtonElement} continueButton - The continue button
  * @param {File[]} selectedFiles - The selected files
+ * @param {string} uploadingLabel - The text to display while uploading (can be multiple languages)
  */
 function handleStandardFormSubmission(
   formElement,
   fileInput,
   uploadButton,
   continueButton,
-  selectedFiles
+  selectedFiles,
+  uploadingLabel
 ) {
   // Render in reverse so first file ends up at the top of the summary list
   for (let i = selectedFiles.length - 1; i >= 0; i--) {
-    renderSummary(selectedFiles[i], 'Uploading…', formElement)
+    renderSummary(selectedFiles[i], uploadingLabel, formElement)
   }
 
   fileInput.focus()
@@ -405,6 +407,10 @@ function initUpload() {
     return
   }
 
+  const uploadingLabel =
+    document.getElementById('uploadedFilesContainer')?.dataset.uploadinglabel ??
+    'Uploading…'
+
   const formElement = /** @type {HTMLFormElement} */ (form)
   /** @type {File[]} */
   let selectedFiles = []
@@ -445,7 +451,8 @@ function initUpload() {
       fileInput,
       uploadButton,
       continueButton,
-      selectedFiles
+      selectedFiles,
+      uploadingLabel
     )
 
     handleAjaxFormSubmission(

src/server/plugins/engine/components/FileUploadField.test.ts

@@ -332,7 +332,7 @@ describe('FileUploadField', () => {
           format: 'summary'
         })
 
-        expect(answer1).toBe('3 files uploaded')
+        expect(answer1).toBe('Uploaded 3 files')
         expect(answer2).toBe('')
       })
 

src/server/plugins/engine/components/FileUploadField.ts

@@ -169,7 +169,7 @@ export class FileUploadField extends FormComponent {
       return ''
     }
 
-    return translator.t('components.fileUploadField.filesCount', {
+    return translator.t('pages.summary.fileUpload', {
       count: files.length
     })
   }
@@ -244,7 +244,7 @@ export class FileUploadField extends FormComponent {
 
         items.push({
           href,
-          text: 'Remove',
+          text: t('pages.fileUpload.remove'),
           classes: 'govuk-link--no-visited-state',
           attributes: { id: `${id}__${index}` },
           visuallyHiddenText: file.filename

src/server/plugins/engine/components/types.ts

@@ -124,6 +124,7 @@ export interface ViewModel extends Record<string, unknown> {
   upload?: {
     count: number
     summaryList: SummaryList
+    uploadingLabel?: string
   }
 }
 

src/server/plugins/engine/i18n/translations/cy.json

@@ -60,6 +60,12 @@
       "totalAmount": "Cyfanswm",
       "reference": "Cyfeirnod",
       "dateOfPayment": "Dyddiad talu",
+      "fileUpload_zero": "Ni uwchlwythwyd unrhyw ffeiliau",
+      "fileUpload_one": "Uwchlwythwyd [[count]] ffeil",
+      "fileUpload_two": "Uwchlwythwyd dwy feil",
+      "fileUpload_few": "Uwchlwythwyd [[count]] ffeil",
+      "fileUpload_many": "Uwchlwythwyd [[count]] o ffeiliau",
+      "fileUpload_other": "Uwchlwythwyd [[count]] ffeil",
       "submissionFailed": "Roedd problem ac ni chyflwynwyd eich ffurflen. Ceisiwch gyflwyno'r ffurflen eto",
       "submissionFailedContactSuffix": " neu gallwch [[contactUsLink]] a dyfynnu'ch cyfeirnod i drefnu ad-daliad",
       "contactUsLinkText": "cysylltu â ni (yn agor mewn tab newydd)",
@@ -79,17 +85,34 @@
       "change": "Newid",
       "notProvided": "Heb ei ddarparu",
       "visuallyHiddenItem": "eitem [[index]]",
+      "pageTitle_zero": "Nid ydych wedi ychwanegu unrhyw atebion",
       "pageTitle_one": "Rydych wedi ychwanegu [[count]] ateb",
+      "pageTitle_two": "Rydych wedi ychwanegu dau ateb",
+      "pageTitle_few": "Rydych wedi ychwanegu [[count]] ateb",
+      "pageTitle_many": "Rydych wedi ychwanegu [[count]] o atebion",
       "pageTitle_other": "Rydych wedi ychwanegu [[count]] ateb",
+      "tooMany_zero": "Ni allwch ychwanegu unrhyw atebion",
       "tooMany_one": "Dim ond hyd at [[count]] ateb y gallwch ei ychwanegu",
+      "tooMany_two": "Dim ond hyd at ddau gateb y gallwch eu hychwanegu",
+      "tooMany_few": "Dim ond hyd at [[count]] ateb y gallwch eu hychwanegu",
+      "tooMany_many": "Dim ond hyd at [[count]] o atebion y gallwch eu hychwanegu",
       "tooMany_other": "Dim ond hyd at [[count]] ateb y gallwch eu hychwanegu",
+      "tooFew_zero": "Rhaid i chi ychwanegu atebion",
       "tooFew_one": "Rhaid i chi ychwanegu o leiaf [[count]] ateb",
+      "tooFew_two": "Rhaid i chi ychwanegu o leiaf ddau gateb",
+      "tooFew_few": "Rhaid i chi ychwanegu o leiaf [[count]] ateb",
+      "tooFew_many": "Rhaid i chi ychwanegu o leiaf [[count]] o atebion",
       "tooFew_other": "Rhaid i chi ychwanegu o leiaf [[count]] ateb"
     },
 
     "fileUpload": {
       "upload": "Uwchlwytho ffeil",
-      "maxFilesReached": "Rydych wedi cyrraedd nifer uchaf y ffeiliau. Tynnwch ffeil i uwchlwytho rhagor."
+      "maxFilesReached": "Rydych wedi cyrraedd nifer uchaf y ffeiliau. Tynnwch ffeil i uwchlwytho rhagor.",
+      "remove": "Tynnu",
+      "removeFileTitle": "Ydych chi'n siŵr eich bod chi eisiau dileu'r ffeil hon?",
+      "removeFileBody": "Ni allwch adfer ffeiliau a dynnwyd.",
+      "removeFileButton": "Dileu ffeil",
+      "cancel": "Canslo"
     },
 
     "exit": {
@@ -135,7 +158,11 @@
     "findAnAddressInstead": "dod o hyd i gyfeiriad yn lle hynny",
     "noAddressFoundTitle": "Ni chanfuwyd cyfeiriad",
     "noAddressFoundBody": "Ni allem ddod o hyd i gyfeiriad cyfatebol",
+    "addressFound_zero": "Ni chanfuwyd unrhyw gyfeiriadau ar gyfer",
     "addressFound_one": "Canfuwyd [[count]] cyfeiriad ar gyfer",
+    "addressFound_two": "Canfuwyd dau gyfeiriad ar gyfer",
+    "addressFound_few": "Canfuwyd [[count]] chyfeiriad ar gyfer",
+    "addressFound_many": "Canfuwyd [[count]] o gyfeiriadau ar gyfer",
     "addressFound_other": "Canfuwyd [[count]] cyfeiriad ar gyfer",
     "validation": {
       "invalidPostcode": "Nodwch god post dilys neu nodwch gyfeiriad â llaw",
@@ -237,7 +264,11 @@
     },
 
     "geospatialField": {
+      "added_zero": "Ni ychwanegwyd unrhyw leoliadau",
       "added_one": "Ychwanegwyd [[count]] lleoliad",
+      "added_two": "Ychwanegwyd dau leoliad",
+      "added_few": "Ychwanegwyd [[count]] lleoliad",
+      "added_many": "Ychwanegwyd [[count]] o leoliadau",
       "added_other": "Ychwanegwyd [[count]] lleoliad",
       "validation": {
         "descriptionRequired": "Rhowch ddisgrifiad ar gyfer lleoliad [[count]]",
@@ -262,10 +293,15 @@
     },
 
     "fileUploadField": {
+      "uploading": "Yn uwchlwytho…",
       "uploaded": "Wedi'i uwchlwytho",
       "uploadFailed": "Roedd problem gyda'ch ffeiliau a uwchlwythwyd. Uwchlwythwch nhw eto cyn cyflwyno'r ffurflen.",
       "uploadedFilesHeading": "Ffeiliau a uwchlwythwyd",
+      "filesCount_zero": "Uwchlwythwyd [[count]] o ffeiliau",
       "filesCount_one": "Uwchlwythwyd [[count]] ffeil",
+      "filesCount_two": "Uwchlwythwyd [[count]] ffeil",
+      "filesCount_few": "Uwchlwythwyd [[count]] ffeil",
+      "filesCount_many": "Uwchlwythwyd [[count]] o ffeiliau",
       "filesCount_other": "Uwchlwythwyd [[count]] ffeil"
     },
 

src/server/plugins/engine/i18n/translations/en-GB.json

@@ -60,6 +60,8 @@
       "totalAmount": "Total amount",
       "reference": "Reference",
       "dateOfPayment": "Date of payment",
+      "fileUpload_one": "Uploaded [[count]] file",
+      "fileUpload_other": "Uploaded [[count]] files",
       "submissionFailed": "There was a problem and your form was not submitted. Try submitting the form again",
       "submissionFailedContactSuffix": " or you can [[contactUsLink]] and quote your reference number to arrange a refund",
       "contactUsLinkText": "contact us (opens in new tab)",
@@ -89,7 +91,12 @@
 
     "fileUpload": {
       "upload": "Upload file",
-      "maxFilesReached": "You have reached the maximum number of files. Please remove a file to upload more."
+      "maxFilesReached": "You have reached the maximum number of files. Please remove a file to upload more.",
+      "remove": "Remove",
+      "removeFileTitle": "Are you sure you want to remove this file?",
+      "removeFileBody": "You cannot recover removed files.",
+      "removeFileButton": "Remove file",
+      "cancel": "Cancel"
     },
 
     "exit": {
@@ -262,6 +269,7 @@
     },
 
     "fileUploadField": {
+      "uploading": "Uploading…",
       "uploaded": "Uploaded",
       "uploadFailed": "There was a problem with your uploaded files. Re-upload them before submitting the form again.",
       "uploadedFilesHeading": "Uploaded files",

src/server/plugins/engine/pageControllers/FileUploadPageController.ts

@@ -188,17 +188,19 @@ export class FileUploadPageController extends QuestionPageController {
 
       const { filename } = fileToRemove.status.form.file
 
-      const { t } = this.getTranslator(request)
+      const translator = this.getTranslator(request)
+      const { t } = translator
 
       return h.view(this.fileDeleteViewName, {
         ...viewModel,
         context,
         backLink: this.getBackLink(request, context, t),
-        pageTitle: `Are you sure you want to remove this file?`,
+        pageTitle: t('pages.fileUpload.removeFileTitle'),
         itemTitle: filename,
-        confirmation: { text: 'You cannot recover removed files.' },
-        buttonConfirm: { text: 'Remove file' },
-        buttonCancel: { text: 'Cancel' }
+        confirmation: { text: t('pages.fileUpload.removeFileBody') },
+        buttonConfirm: { text: t('pages.fileUpload.removeFileButton') },
+        buttonCancel: { text: t('pages.fileUpload.cancel') },
+        t
       } satisfies ItemDeletePageViewModel)
     }
   }
@@ -266,6 +268,7 @@ export class FileUploadPageController extends QuestionPageController {
   ): FeaturedFormPageViewModel {
     const { fileUpload } = this
     const { state } = context
+    const { t } = translator
 
     const upload = this.getUploadFromState(state)
 
@@ -277,6 +280,12 @@ export class FileUploadPageController extends QuestionPageController {
       ({ model }) => model.id === fileUpload.name
     )
 
+    formComponent.model.upload = {
+      count: formComponent.model.upload?.count ?? 0,
+      summaryList: formComponent.model.upload?.summaryList ?? { rows: [] },
+      uploadingLabel: t('components.fileUploadField.uploading')
+    }
+
     const index = components.indexOf(formComponent)
 
     const proxyUrl = getProxyUrlForLocalDevelopment(upload?.uploadUrl)
@@ -290,7 +299,8 @@ export class FileUploadPageController extends QuestionPageController {
       // Split out components before/after
       componentsBefore: components.slice(0, index),
       components: components.slice(index),
-      proxyUrl
+      proxyUrl,
+      t
     }
   }
 

src/server/plugins/engine/views/components/fileuploadfield.html

@@ -3,7 +3,7 @@
 {% macro FileUploadField(component) %}
   {% set upload = component.model.upload %}
 
-  <div id="uploadedFilesContainer">
+  <div id="uploadedFilesContainer" data-uploadinglabel="{{ upload.uploadingLabel }}">
     <h2 class="govuk-heading-m">{{ t('components.fileUploadField.uploadedFilesHeading') }}</h2>
     {% if upload.count %}
       <p class="govuk-body" role="alert">{{ t('components.fileUploadField.filesCount', { count: upload.count }) }}</p>

test/form/govuk-notify.test.js

@@ -235,7 +235,7 @@ describe('Submission journey test', () => {
 
           ## Upload your methodology statement
 
-          1 file uploaded:
+          Uploaded 1 file:
 
           * [test\\.pdf](https://forms-designer/file-download/5a76a1a3-bc8a-4bc0-859a-116d775c7f15)