<html>
<head>
<title>Aurigma Image Uploader</title>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="Style.css" type="text/css" rel="stylesheet">
<script>
//Count of Image Uploaders on page
var CONTROL_COUNT = 4;
//Max width of progress bar
var PROGRESS_BAR_WIDTH = 200;
//Current uploaded control
var iCurrentControl;
function startUpload()
{
//Hide table with uploaders
document.getElementById("TableUploaders").style.display = "none";
//Show table with progress bar
document.getElementById("TableProgress").style.display = "block";
//Show progress bar text label
document.getElementById("ProgressBarText").innerText = "Uploading..."
//Set width of progress bar to 0 pixels
document.getElementById("ProgressBar").style.width = "0px";
//Hide upload button
document.getElementById("ButtonUpload").style.display = "none";
//Show cancel button
document.getElementById("ButtonCancel").style.display = "block";
//Set index of current Image Uploader to 0
iCurrentControl = 0;
cancelOrError = false;
upload();
}
//Process upload for next Image Uploader
function upload()
{
//Increase current control index
iCurrentControl = iCurrentControl + 1;
//Check whether last uploader finished uploading
if (iCurrentControl>CONTROL_COUNT)
{
//Make final action of the upload
successUpload();
}
else
{
//check whether something is selected for uploading; if not, just skip this uploader
var oImageUploader = document.getElementById("ImageUploader" + iCurrentControl);
if (oImageUploader.UploadFileCount>0)
{
oImageUploader.Send();
}
else
{
upload();
}
}
}
//After all data was sent successfully, let's perform the final action
//(in our case it is redirection to another page).
function successUpload()
{
//Redirect to another page
window.location.href = "PictureGallery.asp"
}
//If some of uploaders fail, handle this situation
function errorUpload()
{
//Show table with uploaders
document.getElementById("TableUploaders").style.display = "block";
//Hide table with progress bar
document.getElementById("TableProgress").style.display = "none";
//Show upload button
document.getElementById("ButtonUpload").style.display = "block";
//Hide cancel button
document.getElementById("ButtonCancel").style.display = "none";
alert("Error occurred during upload");
}
function cancelUpload()
{
document.getElementById("ImageUploader" + iCurrentControl).Stop();;
//Show table with uploaders
document.getElementById("TableUploaders").style.display = "block";
//Hide table with progress bar
document.getElementById("TableProgress").style.display = "none";
//Show upload button
document.getElementById("ButtonUpload").style.display = "block";
//Hide cancel button
document.getElementById("ButtonCancel").style.display = "none";
alert("The upload was canceled");
}
//Display progress bar
function progress(Status, Progress, ValueMax, Value, StatusText)
{
var oProgresBar = document.getElementById("ProgressBar");
var oProgresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Do nothing
break;
case "PREPARE":
var position = (iCurrentControl-1)/CONTROL_COUNT*100+Value/ValueMax*100/CONTROL_COUNT/2;
//Show preparing progress
oProgresBarText.innerText = Status+" "+Math.round(position)+"%";
//Set width of progress bar
oProgresBar.style.width = Math.round(position*2)+"px";
break;
case "UPLOAD":
var position = (iCurrentControl-0.5)/CONTROL_COUNT*100+Value/ValueMax*100/CONTROL_COUNT/2;
//Show upload progress
oProgresBarText.innerText = Status+" "+Math.round(position)+"%";
//Set width of progress bar
oProgresBar.style.width = Math.round(position*2)+"px";
break;
case "COMPLETE":
//Process upload of next control
upload();
break;
case "CANCEL":
//Do nothing (cancelUpload is already called in Cancel button click handler)
break;
case "ERROR":
//Some error arised. Call errorUpload function to handle it.
errorUpload();
break;
}
}
</script>
<script for="ImageUploader1" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);
</script>
<script for="ImageUploader2" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);
</script>
<script for="ImageUploader3" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);
</script>
<script for="ImageUploader4" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);
</script>
</head>
<body bgcolor="#C3DAF9">
<input id="ButtonUpload" name="ButtonUpload" type="Button" value="Upload" onclick="startUpload();">
<input id="ButtonCancel" name="ButtonCancel" type="Button" value="Cancel" onclick="cancelUpload();" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" width="440" height="440" ID="TableProgress" style="display:none">
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td width="200">
<span id="ProgressBarText"></span>
<br>
<div id="ProgressBar" style="width:0px;height:20px;background-color:blue;"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="440" ID="TableUploaders">
<tr>
<td align="center" width="220">
<b>Image Uploader #1</b>
</td>
<td align="center" width="220">
<b>Image Uploader #2</b>
</td>
</tr>
<tr>
<td width="220">
<object type="application/x-oleobject"
classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220"
CodeBase="../ImageUploader2.cab" id="ImageUploader1" name="ImageUploader1" VIEWASTEXT>
<param name="Layout" value="OnePane">
<param name="UploadView" value="Thumbnails">
<param name="ShowButtons" value="False">
<param name="ShowStatusPane" value="False">
<param name="ShowDescriptions" value="False">
<param name="EnableRotate" value="False">
<param name="PreviewThumbnailSize" value="65">
<param name="SilentMode" value="True">
<param name="Action" value="Upload.asp?delete=true">
</object>
</td>
<td width="220">
<object type="application/x-oleobject"
classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220"
CodeBase="../ImageUploader2.cab" id="ImageUploader2" name="ImageUploader2" VIEWASTEXT>
<param name="Layout" value="OnePane">
<param name="UploadView" value="Thumbnails">
<param name="ShowButtons" value="False">
<param name="ShowStatusPane" value="False">
<param name="ShowDescriptions" value="False">
<param name="EnableRotate" value="False">
<param name="PreviewThumbnailSize" value="65">
<param name="SilentMode" value="True">
<param name="Action" value="Upload.asp">
</object>
</td>
</tr>
<tr>
<td align="center" width="220">
<b>Image Uploader #3</b>
</td>
<td align="center" width="220">
<b>Image Uploader #4</b>
</td>
</tr>
<tr>
<td width="220">
<object type="application/x-oleobject"
classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220"
CodeBase="../ImageUploader2.cab" id="ImageUploader3" name="ImageUploader3" VIEWASTEXT>
<param name="Layout" value="OnePane">
<param name="UploadView" value="Thumbnails">
<param name="ShowButtons" value="False">
<param name="ShowStatusPane" value="False">
<param name="ShowDescriptions" value="False">
<param name="EnableRotate" value="False">
<param name="PreviewThumbnailSize" value="65">
<param name="SilentMode" value="True">
<param name="Action" value="Upload.asp">
</object>
</td>
<td width="220">
<object type="application/x-oleobject"
classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220"
CodeBase="../ImageUploader2.cab" id="ImageUploader4" name="ImageUploader4" VIEWASTEXT>
<param name="Layout" value="OnePane">
<param name="UploadView" value="Thumbnails">
<param name="ShowButtons" value="False">
<param name="ShowStatusPane" value="False">
<param name="ShowDescriptions" value="False">
<param name="EnableRotate" value="False">
<param name="PreviewThumbnailSize" value="65">
<param name="SilentMode" value="True">
<param name="Action" value="Upload.asp">
</object>
</td>
</tr>
</table>
</body>
</html>