Upload - Progress bar indicator | ||
Article, Upload - Progress bar indicator | ||
Member of ScriptUtils.ASPForm |
Main idea for progress bar indicator |
---|
Client browsers
have no possibility to show some progress bar when uploading data (or post
big forms). Internet explorer also does not accept response data during
upload. So the only way to show upload progress bar indicator is to
create a second browser window (with second server connection) and write
info about current upload to the second
window. Huge-ASP upload is true free-threaded COM component - so you have full access to upload component from the second session. You can get main upload parameters (upload size, upload time, etc.) and you can also enumerate all source form fields (files) and acces field properties (including current state and size of the field). Huge-ASP upload samples contains several progressbar indicators. These indicators has the same algorithm of their work but different client design. |
Technical details |
---|
This part is a technical description of progress bar indicator functionality. You do not need to know it - simple use prepared progress indicators from Huge-ASP upload samples.
1. Unique UploadIDYou have to create an identifier to join primary upload request and second window with progress indicator.This identifier can be any long number. You can use prepared JavaScript function ProgressBar. The function generates unique UploadID and then sends the same UploadID as a querystring parameter to upload script and to progress bar script and opens a new window of progress bar. The ProgressBar script should be on client-side along with upload form. You can choose any ProgressScript from our progress gallery. <SCRIPT> //Open window with progress bar. //pair upload window and progress window (using UploadID). function ProgressBar(form){ //ASP script handling progress window var ProgressScript = 'progress.asp' //Progress window parameters var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no' pp+=',scrollbars=no,resizable=yes,width=350,height=200'; //1. Get unique UploadID var UploadID UploadID = Math.round(Math.random() * 0x7FFFFFF0) //2. Add upload ID to form action URL var action = form.action; if ('' == action) action = ''+document.location; action = AddToQuery(action, 'UploadID', UploadID); form.action = action //3. Open progress window with the same UploadID var ProgressURL ProgressURL = ProgressScript + '?UploadID=' + UploadID var v = window.open(ProgressURL,'_blank',pp) return true; }; //Adds value and its name to querystring function AddToQuery(q, valname, val){ if (q.indexOf('?')<0) { q += '?'; } else { var pv = q.indexOf(valname+'='); if (pv >= 0){ var amp = q.indexOf('&', pv); if (amp<0) { q = q.substr(0, pv) } else { q = q.substr(0, pv) + q.substr(amp+1) + '&';} } else { if (q.substr(q.length-1)!='?') q += '&' }; };//if (q.indexOf('?') q += valname + '=' + val return q }; </SCRIPT> 2. Call the progress script functionThe ProgressBar function is called from OnSubmit method of your upload form:<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return ProgressBar(this);"> ....form elements.... </form> 3. Set the unique upload ID for ASPForm object in upload script... 'Progress bar window will receive the same ID. If Len(Request.QueryString("UploadID"))>0 Then Form.UploadID = Request.QueryString("UploadID")'{/b} End If 'was the Form successfully received? If Form.State = fsCompletted Then 'Completted ... |