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.

Running Image Uploader in Silent Mode

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:

JavaScript

<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>

Adding Progress Bar Element

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:

HTML

<span id="ProgressBarText" style="display:none;"></span>
<br />
<div id="ProgressBar" style="width:0px;height:20px;background-color:blue;display:none;"></div>

Changing Progress Bar Position on Progress Status Change

To move the progress bar position you need to add the following event handler:

JavaScript

<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>

Concurrent Upload

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:

JavaScript

<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>
Note

You may use the Progress argument for a sequential upload too.