Project

General

Profile

Actions
History

Docs » Z Ancient »

Docs ModUploadProgress » History » Revision 20

« Previous | Revision 20/22 (diff) | Next »
gaborca, 2018-08-20 14:32

Module mod_uploadprogress

Options

upload-progress.progress-url

string, empty by default; use "/progress" (or something else) to enable the module

Config Example

upload-progress.progress-url = "/progress"

Warning

This module will not work if you are using more than one worker ("server.max-worker":Server.max-workerDetails)

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.

https://www.my-domain.com/uploadfile.php?X-Progress-ID=abcdefghabcdefghabcdefghabcdefgh

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.

https://www.my-domain.com/progress?X-Progress-ID=abcdefghabcdefghabcdefghabcdefgh

If there is no upload progress with that identifier then you get
the following response without the quotes: "not in progress".

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.

XML Response

The returned XML will look like this:

<?xml version="1.0" encoding="iso-8859-1"?><upload><size>14953670</size><received>391182</received></upload>

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:

Example 2

This example was created with maximum compatibility in mind, it even works in Internet Explorer 5.0.

<!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?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>

Updated by gaborca over 6 years ago · 20 revisions