fix/issue-395/file-upload (#402)

* Update file-upload.js
digitalnsw · Jun 12, 2024 · d668275 · d668275
1 parent 46ee9c3
commit d668275
Showing 1 changed file with 40 additions and 28 deletions.
diff --git a/src/components/file-upload/file-upload.js b/src/components/file-upload/file-upload.js
@@ -2,25 +2,37 @@
 class FileUpload {
   constructor(element) {
     this.element = element
-    this.input = this.element.querySelector('.nsw-file-upload__input')
-    this.label = this.element.querySelector('.nsw-file-upload__label')
-    this.multipleUpload = this.input.hasAttribute('multiple')
+    this.input = this.element.querySelector('input.nsw-file-upload__input')
+    this.label = this.element.querySelector('label.nsw-file-upload__label')
+    this.multipleUpload = this.input && this.input.hasAttribute('multiple')
     this.replaceFiles = this.element.hasAttribute('data-replace-files')
-    this.filesList = false
+    this.filesList = null
   }
 
   init() {
     if (!this.input) return
 
-    this.input.addEventListener('change', () => {
-      if (this.input.value === '') return
-      this.updateFileList()
-    })
+    if (!this.label) {
+      const label = document.createElement('label')
+      label.htmlFor = this.input.id
+      label.classList.add('nsw-file-upload__label', 'nsw-button', 'nsw-button--dark-outline-solid')
+      label.textContent = 'Select file'
+      this.element.insertAdjacentElement('beforeend', label)
+      this.label = this.element.querySelector('label.nsw-file-upload__label')
+    }
+
+    this.input.addEventListener('change', this.handleInputChange.bind(this))
+  }
+
+  handleInputChange() {
+    if (this.input.value === '') return
+    this.updateFileList()
   }
 
   createFileList() {
     const ul = document.createElement('ul')
     ul.classList.add('nsw-file-upload__list')
+
     this.label.insertAdjacentElement('afterend', ul)
     this.filesList = this.element.querySelector('.nsw-file-upload__list')
   }
@@ -29,11 +41,11 @@ class FileUpload {
     const li = document.createElement('li')
     li.classList.add('nsw-file-upload__item')
     const html = `
-    <span class="nsw-file-upload__item-filename"></span>
-    <button type="button" class="nsw-icon-button">
+      <span class="nsw-file-upload__item-filename"></span>
+      <button type="button" class="nsw-icon-button">
         <span class="sr-only">Remove file</span>
         <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>
-    </button>`
+      </button>`
 
     li.insertAdjacentHTML('afterbegin', html)
     li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50)
@@ -47,40 +59,40 @@ class FileUpload {
 
     this.filesList.classList.add('active')
 
-    let string = ''
+    let fileListHTML = ''
+
     for (let i = 0; i < this.input.files.length; i += 1) {
       const file = this.input.files[i]
-      string = this.createFileItem(file) + string
+      fileListHTML = this.createFileItem(file) + fileListHTML
     }
 
     if (this.replaceFiles) {
-      this.filesList.innerHTML = string
+      this.filesList.innerHTML = fileListHTML
     } else {
-      this.filesList.insertAdjacentHTML('beforeend', string)
+      this.filesList.insertAdjacentHTML('beforeend', fileListHTML)
     }
 
     this.removeFile()
   }
 
   removeFile() {
-    this.filesList.addEventListener('click', (event) => {
-      if (!event.target.closest('.nsw-icon-button')) return
-      event.preventDefault()
-      const item = event.target.closest('.nsw-file-upload__item')
+    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')
 
-      item.remove()
+    item.remove()
 
-      if (event.currentTarget.children.length === 0) {
-        this.filesList.classList.remove('active')
-      }
-    })
+    if (this.filesList.children.length === 0) {
+      this.filesList.classList.remove('active')
+    }
   }
 
   static truncateString(str, num) {
-    if (str.length <= num) {
-      return str
-    }
-    return `${str.slice(0, num)}...`
+    return str.length <= num ? str : `${str.slice(0, num)}...`
   }
 }