Project

General

Profile

Docs ModUploadProgress » status.html

example 1 - status.html - stbuehler, 2009-02-17 09:50

 
<html>
<head>
<title>Upload Status</title>

<script type="text/javascript">
interval = null;
checktimeout = null;
lastbytes=0;
showparenttimeout = null;
function getXMLHttpRequest()
{
var req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject))
{
try
{
req = new XMLHttpRequest();
} catch(e)
{
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
req = false;
}
}
}

return req;
}

function roundx(x, n) {
if (n < 1 || n > 14) return false;
var e = Math.pow(10, n);
var k = (Math.round(x * e) / e).toString();
if (k.indexOf('.') == -1) k += '.';
k += e.toString().substring(1);
return k.substring(0, k.indexOf('.') + n+1);
}

function closeStatus(upload)
{
parent.upfname = '';
if (interval)
{
window.clearInterval(interval);
}
if (checktimeout)
{
window.clearTimeout(checktimeout);
}
if (upload.status != 413)
{
parent.stopStatus();
}
}

function fetch(uuid) {
var req;
var pbar;
var pbarc;
var step = 0;
var stepg = 100;

req = getXMLHttpRequest();
req.open("GET", "/progress", 1);
req.setRequestHeader("X-Progress-Id", uuid);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
/* poor-man JSON parser */
var upload = eval(req.responseText);

step = upload.received / (upload.size / 100);
stepg = 0;
if ( upload.state != undefined && step != NaN && upload.status != '413' && upload.state != 'starting' && upload.state != 'done')
{
if (checktimeout)
{
window.clearTimeout(checktimeout);
checktimeout = null;
}
} else
{
if (checktimeout == null)
{
checktimeout = window.setInterval(
function () {
closeStatus(upload);
},
5000
);
}
}

document.getElementById('fname').innerHTML = '<b>Filename:</b> ' + parent.upfname;
document.getElementById('tp').innerHTML = '<b>TP:</b> ' + roundx(((upload.received - lastbytes) / 1024),2).toString() + ' kb/s';
document.getElementById('time').innerHTML = '<b>Time:</b> ' + roundx( (upload.size - upload.received) / (upload.received - lastbytes),2) + ' s';
document.getElementById('byteinfo').innerHTML = '<b>Transfer:</b> ' + roundx(upload.received / 1024,2) + "/" + roundx(upload.size/1024,2) + ' kbs';
if (upload.state == 'done' || upload.state == 'uploading') {

bar = document.getElementById('progressbar');
w = 400 * upload.received / upload.size;
bar.style.width = w + 'px';
}

document.getElementById('state').innerHTML = '<b>Status:</b> ' + upload.state + ', ' + roundx(step,2) + '%';

lastbytes = upload.received;
// we are done, stop the interval
if (upload.state == 'done' || upload.status == '413' || step == 100) {
document.getElementById('tp').innerHTML='';
document.getElementById('time').innerHTML='';
document.getElementById('byteinfo').innerHTML='<a onclick="parent.location.reload()">Back</a>';
if (upload.status != '413')
{
document.getElementById('state').innerHTML = 'Please wait...';
closeStatus(upload);
} else
{
window.clearInterval(interval);
document.getElementById('state').innerHTML = 'Error, file too big';
}
}


}else
{
closeStatus();
}
}
}
req.send(null);
}

function openProgressBar() {
/* call the progress-updater every 1000ms */
interval = window.setInterval(
function () {
if (parent.upfname != '')
{
fetch('{TRACKING_ID}');
}
},
1000
);
}

</script>

</head>
<body onload="openProgressBar();">
<div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
<div id="state">Status is loading...</div>
<div id="tp"></div>
<div id="fname"></div>
<div id="time"></div>
<div id="byteinfo"></div>
</div>

</body>
</html>
(2-2/3)