va-file-input-multiple: update data for vaMultipleChange to return mo…

…re detail (BREAKING) va-file-input: fix bug with upload message not resetting
department-of-veterans-affairs · Jan 17, 2025 · 4e25562 · 4e25562
1 parent 2d2d0c5
commit 4e25562
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -3983,7 +3983,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Event emitted when any change to the file inputs occurs. Sends back an array of FileDetails
+          * Event emitted when any change to the file inputs occurs.  Sends back an object with the following data structure: `{ action: string, file: triggering file, state: files array }`  The action will be `'FILE_ADDED'`, `'FILE UPDATED'` or `'FILE_REMOVED'`
          */
         "onVaMultipleChange"?: (event: VaFileInputMultipleCustomEvent<any>) => void;
         /**

diff --git a/packages/web-components/src/components/va-file-input-multiple/va-file-input-multiple.tsx b/packages/web-components/src/components/va-file-input-multiple/va-file-input-multiple.tsx
@@ -86,7 +86,11 @@ export class VaFileInputMultiple {
 
   /**
    * Event emitted when any change to the file inputs occurs.
-   * Sends back an array of FileDetails
+   * 
+   * Sends back an object with the following data structure:
+   * `{ action: string, file: triggering file, state: files array }`
+   * 
+   * The action will be `'FILE_ADDED'`, `'FILE UPDATED'` or `'FILE_REMOVED'`
    */
   @Event() vaMultipleChange: EventEmitter;
 
@@ -178,13 +182,19 @@ export class VaFileInputMultiple {
   private handleChange(event: any, fileKey: number, pageIndex: number) {
     const newFile = event.detail.files[0];
     let filesArray:FileDetails[];
+    let action,
+        actionFile;
     if (newFile) {
       const fileObject = this.findFileByKey(fileKey);
       if (fileObject.file) {
         // Change file
+        action = 'FILE_UPDATED';
+        actionFile = newFile;
         fileObject.file = newFile;
       } else {
         // New file
+        action = 'FILE_ADDED';
+        actionFile = newFile;
         fileObject.file = newFile;
         fileObject.content = this.getAdditionalContent();
         this.fileKeyCounter++;
@@ -197,18 +207,25 @@ export class VaFileInputMultiple {
       filesArray = this.buildFilesArray(this.files.map(fileObj => fileObj.file), false, this.findIndexByKey(fileKey))
     } else {
       // Deleted file
+      action = 'FILE_REMOVED';
+      actionFile = this.files[pageIndex].file;
       this.files.splice(pageIndex, 1);
       const statusMessageDiv = this.el.shadowRoot.querySelector("#statusMessage");
       // empty status message so it is read when updated
       statusMessageDiv.textContent = ""
       setTimeout(() => {
         statusMessageDiv.textContent = "File removed."
       }, 1000);
-      filesArray = this.buildFilesArray(this.files.map(fileObj => fileObj.file), true)
+      filesArray = this.buildFilesArray(this.files.map(fileObj => fileObj.file), true);
     }
-
-    this.vaMultipleChange.emit(filesArray);
+    const result = {
+      action,
+      file: actionFile,
+      state: filesArray
+    }
+    this.vaMultipleChange.emit(result);
     this.files = Array.of(...this.files);
+    return;
   }
 
   public buildFilesArray (files: File[], deleted?: boolean, fileIndex?: number) {

diff --git a/packages/web-components/src/components/va-file-input/va-file-input.tsx b/packages/web-components/src/components/va-file-input/va-file-input.tsx
@@ -30,6 +30,12 @@ export class VaFileInput {
   private fileInputRef!: HTMLInputElement;
   private uploadStatus: 'idle' | 'success' = 'idle';
   private fileType?: string;
+  private defaultUploadMessage: HTMLElement = (
+    <span>
+      Drag a file here or{' '}
+      <span class="file-input-choose-text">choose from folder</span>
+    </span>
+  )
 
   @Element() el: HTMLElement;
   @State() file?: File;
@@ -81,12 +87,7 @@ export class VaFileInput {
   /**
    * Custom instructional message in the file input.
    */
-  @Prop() uploadMessage?: HTMLElement = (
-    <span>
-      Drag a file here or{' '}
-      <span class="file-input-choose-text">choose from folder</span>
-    </span>
-  );
+  @Prop() uploadMessage?: HTMLElement = this.defaultUploadMessage;
 
   /**
    * Emit component-library-analytics events on the file input change event.
@@ -416,6 +417,12 @@ export class VaFileInput {
       ? 'headless-selected-files-wrapper'
       : 'selected-files-wrapper';
     const hintClass = 'usa-hint' + (headless ? ' usa-sr-only' : '');
+
+    // Check if there is an upload message and set it back to the default if not.
+    if (!this.uploadMessage) {
+      this.uploadMessage = this.defaultUploadMessage;
+    }
+
     return (
       <Host class={{ 'has-error': !!displayError }}>
         {!readOnly && (