Project

General

Profile

Docs ModUploadProgress » History » Revision 19

Revision 18 (gaborca, 2018-08-20 14:19) → Revision 19/22 (gaborca, 2018-08-20 14:20)

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> <p><button type="button" id="button">state</button> <span id="state"></span></p> 
 <script> 
 function get_state() { 
   var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 

   function handle() { 
     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; 
   xhr.send(); 
 } 

 var reg = new RegExp('size>([0-9]+)</size><received>([0-9]+)</rec'), timer; 

 function start_interval() { 
   timer = setInterval(get_state, 1000); 
 } 

 var button = document.getElementById('button'), upload = document.getElementById('upload'), state = document.getElementById('state'), upload_frame = document.getElementById('upload_frame'), f = upload_frame.contentWindow; 

 upload.onsubmit = start_interval; 
 </script> 
 </body> 
 </html></pre>