This documentation is for the old version. Go to the latest Upload Suite docs

Using Image Uploader in AJAX Applications

When you embed Image 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 Image 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 Image 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 Image 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 Image 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 Image 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 Image 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 Image 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>