Merge branch 'feat/file_inputs' into 'master'

single-, multi- and no-js-file-inputs

Closes #33

See merge request !14

templates/standalone/inputs.julius

@@ -24,10 +24,12 @@
     });
   };
 
+  // allows for multiple file uploads with separate inputs
   window.utils.reactiveFileUpload = function(input, parent) {
     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;
@@ -42,7 +44,7 @@
       this.remove = function() {
         this.container.remove();
       }
-      this.isValid = function() {
+      this.wasValid = function() {
         return this.container.classList.contains('file-input__container--valid');
       }
     }
@@ -61,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')
@@ -78,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();
       });
@@ -95,26 +101,36 @@
       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()) {
+        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');
-      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');
+      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);

templates/standalone/inputs.lucius

@@ -223,7 +223,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;