Docs ModUploadProgress » History » Revision 21
Revision 20 (gaborca, 2018-08-20 14:32) → Revision 21/22 (gaborca, 2018-08-20 15:32)
h1. Module mod_uploadprogress
{{>toc}}
h2. Options
h3. upload-progress.progress-url
string, empty by default; use "/progress" (or something else) to enable the module
h2. Config Example
<pre>
upload-progress.progress-url = "/progress"
</pre>
h2. Warning
This module will not work if you are using more than one worker ("server.max-worker":Server.max-workerDetails)
h2. Description
As of version 1.4.42 this module can be used to track the progress of a current upload.
If you want to track the progress of a file upload, you have to call
your upload processing url with an extra parameter called X-Progress-ID
with a 32 byte length unique string.
<pre>
https://www.my-domain.com/uploadfile.php?X-Progress-ID=abcdefghabcdefghabcdefghabcdefgh
</pre>
While uploading you can ping your upload progress url with the above
parameter using the GET method.
If you are not using GET method or the parameter length is not 32,
you will get a 404 response.
<pre>
https://www.my-domain.com/progress?X-Progress-ID=abcdefghabcdefghabcdefghabcdefgh
</pre>
If there is no upload progress with that identifier then you get
the following response without the quotes: "not in progress".
h2. How to use it
Generate a progress-id (32 hex digits - just use a md5 hash); send this progress-id in the upload request and in all progress requests, either as "X-Progress-ID" header or as "X-Progress-ID" query string parameter.
h2. XML Response
The returned XML will look like this:
<pre>
<?xml version="1.0" encoding="iso-8859-1"?><upload><size>14953670</size><received>391182</received></upload>
</pre>
h2. Example 1
Three html-files are appended as example, based on Jan's work mentioned
at the link above. You need to add the tracking_id (an example how this is
done with a single page upload and javascript is also provided at Jan's blog).
In the iframe version, you can generate the tracking_id via php or other
server-side scripting.
Warning, the files are not working out of the box, you have to change things!
Downloads:
* index.html - main page
attachment:index.html
* status.html - page containing progress
attachment:status.html
* upload.html - page posting the file
attachment:upload.html
h2. Example 2
This example was created with maximum compatibility in mind, it even works in Internet Explorer 5.0.
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>File upload progress</title>
</head>
<body>
<form action="?X-Progress-ID=a2345678901234567890123456789012" method="POST" enctype="multipart/form-data" id="upload" target="upload_frame">
<input type="file" name="file">
<input type="submit">
</form>
<iframe width="0" height="0" frameborder="0" scrolling="no" name="upload_frame" id="upload_frame"></iframe>
<p id="state"></p>
<script>
function get_state() {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function handle_request() {
if (xhr.readyState != 4) {
return;
}
var v = xhr.responseText;
if (v === 'not in progress') {
state.innerHTML = 'done';
clearInterval(timer);
return;
}
var arr = reg.exec(v);
state.innerHTML = Math.floor(100 * arr[2] / arr[1]) + '%';
}
xhr.open('GET', '/progress', '/progress?t=' + new Date().getTime(), true);
xhr.setRequestHeader('X-Progress-ID', 'a2345678901234567890123456789012');
xhr.onreadystatechange = handle_request;
xhr.send();
}
function start_interval() {
timer = setInterval(get_state, 1000);
}
var upload = document.getElementById('upload'), state = document.getElementById('state'), upload_frame = document.getElementById('upload_frame'),
f = upload_frame.contentWindow, reg = new RegExp('size>([0-9]+)</size><received>([0-9]+)</rec'), timer;
upload.onsubmit = start_interval;
</script>
</body>
</html></pre>