Using ActiveX/Java Uploader in AJAX Applications

When you embed ActiveX/Java Uploader into your AJAX-enabled application, you might need to hide and show the control from time to 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 ActiveX/Java Uploader inside <div> element and change its visibility to hidden or visible to hide or show it respectively. The following code sample demonstrates this approach:

ASP.NET

<%@ Register assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" tagprefix="aur" %>
<!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>Aurigma ActiveX/Java Uploader 7</title></head> 
<body> 
	<script type="text/javascript">
	var hidden = true;

	function showHideImageUploader(divId) {
		var div = document.getElementById(divId);
		if (hidden) {
			div.style.visibility = 'visible';
			div.style.height = 'auto';
		} else {
			div.style.visibility = 'hidden';
			div.style.height = '0px';
		}
		hidden = !hidden;
	}
	</script>
	<input type="button" onclick="showHideImageUploader('uploaderDiv')" value="Show/hide ActiveX/Java Uploader" />
	<div id="uploaderDiv" style="height: 0px; visibility: hidden;">
		<aur:Uploader ID="Uploader1" runat="server" />
	</div>
</body>
</html>

PHP

<!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>Aurigma ActiveX/Java Uploader 7</title></head> 
<body> 
	<script type="text/javascript">
	var hidden = true;

	function showHideImageUploader(divId) {
		var div = document.getElementById(divId);
		if (hidden) {
			div.style.visibility = 'visible';
			div.style.height = 'auto';
		} else {
			div.style.visibility = 'hidden';
			div.style.height = '0px';
		}
		hidden = !hidden;
	}
	</script>
	<input type="button" onclick="showHideImageUploader('uploaderDiv')" value="Show/hide ActiveX/Java Uploader" />
	<div id="uploaderDiv" style="height: 0px; visibility: hidden;">
		<?php
			require_once "ImageUploaderPHP/Uploader.class.php";
			$uploader = new Uploader("Uploader1");
			$uploader->render();
		?>
	</div>
</body>
</html>	
</html>

JavaScript

<!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>Aurigma ActiveX/Java Uploader 7</title></head> 
<body> 
	<script type="text/javascript" src="Scripts/aurigma.uploader.js"></script>
	<script type="text/javascript">
	var hidden = true;

	function showHideImageUploader(divId) {
		var div = document.getElementById(divId);
		if (hidden) {
			div.style.visibility = 'visible';
			div.style.height = 'auto';
		} else {
			div.style.visibility = 'hidden';
			div.style.height = '0px';
		}
		hidden = !hidden;
	}
	</script>
	<input type="button" onclick="showHideImageUploader('uploaderDiv')" value="Show/hide ActiveX/Java Uploader" />
	<div id="uploaderDiv" style="height: 0px; visibility: hidden;">
		<script type="text/javascript">
		var u = $au.uploader({id: 'Uploader1'});
		u.writeHtml();
		</script>
	</div>
</body>
</html>