83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<script>
|
|
// global variables
|
|
var sendSize;
|
|
var Socket;
|
|
|
|
function _(el) {
|
|
return document.getElementById(el);
|
|
}
|
|
function init() {
|
|
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
|
|
|
Socket.onmessage = function(event){
|
|
var response = JSON.parse(event.data);
|
|
var key;
|
|
for(key in response) {
|
|
console.log("JSON decode:", key, response[key]);
|
|
switch(key) {
|
|
case "progress":
|
|
// actual data bytes received as fed back via web socket
|
|
var bytes = response[key];
|
|
_("loaded_n_total").innerHTML = "Uploaded " + bytes + " bytes of " + sendSize;
|
|
var percent = Math.round( 100 * (bytes / sendSize));
|
|
_("progressBar").value = percent;
|
|
_("status").innerHTML = percent+"% uploaded.. please wait";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function uploadFile() {
|
|
var file = _("file1").files[0];
|
|
sendSize = file.size;
|
|
var formdata = new FormData();
|
|
formdata.append("update", file);
|
|
var ajax = new XMLHttpRequest();
|
|
// progress is handled via websocket JSON sent from controller
|
|
// using server side progress only shows the buffer filling, not actual delivery.
|
|
ajax.addEventListener("load", completeHandler, false);
|
|
ajax.addEventListener("error", errorHandler, false);
|
|
ajax.addEventListener("abort", abortHandler, false);
|
|
ajax.open("POST", "/updatenow");
|
|
ajax.send(formdata);
|
|
}
|
|
function completeHandler(event) {
|
|
console.log(event);
|
|
_("status").innerHTML = event.target.responseText;
|
|
_("progressBar").value = 0;
|
|
_("loaded_n_total").innerHTML = "Uploaded " + sendSize + " bytes of " + sendSize;
|
|
setTimeout(function () {
|
|
window.location.assign("/");
|
|
}, 5000);
|
|
}
|
|
function errorHandler(event) {
|
|
console.log(event);
|
|
_("status").innerHTML = "Upload Failed";
|
|
}
|
|
function abortHandler(event) {
|
|
console.log(event);
|
|
_("status").innerHTML = "Upload Aborted";
|
|
}
|
|
</script>
|
|
<style>
|
|
body {font-family: Arial, Helvetica, sans-serif;}
|
|
</style>
|
|
<title>Afterburner firmware update</title>
|
|
</head>
|
|
<body onload="javascript:init()">
|
|
<h1>Afterburner firmware update</h1>
|
|
<form id='upload_form' method='POST' enctype='multipart/form-data'>
|
|
<input type='file' name='file1' id='file1'> <BR>
|
|
<input type='button' value='Update' onclick="uploadFile()">
|
|
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress><BR>
|
|
<h3 id="status"></h3>
|
|
<p id="loaded_n_total"></p>
|
|
<BR>
|
|
<input type='button' onclick=window.location.assign("/") value='Cancel'>
|
|
</form>
|
|
</body>
|
|
</html> |