Displaying Upload Progress with JavaScript WebDAV Library
If your server runs IT Hit WebDAV Server Engine with implemented Resumable Upload feature you can request amount of bytes uploaded to server and total size of file being uploaded.
Probing Resumable Upload Support
To detect if item supports Resumable Upload feature probe the ResumableUpload bit in Features enumeration:
var oNS = ITHit.WebDAV.Client;
var session = new oNS.WebDavSession();
var resource = session.OpenItem("http://server/LargeFile.exe");
var resumableUploadSupported = (resource.SupportedFeatures().Features & oNS.Features.ResumableUpload) == 0;
Getting Upload Progress
To get number of bytes uploaded to server and entire file length use the HierarchyItem.GetUploadProgress() method that returns array of UploadProgressInfo objects. If GetUploadProgress is called for file the array will contain a single object with info about this file upload progress. Use UploadProgressInfo.BytesUploaded and UploadProgressInfo.TotalContentLength to get ammout of bytes uploaded and total file size of file that is being uploaded:
var oNS = ITHit.WebDAV.Client;
var session = new oNS.WebDavSession();
var resource = session.OpenItem("http://server/LargeFile.exe");
var progress = resource.GetUploadProgress()[0];
var percent = 100 * progress.BytesUploaded / progress.TotalContentLength;
Creating JavaScript Upload Progress Bar
The example below demonstrates creation of JavaScript upload progress bar using IT Hit WebDAV AJAX library:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Javascript Upload Progress & Cancel Upload</title>
<script type="text/javascript" src="ITHitWebDAVClient.js" ></script>
<script type="text/javascript">
var file;
var timerId;
var resource;
function prepareUpload()
{
document.getElementById("fileSize").innerHTML = "";
document.getElementById("bytesUploaded").innerHTML = "";
document.getElementById("percentUploaded").innerHTML = "";
document.getElementById("uploadProgressBar").style.width = "0%";
// get file name
file = document.getElementById("fileBtn").value;
if(file.lastIndexOf("\\")>=0)
file = file.substr(file.lastIndexOf("\\")+1);
document.getElementById("fileName").innerHTML = file;
// get folder path
var curFolder = window.location.href;
if(curFolder[curFolder.length-1]!="/")
curFolder = curFolder.substring(0, curFolder.lastIndexOf("/")+1);
document.getElementById("target").innerHTML = curFolder;
document.getElementById("frm").action = curFolder;
}
function formSubmit()
{
resource = null;
timerId = setInterval("updateProgress()", 1000);
document.getElementById("cancelUploadBtn").disabled = false;
document.getElementById("uploadBtn").disabled = true;
}
function updateProgress()
{
if (resource == null)
{
var uploadTarget = document.getElementById("frm").action + file;
var oNS = ITHit.WebDAV.Client;
var session = new oNS.WebDavSession();
try
{
resource = session.OpenItem(uploadTarget);
}
catch(e)
{
if (e instanceof oNS.Exceptions.NotFoundException)
{ // the file is not yet created by server.
document.getElementById("bytesUploaded").innerHTML = "Waiting...";
return;
}
else
throw e;
}
// probe if server supports resumable upload
if ((resource.SupportedFeatures().Features & oNS.Features.ResumableUpload) == 0)
{
stopUpdatingProgress();
alert("Server does not support Resumable Upload feature.");
return;
}
}
var progress = resource.GetUploadProgress()[0];
var percent = 100 * progress.BytesUploaded / progress.TotalContentLength;
document.getElementById("fileSize").innerHTML = progress.TotalContentLength + " bytes";
document.getElementById("bytesUploaded").innerHTML = progress.BytesUploaded + " bytes";
document.getElementById("percentUploaded").innerHTML = percent.toString().substr(0, 4) + " %";
document.getElementById("uploadProgressBar").style.width = percent.toString() + "%";
if (percent == 100)
stopUpdatingProgress();
}
function cancelUpload()
{
// recreate iframe to cancel upload
document.getElementById("uploadFrameHolder").innerHTML = "<iframe name='uploadFrame' ></iframe>";
stopUpdatingProgress();
}
function stopUpdatingProgress()
{
clearInterval(timerId);
document.getElementById("cancelUploadBtn").disabled = true;
document.getElementById("uploadBtn").disabled = false;
}
</script>
</head>
<body>
<span id="uploadFrameHolder" style="display:none"><iframe name="uploadFrame" ></iframe></span>
<form id="frm" method="post" enctype="multipart/form-data" target="uploadFrame" onsubmit="formSubmit()">
<input type="file" id="fileBtn" name="dummyname" onchange="prepareUpload()" /><br />
<input type="submit" id="uploadBtn" value="Upload" />
</form>
<table>
<tr><td>File Name: </td><td id="fileName"></td></tr>
<tr><td>Upload Target: </td><td id="target"></td></tr>
<tr><td>File Size: </td><td id="fileSize"></td></tr>
<tr><td>Bytes Uploaded: </td><td id="bytesUploaded"></td></tr>
<tr>
<td>Upload Progress: </td>
<td>
<table>
<tr>
<td>
<div style="width:200px; height:10px; border: solid 1px black; font-size:0px">
<div id="uploadProgressBar" style=" background-color: gray; height:100%; width:0%"></div>
</div>
</td>
<td id="percentUploaded"></td>
</tr>
</table>
</td>
</tr>
</table>
<input id="cancelUploadBtn" disabled="true" type="button" value="Cancel" onclick="cancelUpload()" />
</body>
</html>
|