AJAX Upload Progress Bar
Uploading using POST Multipart Request
While most WebDAV client upload files using PUT verb, AJAX/HTML applications are unable to submit a file using PUT. The IT Hit WebDAV Server Engine can process files submitted with POST multipart request. The following example uploads a file to /mydocs folder:
<html> <head><title>POST Upload to WebDAV Server</title></head> <body> <form action="/mydocs/" method="post" enctype="multipart/form-data"> <input type="file" name="dummyname" /> <input type="submit" /> </form> </body> </html>
When creating a multipart POST form make sure you follow this rules:
- Specify enctype="multipart/form-data" attribute on a form tag.
- Add name attribute to a single input type=file tag.
- DO NOT add name attribute to any other input, select, textarea tags.
Always submit only one file per form. The server will be unable to calculate file size correctly if any extra input/select/textarea values submitted due to POST request standard limitations.
Action attribute can specify a folder or a file URL. If the file with such name does not exist it will be created. If the file already exists it will be overwritten.
Note that maximum file upload size in most browsers is 2Gb.
Creating AJAX Upload Progress Bar
The example below demonstrates creation of AJAX upload progress bar. It submits upload-progress REPORT request each second using XMLHttpRequest and parses the response extracting total file size and amount of bytes uploaded to the server. The example runs in Internet Explorer, Firefox and Safari. See IUploadProgress interface for upload-progress REPORT description.
<!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>AJAX Upload Progress & Cancel Upload</title>
<script type="text/javascript">
var file;
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("file").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;
}
var timerId;
function formSubmit()
{
timerId = setInterval("updateProgress()", 1000);
document.getElementById("cancelUploadBtn").disabled = false;
}
function updateProgress()
{
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
var uploadTarget = document.getElementById("frm").action + file;
request.open("REPORT", uploadTarget, false);
request.send("<upload-progress xmlns='ithit'/>");
var resp = request.responseText;
// Extract number of bytes uploaded and total content length of the file.
// Usually you will use XML DOM or regular expressions for this purposes
// but here for the sake of simplicity we will just extract using string methods.
var size;
var sizeIndex = resp.indexOf("total-content-length");
if(sizeIndex != -1)
{
size = resp.substring(resp.indexOf(">", sizeIndex)+1, resp.indexOf("</", sizeIndex));
document.getElementById("fileSize").innerHTML = size;
}
var bytes = "Finished";
var percent = 100;
var bytesIndex = resp.indexOf("bytes-uploaded");
if(bytesIndex != -1)
{
bytes = resp.substring(resp.indexOf(">", bytesIndex)+1, resp.indexOf("</", bytesIndex));
if(parseInt(size)!=0)
percent = 100*parseInt(bytes)/parseInt(size);
}
document.getElementById("bytesUploaded").innerHTML = bytes;
document.getElementById("percentUploaded").innerHTML = percent.toString().substr(0, 4) + " %";
document.getElementById("uploadProgressBar").style.width = percent.toString() + "%";
if(percent==100)
{
clearInterval(timerId);
document.getElementById("cancelUploadBtn").disabled = true;
}
}
function cancelUpload()
{
// recreate iframe to cancel upload
document.getElementById("uploadFrameHolder").innerHTML = "<iframe name='uploadFrame' ></iframe>";
clearInterval(timerId);
document.getElementById("cancelUploadBtn").disabled = true;
}
</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="file" name="dummyname" onchange="prepareUpload()" />
<input type="submit" 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>