#EXUI-1832: 'Choose file' and 'no file chosen' not being sent via Wesh translation API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.1.28",
+  "version": "7.1.28-exui-1832-rc2",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.1.28",
+  "version": "7.1.28-exui-1832-rc2",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-write.component.scss

@@ -1 +1,15 @@
+.input-upload-file {
+  width: 100%;
+  display: none;
+}
+
+.upload-file-container {
+  display: flex;
+  align-items: baseline;
+}
+
+.input-label {
+  width: 8rem;
+}
+
 @import "../base-field/grey-bar.scss";

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.component.spec.ts

@@ -281,6 +281,8 @@ describe('WriteDocumentFieldComponent', () => {
         ]
       }
     });
+
+    expect(component.fileName).toBe('test.pdf')
     expect(component.caseField.value.document_filename).toBe('test.pdf');
   });
 

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.component.ts

@@ -18,7 +18,8 @@ import { FileUploadStateService } from './file-upload-state.service';
 
 @Component({
   selector: 'ccd-write-document-field',
-  templateUrl: './write-document-field.html'
+  templateUrl: './write-document-field.html',
+  styleUrls: ['./../base-field/field-write.component.scss']
 })
 export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent implements OnInit, OnDestroy {
   public static readonly DOCUMENT_URL = 'document_url';
@@ -45,6 +46,7 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
   public dialogSubscription: Subscription;
   public caseNotifierSubscription: Subscription;
   public jurisdictionSubs: Subscription;
+  public fileName = 'No file chosen';
 
   private uploadedDocument: FormGroup;
   private dialogConfig: MatDialogConfig;
@@ -128,6 +130,7 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
       this.invalidFileFormat();
     } else if (fileInput.target.files[0]) {
       this.selectedFile = fileInput.target.files[0];
+      this.fileName = fileInput.target.files[0].name;
       this.displayFileUploadMessages(WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS);
       const documentUpload: FormData = this.buildDocumentUploadData(this.selectedFile);
       this.fileUploadStateService.setUploadInProgress(true);
@@ -260,7 +263,7 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
     if (documentHash) {
       this.uploadedDocument.get(WriteDocumentFieldComponent.DOCUMENT_HASH).setValue(documentHash);
     }
-    if(this.uploadedDocument.get(WriteDocumentFieldComponent.UPLOAD_TIMESTAMP)){
+    if (this.uploadedDocument.get(WriteDocumentFieldComponent.UPLOAD_TIMESTAMP)) {
       this.uploadedDocument.removeControl(WriteDocumentFieldComponent.UPLOAD_TIMESTAMP);
     }
   }
@@ -272,7 +275,7 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
       document_filename: new FormControl(document.document_filename, Validators.required)
     };
 
-    if(document.upload_timestamp && (typeof document.upload_timestamp === 'string' )){
+    if (document.upload_timestamp && (typeof document.upload_timestamp === 'string')) {
       documentFormGroup = {
         ...documentFormGroup,
         ...{ upload_timestamp: new FormControl(document.upload_timestamp) }
@@ -294,7 +297,7 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
       document_filename: new FormControl(document.document_filename)
     };
 
-    if(document.upload_timestamp && (typeof document.upload_timestamp === 'string' )){
+    if (document.upload_timestamp && (typeof document.upload_timestamp === 'string')) {
       documentFormGroup = {
         ...documentFormGroup,
         ...{ upload_timestamp: new FormControl(document.upload_timestamp) }

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.html

@@ -1,21 +1,60 @@
 <div class="form-group" [ngClass]="{'form-group-error bottom-30': !valid}">
   <label [for]="id()">
-    <span class="form-label" attr.aria-label="{{caseField | ccdFieldLabel}}">{{(caseField | ccdFieldLabel)}}</span>
+    <span class="form-label" attr.aria-label="{{caseField | ccdFieldLabel}}"
+      >{{(caseField | ccdFieldLabel)}}</span
+    >
   </label>
-  <span class="form-hint" *ngIf="caseField.hint_text">{{caseField.hint_text | rpxTranslate}}</span>
-  <span class="error-message" *ngIf="fileUploadMessages && !valid">{{fileUploadMessages | rpxTranslate}}</span>
+  <span class="form-hint" *ngIf="caseField.hint_text"
+    >{{caseField.hint_text | rpxTranslate}}</span
+  >
+  <span class="error-message" *ngIf="fileUploadMessages && !valid"
+    >{{fileUploadMessages | rpxTranslate}}</span
+  >
 
   <div>
     <!--<span *ngIf="getUploadedFileName()" class="text-16">File name: {{getUploadedFileName()}}</span>-->
-    <ccd-read-document-field *ngIf="caseField" [caseField]="caseField"></ccd-read-document-field>
+    <ccd-read-document-field
+      *ngIf="caseField"
+      [caseField]="caseField"
+    ></ccd-read-document-field>
   </div>
 
-  <div style='position:relative'>
-    <div [id]="createElementId('fileInputWrapper')" (click)="fileSelectEvent()" (keyup)="fileSelectEvent()"></div>
-    <input class="form-control bottom-30" [id]="id()" type="file" (keydown.Tab)="fileValidationsOnTab()" (change)="fileChangeEvent($event, caseField.field_type.regular_expression)"
-           accept="{{caseField.field_type.regular_expression}}" #fileInput/>
+  <div style="position: relative">
+    <div
+      [id]="createElementId('fileInputWrapper')"
+      (click)="fileSelectEvent()"
+      (keyup)="fileSelectEvent()"
+    ></div>
+    <div class="upload-file-container">
+      <label
+        [for]="id()"
+        class="button button-secondary input-label"
+        aria-label="Choose file"
+        >{{'Choose file' | rpxTranslate}}</label
+      >
+      <span class="form-control bottom-30">
+        <span>{{fileName | rpxTranslate}}</span>
+      </span>
+    </div>
+    <input
+      [id]="id()"
+      type="file"
+      class="input-upload-file"
+      (keydown.Tab)="fileValidationsOnTab()"
+      (change)="fileChangeEvent($event, caseField.field_type.regular_expression)"
+      accept="{{caseField.field_type.regular_expression}}"
+      #fileInput
+    />
   </div>
 </div>
 <div class="form-group bottom-30">
-  <button class="button button-secondary" type="button" aria-label="Cancel upload" (click)="cancelUpload()" [disabled]="!isUploadInProgress()">{{'Cancel upload' | rpxTranslate}}</button>
+  <button
+    class="button button-secondary"
+    type="button"
+    aria-label="Cancel upload"
+    (click)="cancelUpload()"
+    [disabled]="!isUploadInProgress()"
+  >
+    {{'Cancel upload' | rpxTranslate}}
+  </button>
 </div>