file-inputs for single-file-fields and no-js-users

closes #33

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);

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;