styling for file-input-element

templates/widgets/form.julius

@@ -45,6 +45,7 @@
 
   window.utils.reactiveFileUpload = function(input, parent) {
     var currInputCount = 0;
+    // shows new add-mode-button after destInput
     function showAddMore(destInput) {
       var addMore = document.createElement('div');
       addMore.classList.add('form-group__add-entry');
@@ -57,15 +58,13 @@
         } else {
           addMore.classList.remove('form-group__add-entry');
           addMore.classList.add('form-group__remove-entry');
-          var nextInput = document.createElement('input');
-          nextInput.setAttribute('name', destInput.getAttribute('name'));
-          nextInput.setAttribute('type', 'file');
-          addListener(nextInput);
+          var nextInput = makeInput(destInput.getAttribute('name'));
           parent.appendChild(nextInput);
         }
       });
       parent.appendChild(addMore);
     }
+    // updates submitbutton and form-group-stripe
     function updateParent() {
       var submitBtn = parent.parentElement.querySelector('[type=submit]');
       if (currInputCount > 0) {
@@ -82,17 +81,52 @@
         submitBtn.setAttribute('disabled', 'disabled');
       }
     }
+    // addseventlistener destInput
     function addListener(destInput) {
       destInput.addEventListener('change', function(event) {
         if (destInput.value.length > 0) {
+          destInput.nextSibling.innerHTML = destInput.value;
           currInputCount++;
           showAddMore(destInput);
+        } else {
+          destInput.nextSibling.innerHTML = 'Choose file';
         }
         updateParent();
       });
     }
-    addListener(input);
-    updateParent();
+
+    // create new wrapped input element with name name
+    function makeInput(name) {
+      var nextInput = document.createElement('input');
+      nextInput.setAttribute('name', name);
+      nextInput.setAttribute('type', 'file');
+      addListener(nextInput);
+      return wrapButton(nextInput);
+    }
+
+    // wraps input in container to be able to style it properly
+    function wrapButton(input) {
+      var cont = document.createElement('div');
+      var desc = document.createElement('span');
+      cont.classList.add('form-group__file-input-container');
+      desc.classList.add('form-group__file-input-label');
+      desc.innerHTML = 'Choose file';
+      cont.appendChild(input);
+      cont.appendChild(desc);
+      cont.addEventListener('click', function() {
+        input.click();
+      });
+      return cont;
+    }
+
+    // initial setup
+    function setup() {
+      addListener(input);
+      var currInput = wrapButton(input);
+      parent.appendChild(currInput);
+      updateParent();
+    }
+    setup();
   }
 
   // registers input-listener for each element in <elements> (array) and

templates/widgets/form.lucius

@@ -80,12 +80,13 @@ textarea:focus {
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, minmax(150px, max-content));
+  grid-auto-rows: 30px;
+  grid-gap: 10px;
   align-items: center;
   margin: 10px 0;
   margin-left: -20px;
   padding-left: 10px;
   border-left: 8px solid transparent;
-  min-height: 30px;
 }
 
 .form-group--required {
@@ -278,8 +279,28 @@ input[type="checkbox"]:checked::after {
   }
 }
 
-
 /* CUSTOM FILE INPUT */
 input[type="file"] {
   grid-column-start: 2;
+  color: white;
+  width: 0.1px;
+  height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+  outline: 0;
+  border: 0;
+}
+.form-group__file-input-container {
+  border-radius: 2px;
+  background-color: var(--darkbase);
+  padding: 7px 13px;
+  color: var(--whitebase);
+  grid-column-start: 2;
+  text-align: left;
+  cursor: pointer;
+}
+.form-group__file-input-label {
+
 }