💄 [#1309] Added upload script and upload file-input styles

src/open_inwoner/js/components/index.js

@@ -21,6 +21,7 @@ import './preview'
 import './questionnaire'
 import './search'
 import './toggle'
+import './upload-document'
 import './session'
 
 const htmx = (window.htmx = require('htmx.org'))

src/open_inwoner/js/components/upload-document/index.js

@@ -0,0 +1,56 @@
+// class UploadDocument {
+//   constructor(node) {
+//     this.node = node
+//     this.node.addEventListener('click', this.toggleOpen.bind(this))
+//   }
+//
+//   toggleOpen(event) {
+//     event.preventDefault()
+//     this.node.parentElement.parentElement.classList.toggle('upload--open')
+//   }
+// }
+//
+// const uploadButtons = document.querySelectorAll('.upload__button .button')
+// ;[...uploadButtons].forEach((uploadButton) => new UploadDocument(uploadButton))
+
+const fileEle = document.getElementById('id_file')
+const sizeEle = document.getElementById('upload-size')
+const nameEle = document.getElementById('upload-name')
+const closeUpload = document.getElementById('closeUpload')
+
+fileEle.addEventListener('change', function (e) {
+  const files = e.target.files
+  if (files.length === 0) {
+    // Hide the size element if user doesn't choose any file
+    sizeEle.innerHTML = ''
+    sizeEle.style.display = 'none'
+    nameEle.innerHTML = ''
+    nameEle.style.display = 'none'
+  } else {
+    // Convert the file size to a readable format
+    const formatFileSize = function (bytes) {
+      const sufixes = ['B', 'kB', 'MB', 'GB', 'TB']
+      const i = Math.floor(Math.log(bytes) / Math.log(1024))
+      return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`
+    }
+    // File size in bytes
+    sizeEle.innerHTML = formatFileSize(files[0].size)
+    nameEle.innerHTML = `${files[0].name}`
+
+    // Display it
+    sizeEle.style.display = 'block'
+    nameEle.style.display = 'block'
+  }
+})
+
+closeUpload.onclick = function (e, fileEle, sizeEle, nameEle) {
+  const files = e.target.files
+  document.getElementById('id_file').value = null
+  sizeEle.innerHTML = "null"
+  nameEle.innerHTML = "null"
+
+  // Display it
+  sizeEle.style.display = 'block'
+  nameEle.style.display = 'block'
+  console.log('close button clicked')
+}