From 9b16c9a87acce0269c3b9bbe830b0491fa206258 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 22 Mar 2019 15:59:57 +0100
Subject: [PATCH] filename in upload files

---
 templates/adm/uploadfile.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/templates/adm/uploadfile.html b/templates/adm/uploadfile.html
index ef4f3d3..d431773 100644
--- a/templates/adm/uploadfile.html
+++ b/templates/adm/uploadfile.html
@@ -1,6 +1,6 @@
 {% extends 'adm/layout.html' %}
 {% block title %}
-Upload File - mvl
+    Upload File - mvl
 {% endblock %}
 {% block main %}
     <main class="container">
@@ -12,13 +12,22 @@ Upload File - mvl
             </div>
             <div class="form-group">
                 <div class="custom-file">
-                    <input type="file" class="custom-file-input" id="files" name="files" multiple>
-                    <label class="custom-file-label" for="files">Choose files</label>
+                    <input type="file" class="custom-file-input" id="choose-file-upload"
+                           aria-describedby="choose-file-upload" name="files" multiple>
+                    <label class="custom-file-label" for="choose-file-upload">Choose files</label>
                 </div>
             </div>
             <div class="form-group">
                 <input class="btn btn-primary form-control" type=submit value=Upload>
             </div>
         </form>
+        <script>
+            $(".custom-file-input").on("change", function () {
+                let files = $(this).prop("files");
+                let names = $.map(files, val => val.name);
+                let good_names = names.join(', ');
+                $(this).siblings(".custom-file-label").addClass("selected").html(good_names);
+            });
+        </script>
     </main>
 {% endblock %}
\ No newline at end of file