From 288ab9834a67bf9d6189939c7035168e1f6cd6e8 Mon Sep 17 00:00:00 2001
From: Tina_Azure <->
Date: Wed, 14 Jun 2023 18:42:02 +0200
Subject: [PATCH] File Upload Progress display base implementation

---
 src/main.cpp               |  3 +--
 templates/TEST_UPLOAD.html | 45 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)
diff --git a/src/main.cpp b/src/main.cpp
index fc06c39..7b89d90 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -1064,8 +1064,7 @@ int main(int argc, char *argv[]) {
             });
 
 
-    CROW_ROUTE(app, "/fileuploadtestExecution")
-            .methods(crow::HTTPMethod::Post)([](const crow::request& postRequest) {
+    CROW_ROUTE(app, "/fileuploadtestExecution").methods(crow::HTTPMethod::Post)([](const crow::request& postRequest) {
                 crow::multipart::message multipartMessage(postRequest);
                 for (const auto& part : multipartMessage.part_map)
                 {
diff --git a/templates/TEST_UPLOAD.html b/templates/TEST_UPLOAD.html
index 28da6a3..abc15a3 100644
--- a/templates/TEST_UPLOAD.html
+++ b/templates/TEST_UPLOAD.html
@@ -2,6 +2,45 @@
 <html>
 <head>
     {{> templateIncludes/style.css.html}}
+<script type="text/javascript">
+
+    function _(el) {
+        return document.getElementById(el);
+    }
+
+    function upload() {
+        var file = _("FILE_SUBMISSION").files[0];
+        var formdata = new FormData();
+        formdata.append("FILE_SUBMISSION", file);
+        var ajax = new XMLHttpRequest();
+        ajax.upload.addEventListener("progress", progressHandler, false);
+        ajax.addEventListener("load", completeHandler, false);
+        ajax.addEventListener("error", errorHandler, false);
+        ajax.addEventListener("abort", abortHandler, false);
+        ajax.open("POST", "/fileuploadtestExecution"); 
+        ajax.send(formdata);
+    }
+
+    function progressHandler(event) {
+        _("loadedtotal").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
+        var percent = (event.loaded / event.total) * 100;
+        _("progressBar").value = Math.round(percent);
+        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
+    }
+
+    function completeHandler(event) {
+        _("status").innerHTML = event.target.responseText;
+        _("progressBar").value = 0;
+    }
+
+    function errorHandler(event) {
+        _("status").innerHTML = "Upload Failed";
+    }
+
+    function abortHandler(event) {
+        _("status").innerHTML = "Upload Aborted";
+    }
+</script>
 </head>
 <body>
 <form method="post" enctype="multipart/form-data" action="/fileuploadtestExecution">
@@ -14,6 +53,12 @@
         <input type="submit"/>
     </p>
 </form>
+<form method="post" enctype="multipart/form-data">
+    <input type="file" name="FILE_SUBMISSION" id="FILE_SUBMISSION" onchange="upload()"><br>
+    <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
+    <h2 id="status"></h2>
+    <p id="loadedtotal"></p>
+</form>
 </body>
 </html>
 
