In the case when you embed Image Uploader into your AJAX-enabled application, you may need to hide and show the control at some time. To implement this you can use any approach which is normally used to hide and show HTML elements. For example, you can place the script which embeds Image Uploader inside div element and change its style attribute to display:none or display:block value to hide or show it respectively. The following code sample demonstrates this approach:
<script type="text/javascript" src="iuembed.js"> </script>
<script type="text/javascript">
function ShowHideIU()
{
if (document.getElementById("IUDiv").style.display == "block")
document.getElementById("IUDiv").style.display = "none";
else
document.getElementById("IUDiv").style.display = "block";
}
</script>
<a onclick="ShowHideIU();" style="cursor:pointer">Show/hide Image Uploader</a><br /><br />
<div id="IUDiv" style="display:block">
<script type="text/javascript">
//Create JavaScript object that will embed Image Uploader to the page.
var iu = new ImageUploaderWriter("ImageUploader1", 650, 400);
//Configure Image Uploader
iu.writeHtml();
</script>
</div>
However, there is a difference between ActiveX and Java versions of Image Uploader in that case. If you hide and then show the ActiveX version, it is not reinitialized and preserves its state during this action. On the other hand, the Java version is recreated when it is shown. Thus, if the user adds some files to the upload list, hides the control and then shows it, all the selected files will disappear from the upload list. To prevent this and keep user input in Java version you can save the upload list, whenever the user adds or removes files, and restore it when the applet is reloaded. To perform this task you can use the following algorithm:
The code sample below implements this algorithm.
<script type="text/javascript" src="iuembed.js"> </script>
<script type="text/javascript">
function ImageUploader1_InitComplete()
{
getImageUploader("ImageUploader1").LoadUploadList(1);
}
function ImageUploader1_UploadFileCountChange()
{
getImageUploader("ImageUploader1").SaveUploadList(1);
}
function ImageUploader1_AfterUpload()
{
getImageUploader("ImageUploader1").ResetUploadList(1);
}
</script>
<div id="IUDiv" style="display:block">
<script type="text/javascript">
//Create JavaScript object that will embed Image Uploader to the page.
var iu = new ImageUploaderWriter("ImageUploader1", 650, 400);
//Other parameters...
//Add event listeners
iu.addEventListener("InitComplete", "ImageUploader1_InitComplete");
iu.addEventListener("UploadFileCountChange", "ImageUploader1_UploadFileCountChange");
iu.addEventListener("AfterUpload", "ImageUploader1_AfterUpload");
iu.writeHtml();
</script>
</div>