From fe27fab561d78781a215d52cad33566f09de0bf8 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 25 Mar 2018 20:46:21 +0200
Subject: [PATCH 1/2] multi-file-inputs now with labels instead of spans

---
 templates/standalone/inputs.julius | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index 10a32bd18..926dccd1e 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -24,6 +24,7 @@
     });
   };
 
+  // allows for multiple file uploads with separate inputs
   window.utils.reactiveFileUpload = function(input, parent) {
     var currValidInputCount = 0;
     var addMore = false;
@@ -95,9 +96,6 @@
       fileInput.input.addEventListener('blur', function() {
         fileInput.container.classList.remove('pseudo-focus');
       });
-      fileInput.label.addEventListener('click', function() {
-        fileInput.input.click();
-      });
       fileInput.remover.addEventListener('click', function() {
         if (fileInput.isValid()) {
           currValidInputCount--;
@@ -109,12 +107,14 @@
     // create new wrapped input element with name name
     function makeInput(name) {
       var cont =      document.createElement('div');
-      var desc =      document.createElement('span');
+      var desc =      document.createElement('label');
       var nextInput = document.createElement('input');
       var remover =   document.createElement('div');
       cont.classList.add('file-input__container');
       desc.classList.add('file-input__label', 'btn');
+      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);

From 6749359e45e35b93b1add32659f6ec58925e8c20 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 27 Mar 2018 00:23:13 +0200
Subject: [PATCH 2/2] file-inputs for single-file-fields and no-js-users closes
 #33

---
 templates/standalone/inputs.julius | 32 ++++++++++++++++++++++--------
 templates/standalone/inputs.lucius |  2 +-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index 926dccd1e..9534b1123 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -29,6 +29,7 @@
     var currValidInputCount = 0;
     var addMore = false;
     var inputName = input.getAttribute('name');
+    var isMulti = input.getAttribute('multiple') ? true : false;
     // FileInput PseudoClass
     function FileInput(container, input, label, remover) {
       this.container = container;
@@ -43,7 +44,7 @@
       this.remove = function() {
         this.container.remove();
       }
-      this.isValid = function() {
+      this.wasValid = function() {
         return this.container.classList.contains('file-input__container--valid');
       }
     }
@@ -62,7 +63,9 @@
           parent.classList.add('form-group--valid')
         }
         submitBtn.removeAttribute('disabled');
-        addNextInput();
+        if (isMulti) {
+          addNextInput();
+        }
       } else {
         if (parent.classList.contains('form-group')) {
           parent.classList.remove('form-group--valid')
@@ -79,14 +82,16 @@
           var fileName = filePath[filePath.length - 1];
           fileInput.label.innerHTML = fileName;
           // increase count if this field was empty previously
-          if (!fileInput.isValid()) {
+          if (!fileInput.wasValid()) {
             currValidInputCount++;
           }
           fileInput.container.classList.add('file-input__container--valid')
           // show next input
         } else {
-          currValidInputCount--;
-          fileInput.remove();
+          if (isMulti) {
+            currValidInputCount--;
+          }
+          clearInput(fileInput);
         }
         updateForm();
       });
@@ -97,13 +102,23 @@
         fileInput.container.classList.remove('pseudo-focus');
       });
       fileInput.remover.addEventListener('click', function() {
-        if (fileInput.isValid()) {
+        if (fileInput.wasValid()) {
           currValidInputCount--;
         }
-        fileInput.remove();
-        updateForm();
+        clearInput(fileInput);
       });
     }
+
+    // clears or removes fileinput based on multi-file or not
+    function clearInput(fileInput) {
+      if (isMulti) {
+        fileInput.remove();
+      } else {
+        fileInput.container.classList.remove('file-input__container--valid')
+        fileInput.label.innerHTML = '';
+      }
+      updateForm();
+    }
     // create new wrapped input element with name name
     function makeInput(name) {
       var cont =      document.createElement('div');
@@ -112,6 +127,7 @@
       var remover =   document.createElement('div');
       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);
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 5fe20077a..77f23a1ac 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -220,7 +220,7 @@ input[type="checkbox"]:checked::after {
 }
 
 /* CUSTOM FILE INPUT */
-input[type="file"] {
+input[type="file"].js-file-input {
   color: white;
   width: 0.1px;
   height: 0.1px;