Upgrade form and handle code

code/html/custom.css

@@ -45,12 +45,15 @@
 .button-update {
     background: #1f8dd6;
 }
-.button-reset {
-    background: rgb(202, 60, 60);
-}
+.button-reset,
 .button-reconnect {
     background: rgb(202, 60, 60);
 }
+.button-upgrade {
+    background: rgb(202, 60, 60);
+    margin-left: 5px;
+}
+.button-upgrade-browse,
 .button-apikey {
     background: rgb(0, 202, 0);
     margin-left: 5px;
@@ -101,6 +104,15 @@ div.hint {
 .template {
     display: none;
 }
+input[name=upgrade] {
+    display: none;
+}
+#upgrade-progress {
+    display: none;
+    width: 100%;
+    height: 20px;
+    margin-top: 10px;
+}
 .pure-form .center {
     margin: .5em 0 .2em;
 }

code/html/custom.js

@@ -41,6 +41,7 @@ function doUpdate() {
     var form = $("#formSave");
     if (validateForm(form)) {
         var data = form.serializeArray();
+        delete(data['filename']);
         websock.send(JSON.stringify({'config': data}));
         $(".powExpected").val(0);
         $("input[name='powExpectedReset']")
@@ -50,6 +51,66 @@ function doUpdate() {
     return false;
 }
 
+function doUpgrade() {
+
+    var contents = $("input[name='upgrade']")[0].files[0];
+    if (typeof contents == 'undefined') {
+        alert("First you have to select a file from your computer.");
+        return false;
+    }
+    var filename = $("input[name='upgrade']").val().split('\\').pop();
+
+    var data = new FormData();
+    data.append('upgrade', contents, filename);
+
+    $.ajax({
+
+        // Your server script to process the upload
+        url: 'http://' + host + ':' + port + '/upgrade',
+        type: 'POST',
+
+        // Form data
+        data: data,
+
+        // Tell jQuery not to process data or worry about content-type
+        // You *must* include these options!
+        cache: false,
+        contentType: false,
+        processData: false,
+
+        success: function(data, text) {
+            $("#upgrade-progress").hide();
+            if (data == 'OK') {
+                alert("Firmware image uploaded, board rebooting. This page will be refreshed in 3 seconds.");
+                setTimeout(function() {
+                    window.location = "/";
+                }, 3000);
+            } else {
+                alert("There was an error trying to upload the new image, please try again.");
+            }
+        },
+
+        // Custom XMLHttpRequest
+        xhr: function() {
+            $("#upgrade-progress").show();
+            var myXhr = $.ajaxSettings.xhr();
+            if (myXhr.upload) {
+                // For handling the progress of the upload
+                myXhr.upload.addEventListener('progress', function(e) {
+                    if (e.lengthComputable) {
+                        $('progress').attr({ value: e.loaded, max: e.total });
+                    }
+                } , false);
+            }
+            return myXhr;
+        },
+
+    });
+
+    return false;
+
+}
+
 function doUpdatePassword() {
     var form = $("#formPassword");
     if (validateForm(form)) {
@@ -448,6 +509,16 @@ function init() {
     $(".button-settings-restore").on('click', restoreSettings);
     $('#uploader').on('change', onFileUpload);
     $(".button-apikey").on('click', doGenerateAPIKey);
+    $(".button-upgrade").on('click', doUpgrade);
+    $(".button-upgrade-browse").on('click', function() {
+        $("input[name='upgrade']")[0].click();
+        return false;
+    });
+    $("input[name='upgrade']").change(function (){
+        var fileName = $(this).val();
+        $("input[name='filename']").val(fileName.replace(/^.*[\\\/]/, ''));
+    });
+    $('progress').attr({ value: 0, max: 100 });
     $(".pure-menu-link").on('click', showPanel);
     $(".button-add-network").on('click', function() {
         $("div.more", addNetwork()).toggle();

code/html/index.html

@@ -242,7 +242,7 @@
                     </div>
                 </div>
 
-                <form id="formSave" class="pure-form" action="/" method="post">
+                <form id="formSave" class="pure-form" action="/" method="post" enctype="multipart/form-data">
 
                     <input class="pure-u-1 pure-u-sm-3-4" type="hidden" name="webMode" value="0" />
 
@@ -385,6 +385,16 @@
                                     </div>
                                 </div>
 
+                                <div class="pure-g">
+                                    <label class="pure-u-1 pure-u-md-1-4">Upgrade</label>
+                                    <input class="pure-u-1-2 pure-u-md-1-2" name="filename" type="text" readonly />
+                                    <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>
+                                    <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>
+                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
+                                    <div class="pure-u-1 pure-u-md-3-4"><progress id="upgrade-progress"></progress></div>
+                                    <input name="upgrade" type="file" tabindex="15" />
+                                </div>
+
                             </fieldset>
                         </div>
                     </div>