Image Uploader provides a standard progress bar dialog. However, sometimes it is more convenient to replace it with your own (for example, to customize it according to your site design). Besides, you may want to add custom error handling. This topic demonstrates how to do that.
To suppress the standard progress bar you should activate a so-called silent mode. In the
silent mode, no default message boxes and no progress bar will be displayed. The property named
SilentMode toggles this state. Specify
true to switch to the silent mode:
<script type="text/javascript" src="iuembed.js"> </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);
//...Any other params...
iu.addParam("SilentMode", "true");
//...Any other event handlers...
iu.addEventListener("Progress", "ImageUploader_Progress");
//...
iu.writeHtml();
</script>A custom progress bar may be implemented in several ways. For example, you can use a standard ActiveX component Progress Bar, or use the IMG element (or some other element) changing its width. Let's use the DIV element and change its width via styles:
<span id="ProgressBarText" style="display:none;"></span> <br /> <div id="ProgressBar" style="width:0px;height:20px;background-color:blue;display:none;"></div>
To move the progress bar position you need to add the following event handler:
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
//Redirect to galery.asp page when upload process is completed
//window.location.replace('gallery.asp');
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>In case of a concurrent upload,
the example above will not work as ValueMax and Value arguments
contain different values for different connections. Instead, you may use the
Progress argument that contains a value reflecting the whole process completion in
percentage terms. A modified version of the ImageUploader_Progress handler may
look like the following:
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>You may use the Progress argument for a sequential upload too.