name of uploaded file in form is now displayed

Author: jfparie

assets/scss/templates/_main.scss

@@ -16,6 +16,7 @@ body {
 input[type="file"] {
   display: none;
 }
+
 .file-upload {
   border: 1px dashed #005AA7;
   border-radius: 10px; 

layouts/shortcodes/form1.html

@@ -1,6 +1,16 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{ with .Page.Params.form1}}
 
+<!-- js changing 'Choose file' text to name of uploaded file -->
+<script>
+  function displayFile(ID) {
+    const fileInput = document.getElementById(ID);
+    const textArea = fileInput.nextElementSibling;
+    const file = fileInput.files[0];
+    textArea.innerText = file.name;
+  };
+</script>
+
 <div class="container-fluid p-0" id={{ .id }}>
   <div class="shadow form-mobile-desktop-layout bg-white rounded-blue-border">
       <div class="col-lg-12 mb-4">
@@ -40,14 +50,15 @@ <h3 style="color:#005AA7;">
 
             <!-- file upload -->
             {{ else if eq .type "file"}}
+
             <!-- title -->
             <p class="mb-2" style="color: #005AA7;">{{ .label | markdownify }}{{if .required}}*{{end}}</p>
             <!-- upload zone -->
             <label style="font-weight:500;" class="file-upload" for="{{.id}}">
-              <input type="{{.type}}" class="form-control" id="{{.id}}" value="{{.value}}" {{if .required}} required {{end}} name="{{.label}}" placeholder="{{.placeholder}}" />
+              <input type="{{.type}}" onchange="displayFile({{.id}})" class="form-control" id="{{.id}}" value="{{.value}}" {{if .required}} required {{end}} name="{{.label}}" placeholder="{{.placeholder}}" />
               <div style="display:grid; place-items:center;">
                   <i class="fas fa-upload my-2" style="font-size:24px;"></i>
-                  <p style="color:#005AA7;">{{.file_upload_text}}</p>
+                  <p id="upload-text" style="color:#005AA7;">{{.file_upload_text}}</p>
               </div>
             </label>
 

layouts/shortcodes/form2.html

@@ -1,6 +1,16 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{ with .Page.Params.form2}}
 
+<!-- js changing 'Choose file' text to name of uploaded file -->
+<script>
+  function displayFile(ID) {
+    const fileInput = document.getElementById(ID);
+    const textArea = fileInput.nextElementSibling;
+    const file = fileInput.files[0];
+    textArea.innerText = file.name;
+  };
+</script>
+
 <div class="container-fluid p-0" id={{ .id }}>
   <div class="shadow form-mobile-desktop-layout bg-white rounded-blue-border">
       <div class="col-lg-12 mb-4">
@@ -26,18 +36,29 @@ <h3 style="color:#005AA7;">
 
             <!-- check boxes -->
             {{ else if eq .type "checkbox"}}
-            <input type="{{.type}}" class="form-control" id="{{.id}}" value="{{.value}}" {{if .required}} required {{end}} name="{{.label}}" placeholder="{{.placeholder}}" />
+            {{ $input := . }}
+            <!-- title -->
+            <p class="mb-4" style="color: #005AA7;">{{ .label | markdownify }}{{if .required}}*{{end}}</p>
+            <div class="row">
+            {{ range .values}}
+            <div class="col form-group">
+              <input type="{{$input.type}}" class="form-control checkbox" id="{{.id}}" value="{{.value}}" {{if $input.required}} required {{end}} name="{{.label}}" />
+              <label for="{{.id}}" class="mb-0">{{ .label | markdownify }}{{if .required}}*{{end}}</label>
+            </div>
+            {{end}}
+            </div>
 
             <!-- file upload -->
             {{ else if eq .type "file"}}
+
             <!-- title -->
             <p class="mb-2" style="color: #005AA7;">{{ .label | markdownify }}{{if .required}}*{{end}}</p>
             <!-- upload zone -->
             <label style="font-weight:500;" class="file-upload" for="{{.id}}">
-              <input type="{{.type}}" class="form-control" id="{{.id}}" value="{{.value}}" {{if .required}} required {{end}} name="{{.label}}" placeholder="{{.placeholder}}" />
+              <input type="{{.type}}" onchange="displayFile({{.id}})" class="form-control" id="{{.id}}" value="{{.value}}" {{if .required}} required {{end}} name="{{.label}}" placeholder="{{.placeholder}}" />
               <div style="display:grid; place-items:center;">
                   <i class="fas fa-upload my-2" style="font-size:24px;"></i>
-                  <p style="color:#005AA7;">{{.file_upload_text}}</p>
+                  <p id="upload-text" style="color:#005AA7;">{{.file_upload_text}}</p>
               </div>
             </label>
 

static/js/home_script.js

@@ -34,7 +34,7 @@ function hasScrolled() {
     }
 
     lastScrollTop = st;
-}
+};
 
 // Why we exist AI Act/DSA/GDPR etc.
 $(document).on("click", ".menu2 div", function () {
@@ -168,13 +168,6 @@ $(function () { // wait for document ready
     }
 });
 
-// Remove preview value from input field
-$(document).ready(function () {
-    $("#mce-EMAIL").click(function(event) {
-        $(this).attr("placeholder", "");
-    }); 
-});
-
 
 // Send subscibtion for newsletter
 (function($)