less complicated multifile-upload

templates/multiFileField.hamlet

@@ -7,8 +7,8 @@ $forall FileUploadInfo{..} <- fileInfos
       <label for=#{fuiHtmlId}>
 
 $# new files
-<input type="file" name=#{fieldName} multiple>
+<input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs entpacken
-  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
+  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>

templates/standalone/inputs.julius

@@ -4,133 +4,65 @@
   window.utils = window.utils || {};
 
   // allows for multiple file uploads with separate inputs
-  window.utils.reactiveFileUpload = function(input, formGroup) {
+  window.utils.initializeFileUpload = function(input) {
-    var currValidInputCount = 0;
+    var isMulti = input.hasAttribute('multiple');
-    var addMore = false;
+    var fileList = addFileList();
-    var inputName = input.getAttribute('name');
+    var label = addFileLabel();
-    var isMulti = input.hasAttribute('multiple') ? true : false;
-    var wrapper = formGroup;
-    // FileInput PseudoClass
-    function FileInput(container, input, label, remover) {
-      this.container = container;
-      this.input = input;
-      this.label = label;
-      this.remover = remover;
-      addListener(this);
 
-      this.addTo = function(parentElement) {
+    function renderFileList(files) {
-        parentElement.appendChild(this.container);
+      fileList.innerHTML = '';
-      }
+      Array.from(files).forEach(function(file, index) {
-      this.remove = function() {
+        var fileDisplayEl = document.createElement('li');
-        this.container.remove();
+        fileDisplayEl.innerHTML = file.name;
-      }
+        fileList.appendChild(fileDisplayEl);
-      this.wasValid = function() {
-        return this.container.classList.contains('file-input__container--valid');
-      }
-    }
-    function addNextInput() {
-      var inputs = wrapper.querySelectorAll('.file-input__container');
-      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
-        makeInput(inputName).addTo(wrapper);
-      }
-    }
-    // updates submitbutton and form-group-stripe
-    function updateForm() {
-      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
-      formGroup.classList.remove('form-group--has-error');
-      if (currValidInputCount > 0) {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.add('form-group--valid')
-        }
-        if (isMulti) {
-          addNextInput();
-        }
-      } else {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.remove('form-group--valid')
-        }
-      }
-    }
-    // addseventlistener destInput
-    function addListener(fileInput) {
-      fileInput.input.addEventListener('change', function(event) {
-        if (fileInput.input.value.length > 0) {
-          // update label
-          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
-          var fileName = filePath[filePath.length - 1];
-          fileInput.label.innerHTML = fileName;
-          // increase count if this field was empty previously
-          if (!fileInput.wasValid()) {
-            currValidInputCount++;
-          }
-          fileInput.container.classList.add('file-input__container--valid')
-          // show next input
-        } else {
-          if (isMulti) {
-            currValidInputCount--;
-          }
-          clearInput(fileInput);
-        }
-        updateForm();
-      });
-      fileInput.input.addEventListener('focus', function() {
-        fileInput.container.classList.add('pseudo-focus');
-      });
-      fileInput.input.addEventListener('blur', function() {
-        fileInput.container.classList.remove('pseudo-focus');
-      });
-      fileInput.remover.addEventListener('click', function() {
-        if (fileInput.wasValid()) {
-          currValidInputCount--;
-        }
-        clearInput(fileInput);
       });
     }
 
-    // clears or removes fileinput based on multi-file or not
+    function updateLabel(files) {
-    function clearInput(fileInput) {
       if (isMulti) {
-        fileInput.remove();
+        label.innerText = files.length + ' Dateien ausgwählt';
       } else {
-        fileInput.container.classList.remove('file-input__container--valid')
+        label.innerHTML = files[0].name;
-        fileInput.label.innerHTML = '';
       }
-      updateForm();
     }
-    // create new wrapped input element with name name
+
-    function makeInput(name) {
+    function addFileList() {
-      var cont =      document.createElement('div');
+      var list = document.createElement('ol');
-      var desc =      document.createElement('label');
+      list.classList.add('file-input__list');
-      var nextInput = document.createElement('input');
+      input.parentElement.appendChild(list);
-      var remover =   document.createElement('div');
+      return list;
-      cont.classList.add('file-input__container');
-      desc.classList.add('file-input__label', 'btn');
-      nextInput.classList.add('js-file-input');
-      desc.setAttribute('for', name + '-' + currValidInputCount);
-      remover.classList.add('file-input__remover');
-      nextInput.setAttribute('id', name + '-' + currValidInputCount);
-      nextInput.setAttribute('name', name);
-      nextInput.setAttribute('type', 'file');
-      cont.appendChild(nextInput);
-      cont.appendChild(desc);
-      cont.appendChild(remover);
-      return new FileInput(cont, nextInput, desc, remover);
     }
+
+    function addFileLabel() {
+      var label = document.createElement('label');
+      label.classList.add('file-input__label');
+      // interpolate translated String here
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
+      label.setAttribute('for', input.id);
+      input.parentElement.insertBefore(label, input);
+      return label;
+    }
+
+    function addMultiInfo() {
+      var info = document.createElement('div');
+      info.classList.add('file-input__info');
+      // interpolate translated String here
+      info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
+      input.parentElement.insertBefore(info, input);
+    }
+
     // initial setup
-    function setup() {
+    input.classList.add('file-input__input--hidden');
-      var newInput = makeInput(inputName);
+    if (isMulti) {
-      if (isMulti) {
+      addMultiInfo();
-        wrapper = document.createElement('div');
-        wrapper.classList.add('file-input__wrapper');
-        console.log(wrapper);
-        // TODO: fix file input
-        formGroup.insertBefore(wrapper, input);
-      }
-      input.remove();
-      newInput.addTo(wrapper);
-      updateForm();
     }
-    setup();
+    input.addEventListener('change', function() {
+      if (isMulti) {
+        renderFileList(input.files);
+      }
+
+      updateLabel(input.files);
+    });
   }
 
   // to remove previously uploaded files
@@ -194,11 +126,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // initialize file-upload-fields
   Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
-    var formGroup = inp.parentNode;
+    window.utils.initializeFileUpload(inp);
-    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
-      formGroup = formGroup.parentNode;
-    }
-    window.utils.reactiveFileUpload(inp, formGroup);
   });
 
   // initialize file-checkbox-fields

templates/standalone/inputs.lucius

@@ -243,114 +243,17 @@ input[type="checkbox"]:checked::after {
 }
 
 /* CUSTOM FILE INPUT */
-input[type="file"].js-file-input {
+.file-input__label {
-  color: white;
-  width: 0.1px;
-  height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-  outline: 0;
-  border: 0;
-}
-.file-input__wrapper {
-  grid-column-start: 2;
-}
-.file-input__container,
-.file-checkbox__container,
-.file-input__unpack {
-  grid-column-start: 2;
-  margin: 4px 0;
-}
-.file-input__label,
-.file-input__remover,
-.file-checkbox__label,
-.file-checkbox__remover {
-  display: block;
-  border-radius: 2px;
-  padding: 5px 13px;
-  color: var(--color-lightwhite);
   cursor: pointer;
-}
+  display: inline-block;
-.file-input__label,
-.file-checkbox__label {
-  text-align: left;
-  position: relative;
-  height: 30px;
-}
-.file-checkbox__label {
-  background-color: var(--color-grey);
-  text-decoration: line-through;
-}
-.file-input__label.btn,
-.file-checkbox__label.btn {
-  padding: 5px 13px;
-}
-.file-input__label::after,
-.file-input__label::before {
-  position: absolute;
-  content: '';
-  background-color: white;
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  top: 50%;
-  left: 12px;
-  left: 50%;
-}
-
-.file-input__label::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-.file-input__label::before {
-  transform: translate(-50%, -50%);
-}
-.file-checkbox__checkbox {
-  margin-left: 10px;
-}
-.file-input__remover {
-  display: none;
-  width: 40px;
-  height: 30px;
-  text-align: center;
-  background-color: var(--color-warning);
-  position: relative;
-  margin-left: 10px;
-}
-.file-input__remover::before {
-  position: absolute;
-  content: '';
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  left: 12px;
-  background-color: white;
-}
-.file-input__container--valid > .file-input__label {
   background-color: var(--color-light);
+  color: white;
+  padding: 10px 17px;
+  border-radius: 3px;
 }
-.file-checkbox__container--checked > .file-checkbox__label {
+.file-input__list {
-  text-decoration: none;
-  background-color: var(--color-lighter);
 
-  &.btn:hover {
-    background-color: var(--color-lighter);
-    text-decoration: line-through;
-  }
 }
-.file-input__container--valid > .file-input__label::before,
+.file-input__input--hidden {
-.file-input__container--valid > .file-input__label::after {
+  display: none;
-  content: none;
-}
-.file-input__container--valid > .file-input__remover {
-  display: block;
-}
-@media (max-width: 768px) {
-  .file-input__wrapper,
-  .file-input__container,
-  .file-checkbox__container,
-  .file-input__unpack {
-    grid-column-start: 1;
-  }
 }