98 lines
No EOL
3.1 KiB
HTML
98 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="-1">
|
|
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
|
|
<script>
|
|
// global variables
|
|
var sendSize;
|
|
var ws;
|
|
|
|
function _(el) {
|
|
return document.getElementById(el);
|
|
}
|
|
function init() {
|
|
ws = new WebSocket('ws://' + window.location.hostname + ':81/');
|
|
|
|
ws.onmessage = function(event){
|
|
var response = JSON.parse(event.data);
|
|
var key;
|
|
for(key in response) {
|
|
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() {
|
|
_("cancel").hidden = true;
|
|
var file = _("file1").files[0];
|
|
sendSize = file.size;
|
|
|
|
var JSONmsg = {};
|
|
JSONmsg['UploadSize'] = sendSize;
|
|
var str = JSON.stringify(JSONmsg);
|
|
console.log("JSON Tx:", str);
|
|
ws.send(str);
|
|
|
|
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) {
|
|
_("status").innerHTML = event.target.responseText;
|
|
_("progressBar").value = 0;
|
|
_("loaded_n_total").innerHTML = "Uploaded " + sendSize + " bytes of " + sendSize;
|
|
var file = _("file1").files[0];
|
|
if(file.name.endsWith(".bin")) {
|
|
setTimeout(function () {
|
|
window.location.assign("/");
|
|
}, 5000);
|
|
}
|
|
else {
|
|
setTimeout(function () {
|
|
window.location.reload();
|
|
}, 1000);
|
|
}
|
|
}
|
|
function errorHandler(event) {
|
|
_("status").innerHTML = "Upload Failed";
|
|
}
|
|
function abortHandler(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" autocomplete="off">
|
|
<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" id="cancel">
|
|
</form>
|
|
</body>
|
|
</html> |