From 87b77cf5aa927ed9fbc8afbe1543599b638a3f35 Mon Sep 17 00:00:00 2001
From: neviyn <neviynhd@gmail.com>
Date: Sat, 15 May 2021 00:57:14 +0100
Subject: [PATCH] Added view of image selected for upload

---
 src/main/resources/templates/upload.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)
diff --git a/src/main/resources/templates/upload.html b/src/main/resources/templates/upload.html
index 16f2b64..38f808f 100644
--- a/src/main/resources/templates/upload.html
+++ b/src/main/resources/templates/upload.html
@@ -3,6 +3,23 @@
 <head>
     <meta th:replace="fragments :: header"/>
     <title>Upload</title>
+    <script>
+        function previewSelectedImage(){
+          const preview = document.querySelector('img');
+          const file = document.querySelector('input[type=file]').files[0];
+          const reader = new FileReader();
+
+          reader.addEventListener("load", function () {
+            // convert image file to base64 string
+            preview.src = reader.result;
+            preview.classList.remove("invisible")
+          }, false);
+
+          if (file) {
+            reader.readAsDataURL(file);
+          }
+        }
+    </script>
 </head>
 <body>
 <div th:replace="fragments :: navbar"></div>
@@ -12,11 +29,16 @@
             <h1>Upload a new image</h1>
         </div>
     </div>
+    <div class="row justify-content-center">
+        <div class="col text-center">
+            <img class="invisible" src="" height="250" alt="user selected image">
+        </div>
+    </div>
     <div class="row justify-content-center">
         <form action="/upload" class="mb-3 col-6 text-center" enctype="multipart/form-data" method="POST">
             <input th:name="${_csrf.parameterName}" type="hidden" th:value="${_csrf.token}"/>
             <label class="form-label" for="formFile">Image file</label>
-            <input class="form-control" id="formFile" name="file" type="file" th:accept="${@imageConfigurationProperties.typeListForFormFilter()}">
+            <input class="form-control" id="formFile" name="file" type="file" th:accept="${@imageConfigurationProperties.typeListForFormFilter()}" onchange="previewSelectedImage()">
             <label class="form-label" for="formTags">Image tags</label>
             <input class="form-control" id="formTags" placeholder="Tags separated by spaces" type="text" name="tags">
             <button type="submit" class="btn btn-primary mt-2">Submit</button>
