Docs/ModUploadProgress: status.html

File status.html, 4.2 kB (added by Terminar, 1 year ago)

status page containing progress

Line 
1 <html>
2 <head>
3     <title>Upload Status</title>
4
5 <script type="text/javascript">
6  interval = null;
7  checktimeout = null;
8  lastbytes=0;
9  showparenttimeout = null;
10  
11 function getXMLHttpRequest()
12 {
13     var req = false;
14     // branch for native XMLHttpRequest object
15     if(window.XMLHttpRequest && !(window.ActiveXObject))
16     {
17         try
18         {
19             req = new XMLHttpRequest();
20         } catch(e)
21         {
22             req = false;
23         }
24        
25     // branch for IE/Windows ActiveX version
26     } else if(window.ActiveXObject)
27     {
28         try
29         {
30             req = new ActiveXObject("Msxml2.XMLHTTP");
31         } catch(e)
32         {
33             try
34             {
35                 req = new ActiveXObject("Microsoft.XMLHTTP");
36             } catch(e)
37             {
38                 req = false;
39             }
40         }
41     }
42
43     return req;
44 }
45
46 function roundx(x, n) {
47   if (n < 1 || n > 14) return false;
48   var e = Math.pow(10, n);
49   var k = (Math.round(x * e) / e).toString();
50   if (k.indexOf('.') == -1) k += '.';
51     k += e.toString().substring(1);
52     return k.substring(0, k.indexOf('.') + n+1);
53 }
54
55 function closeStatus(upload)
56 {
57     parent.upfname = '';
58    
59     if (interval)
60     {
61         window.clearInterval(interval);
62     }
63    
64     if (checktimeout)
65     {
66         window.clearTimeout(checktimeout);
67     }
68    
69     if (upload.status != 413)
70     {
71         parent.stopStatus();
72     }
73 }
74
75 function fetch(uuid) {
76     var req;
77     var pbar;
78     var pbarc;
79     var step = 0;
80     var stepg = 100;
81
82  req = getXMLHttpRequest();
83  req.open("GET", "/progress", 1);
84  req.setRequestHeader("X-Progress-Id", uuid);
85  req.onreadystatechange = function () {
86   if (req.readyState == 4) {
87    if (req.status == 200) {
88     /* poor-man JSON parser */
89     var upload = eval(req.responseText);
90
91     step = upload.received / (upload.size / 100);
92     stepg = 0;
93  
94     if ( upload.state != undefined && step != NaN && upload.status != '413' && upload.state != 'starting' && upload.state != 'done')
95     {
96         if (checktimeout)
97         {
98             window.clearTimeout(checktimeout);
99             checktimeout = null;
100         }
101     } else
102     {
103         if (checktimeout == null)
104         {
105             checktimeout = window.setInterval(
106                     function () {
107                         closeStatus(upload);
108                     },
109                         5000
110                     );
111         }
112        
113     }
114
115     document.getElementById('fname').innerHTML = '<b>Filename:</b> ' + parent.upfname;
116     document.getElementById('tp').innerHTML = '<b>TP:</b> ' + roundx(((upload.received - lastbytes) / 1024),2).toString() + ' kb/s';
117     document.getElementById('time').innerHTML = '<b>Time:</b> ' + roundx( (upload.size - upload.received) / (upload.received - lastbytes),2) + ' s';
118     document.getElementById('byteinfo').innerHTML = '<b>Transfer:</b> ' + roundx(upload.received / 1024,2) + "/" + roundx(upload.size/1024,2) + ' kbs';
119     
120     if (upload.state == 'done' || upload.state == 'uploading') {
121
122         bar = document.getElementById('progressbar');
123         w = 400 * upload.received / upload.size;
124         bar.style.width = w + 'px';
125     }
126
127     document.getElementById('state').innerHTML = '<b>Status:</b> ' + upload.state + ', ' + roundx(step,2) + '%';
128
129     lastbytes = upload.received;
130     
131     // we are done, stop the interval
132     if (upload.state == 'done' || upload.status == '413' || step == 100) {
133     
134         document.getElementById('tp').innerHTML='';
135         document.getElementById('time').innerHTML='';
136         document.getElementById('byteinfo').innerHTML='<a onclick="parent.location.reload()">Back</a>';
137     
138      if (upload.status != '413')
139      {
140         document.getElementById('state').innerHTML = 'Please wait...';
141         closeStatus(upload);
142      } else
143      {
144         window.clearInterval(interval);
145         document.getElementById('state').innerHTML = 'Error, file too big';
146      }
147     
148     }
149
150
151     
152    }else
153    {
154     closeStatus();
155    }
156   
157   }
158  
159  }
160  
161  req.send(null);
162 }
163
164 function openProgressBar() {
165  /* call the progress-updater every 1000ms */
166  interval = window.setInterval(
167    function () {
168     if (parent.upfname != '')
169     {
170      fetch('{TRACKING_ID}');
171     }
172    },
173    1000
174  );
175  
176 }
177
178  </script>
179
180 </head>
181 <body onload="openProgressBar();">
182 <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
183    <div id="state">Status is loading...</div>
184    <div id="tp"></div>
185    <div id="fname"></div>
186    <div id="time"></div>
187    <div id="byteinfo"></div>
188  </div>
189
190 </body>
191 </html>