From 1388aad2dc48b20783315b76f62aad823d2f5089 Mon Sep 17 00:00:00 2001
From: jgstew <james@jgstew.com>
Date: Thu, 22 Feb 2024 11:34:51 -0500
Subject: [PATCH] tweaks for fileupload

---
 dashboards/FileUpload.ojo | 58 +++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 18 deletions(-)
diff --git a/dashboards/FileUpload.ojo b/dashboards/FileUpload.ojo
index 793577b..787e332 100644
--- a/dashboards/FileUpload.ojo
+++ b/dashboards/FileUpload.ojo
@@ -14,32 +14,54 @@
         <HTML><![CDATA[
 <script language="javascript">InsertUtilityDiv();</script>
 
+<style>
+  #result {
+      white-space: pre-wrap; /* Allow wrapping */
+      font-family: monospace; /* Use monospace font for code block */
+      border: 1px solid #ccc; /* Add border for clarity */
+      padding: 10px; /* Add padding for spacing */
+      margin-top: 10px; /* Add margin to separate from other elements */
+  }
+</style>
+
 <script>
-    function apiTestCallback(error, status, body) {
-        if(status == 200){
-          alert(body);
-        }else{
-           alert(error);
-        }
+  function apiTestCallback(error, status, body) {
+      // Hide spinner after receiving response
+      document.getElementById('spinner').style.display = 'none';
+
+      if(status == 200){
+          // Write body result to div
+          document.getElementById('result').innerText = body;
+      } else {
+          // Write error to div
+          document.getElementById('result').innerText = error;
       }
+  }
+
+  function uploadFile() {
+      // Show spinner during upload
+      document.getElementById('spinner').style.display = 'block';
 
-    function uploadFile() {
-        var fileInput = document.getElementById('fileInput');
-        var fileData = fileInput.files[0];
-        var options = { data: fileData, customHeaders: {'Content-Disposition': 'attachment; filename="test.txt"'} }
-        API.Post('upload', options, apiTestCallback );
-    }
+      var fileInput = document.getElementById('fileInput');
+      var fileData = new FormData(); // Create FormData object
+      fileData.append('file', fileInput.files[0]); // Append file to FormData object
+      var options = { data: fileData, customHeaders: {'Content-Disposition': 'attachment; filename="test.txt"'} }
+      API.Post('upload', options, apiTestCallback);
+  }
 </script>
 
 <h2>Upload File</h2>
 
 <input type="file" id="fileInput">
-<button id="uploadButton" onclick="uploadFile()" >Upload</button>
-<style>
-div#wr_datapage > br + br {
-    display: none;
-}
-</style>
+<button id="uploadButton" onclick="uploadFile()">Upload</button>
+
+<!-- Spinner element -->
+<div id="spinner" style="display: none;">
+  <img src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt="Loading..." width="50" height="50">
+</div>
+
+<!-- Result div -->
+<div id="result"></div>
         ]]></HTML>
         </Page>
     </Wizard>
