nsw-design-system 3.18.9 → 3.18.11

package/dist/js/components/file-upload/file-upload.d.ts

@@ -14,6 +14,5 @@ declare class FileUpload {
     createFileItem(file: any): string;
     updateFileList(): void;
     currentFiles: DataTransfer | undefined;
-    removeFile(): void;
     handleFileRemove(event: any): void;
 }

package/dist/js/main.js

@@ -1796,9 +1796,9 @@
         this.label = this.element.querySelector('label.nsw-file-upload__label');
       }
       this.input.addEventListener('change', this.handleInputChange.bind(this));
+      this.element.addEventListener('click', this.handleFileRemove.bind(this));
     }
     handleInputChange() {
-      if (this.input.value === '') return;
       this.updateFileList();
     }
     createFileList() {
@@ -1818,40 +1818,65 @@
       </button>`;
       li.insertAdjacentHTML('afterbegin', html);
       li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50);
+      li.querySelector('.nsw-file-upload__item-filename').dataset.filename = file.name;
       return li.outerHTML;
     }
     updateFileList() {
+      if (this.input.files.length === 0) {
+        // If there are previously stored files, re-sync the input and exit.
+        if (this.currentFiles && this.currentFiles.files && this.currentFiles.files.length > 0) {
+          this.input.files = this.currentFiles.files;
+          return;
+        }
+        // Clear list if otherwise
+        if (this.filesList) {
+          this.filesList.innerHTML = '';
+          this.filesList.classList.remove('active');
+        }
+        return;
+      }
       if (!this.filesList) {
         this.createFileList();
       }
       this.filesList.classList.add('active');
       const dataTransfer = new DataTransfer();
-      for (let i = 0; i < this.input.files.length; i += 1) {
-        const file = this.input.files[i];
-        dataTransfer.items.add(file);
+      const existingFiles = new Set();
+      if (this.replaceFiles) {
+        this.filesList.innerHTML = '';
+        this.currentFiles = new DataTransfer();
+      }
+
+      // Collect existing files to maintain them in the list (if multiple is allowed)
+      if (this.multipleUpload && this.currentFiles && this.currentFiles.files) {
+        for (let i = 0; i < this.currentFiles.files.length; i += 1) {
+          const file = this.currentFiles.files[i];
+          dataTransfer.items.add(file);
+          existingFiles.add(file.name);
+        }
       }
-      this.currentFiles = dataTransfer;
       let fileListHTML = '';
+
+      // Add only new files
       for (let i = 0; i < this.input.files.length; i += 1) {
         const file = this.input.files[i];
-        fileListHTML = this.createFileItem(file) + fileListHTML;
+        if (!existingFiles.has(file.name)) {
+          dataTransfer.items.add(file);
+          fileListHTML += this.createFileItem(file);
+        }
       }
-      if (this.replaceFiles) {
-        this.filesList.innerHTML = fileListHTML;
-      } else {
+      this.currentFiles = dataTransfer;
+      if (fileListHTML) {
         this.filesList.insertAdjacentHTML('beforeend', fileListHTML);
       }
       this.input.files = this.currentFiles.files;
-      this.removeFile();
-    }
-    removeFile() {
-      this.filesList.addEventListener('click', this.handleFileRemove.bind(this));
     }
     handleFileRemove(event) {
       if (!event.target.closest('.nsw-icon-button')) return;
       event.preventDefault();
       const item = event.target.closest('.nsw-file-upload__item');
-      const filename = item.querySelector('.nsw-file-upload__item-filename').textContent;
+      const {
+        filename
+      } = item.querySelector('.nsw-file-upload__item-filename').dataset;
       const dataTransfer = new DataTransfer();
       for (let i = 0; i < this.currentFiles.files.length; i += 1) {
         const file = this.currentFiles.files[i];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.18.9",
+  "version": "3.18.11",
   "description": "Design system for Digital NSW",
   "main": "dist/js/main.js",
   "types": "dist/js/main.d.ts",

package/src/components/file-upload/file-upload.js

@@ -22,10 +22,10 @@ class FileUpload {
     }
 
     this.input.addEventListener('change', this.handleInputChange.bind(this))
+    this.element.addEventListener('click', this.handleFileRemove.bind(this))
   }
 
   handleInputChange() {
-    if (this.input.value === '') return
     this.updateFileList()
   }
 
@@ -49,10 +49,25 @@ class FileUpload {
 
     li.insertAdjacentHTML('afterbegin', html)
     li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50)
+    li.querySelector('.nsw-file-upload__item-filename').dataset.filename = file.name
     return li.outerHTML
   }
 
   updateFileList() {
+    if (this.input.files.length === 0) {
+      // If there are previously stored files, re-sync the input and exit.
+      if (this.currentFiles && this.currentFiles.files && this.currentFiles.files.length > 0) {
+        this.input.files = this.currentFiles.files
+        return
+      }
+      // Clear list if otherwise
+      if (this.filesList) {
+        this.filesList.innerHTML = ''
+        this.filesList.classList.remove('active')
+      }
+      return
+    }
+
     if (!this.filesList) {
       this.createFileList()
     }
@@ -60,39 +75,47 @@ class FileUpload {
     this.filesList.classList.add('active')
 
     const dataTransfer = new DataTransfer()
+    const existingFiles = new Set()
 
-    for (let i = 0; i < this.input.files.length; i += 1) {
-      const file = this.input.files[i]
-      dataTransfer.items.add(file)
+    if (this.replaceFiles) {
+      this.filesList.innerHTML = ''
+      this.currentFiles = new DataTransfer()
+    }
+
+    // Collect existing files to maintain them in the list (if multiple is allowed)
+    if (this.multipleUpload && this.currentFiles && this.currentFiles.files) {
+      for (let i = 0; i < this.currentFiles.files.length; i += 1) {
+        const file = this.currentFiles.files[i]
+        dataTransfer.items.add(file)
+        existingFiles.add(file.name)
+      }
     }
 
-    this.currentFiles = dataTransfer
     let fileListHTML = ''
 
+    // Add only new files
     for (let i = 0; i < this.input.files.length; i += 1) {
       const file = this.input.files[i]
-      fileListHTML = this.createFileItem(file) + fileListHTML
+      if (!existingFiles.has(file.name)) {
+        dataTransfer.items.add(file)
+        fileListHTML += this.createFileItem(file)
+      }
     }
 
-    if (this.replaceFiles) {
-      this.filesList.innerHTML = fileListHTML
-    } else {
+    this.currentFiles = dataTransfer
+
+    if (fileListHTML) {
       this.filesList.insertAdjacentHTML('beforeend', fileListHTML)
     }
 
     this.input.files = this.currentFiles.files
-    this.removeFile()
-  }
-
-  removeFile() {
-    this.filesList.addEventListener('click', this.handleFileRemove.bind(this))
   }
 
   handleFileRemove(event) {
     if (!event.target.closest('.nsw-icon-button')) return
     event.preventDefault()
     const item = event.target.closest('.nsw-file-upload__item')
-    const filename = item.querySelector('.nsw-file-upload__item-filename').textContent
+    const { filename } = item.querySelector('.nsw-file-upload__item-filename').dataset
 
     const dataTransfer = new DataTransfer()
     for (let i = 0; i < this.currentFiles.files.length; i += 1) {