ota from local file with upload progress and result

web/index.css

@@ -316,4 +316,22 @@ body {
   #adminPassInput {
     margin-bottom: 1em;
   }
-  
+  input#uploadFile {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  div#uploadProgress {
+    width: 100%;
+    max-width: 20em;
+    height: 1em;
+    margin-left: 1em;
+    /* margin-right: auto; */
+    border: 1px solid grey;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+#uploadDone{
+  background-color: blue;
+  width: 0px;
+  height: 100%;
+}

web/index.html

@@ -76,10 +76,20 @@
 
 </div>
 <div class="tabPage hidden" id="updatePage">
-  <form action="api/update" method="post" id="uploadForm">
+  <div class="row">
+    <span class="label">currentVersion</span>
+    <span class="value status-version">---</span>
+  </div>
+  <div class="row">
+    <span class="label">New Firmware</span>
     <input type="file" name="file1" id="uploadFile">
-  </form>
+  </div>
+  <div id="uploadProgress">
+    <div id="uploadDone"></div>
+  </div>
+  <div class="buttons">
     <button id="uploadBin">Upload</button>
+  </div>
 </div>
 
 </div>

web/index.js

@@ -85,6 +85,9 @@ function update() {
                 else {
                     let el = document.getElementById(k);
                     if (el) el.textContent = jsonData[k];
+                    forEl('.status-'+k,function(el){
+                        el.textContent=jsonData[k];
+                    });
                 }
             }
             lastUpdate = (new Date()).getTime();
@@ -1447,13 +1450,50 @@ function updateDashboard(data) {
 }
 function uploadBin(){
     let el=document.getElementById("uploadFile");
+    let progressEl=document.getElementById("uploadDone");
     if (! el) return;
     if ( el.files.length < 1) return;
     ensurePass()
         .then (function(hash){
+            let file=el.files[0];
+            let len=file.size;
             let req = new XMLHttpRequest();
             req.onloadend=function(){
-                alert("upload complete");
+                let result="unknown error";
+                try{
+                    let jresult=JSON.parse(req.responseText);
+                    if (jresult.status == 'OK'){
+                        result='';
+                    }
+                    else{
+                        if (jresult.status) {
+                            result=jresult.status;
+                        }
+                    }
+                }catch (e){
+                    result="Error "+req.status;
+                }
+                if (progressEl){
+                    progressEl.style.width=0;
+                }
+                if (! result){
+                    alertRestart();
+                }
+                else{
+                    alert("update error: "+result);
+                }
+            }
+            req.onerror=function(e){
+                alert("unable to upload: "+e);
+            }
+            if (progressEl){
+                progressEl.style.width=0;
+                req.upload.onprogress=function(ev){
+                    if (ev.lengthComputable){
+                        let percent=100*ev.loaded/ev.total;
+                        progressEl.style.width=percent+"%";
+                    }
+                }
             }
             let formData = new FormData();
             formData.append("file1", el.files[0]);