<!---This variable specifies relative path to the folder, where the gallery with uploaded files is located.
Do not forget about the slash in the end of the folder name.--->
<cfset galleryPath="Gallery/" />
		
<cfset absGalleryPath="#ExpandPath(galleryPath)#" />

<!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 Demos - ColdFusion Samples</title>
	<link href="common.css" type="text/css" rel="stylesheet" />
	<style type="text/css"> 
.Sample{padding-bottom:25px;}
.Sample .Description{margin-left:20px;margin-top:6px;margin-bottom:4px;}
.Sample .Platform{padding-left:20px;padding-top:0;padding-bottom:4px;}
.Sample .Platform td{padding:3px;border-bottom:1px dotted #cccccc;border-right:1px dotted #cccccc;}
.Sample .Platform .ActiveX td{border-top:1px dotted #cccccc;}
.Sample .Platform .Icon{width:50px;text-align:center;border-left:1px dotted #cccccc;}	</style>
</head>
<body>
	<form>
		<h1>Aurigma Image Uploader Demos <span>(ColdFusion Samples)</span></h1>
		<div class="warning">
			<h4>
				Important</h4>
			<p>
				These demo applications are just examples of Image Uploader usage. Image Uploader
				is a <strong>client-side control/applet</strong>. All other code (both HTML and
				server pages) <strong>is not a part of Image Uploader</strong>! All actions performed
				on server (such as saving files to folders, deleting previously uploaded files,
				and others) are made by this code and not by Image Uploader.</p>
			<p>
				Keep in mind that these demo applications are intended for <strong>demonstration purposes
					only</strong>. It is not recommended to use them in production "as is". For
				real-life applications you should write your own code which takes into account application
				specifics.
			</p>
			<p>
				Although, you can use these demos as starter kits that illustrate how to use Image
				Uploader in some typical situations. Feel free to copy and modify the code from
				these applications.
			</p>
		</div>
		
		<cftry>
			<cffile action="write" file="#absGalleryPath#test.txt" output="test" />

			<cffile action="delete" file="#absGalleryPath#test.txt" />
			
			<cfcatch>
				<p style="color:red"><strong>IMPORTANT</strong>: Make sure that 
					the user your web application is running under has enough 
					permissions for the <code>Gallery</code> folder
					(<code><cfoutput>#absGalleryPath#</cfoutput></code>).</p>
			</cfcatch>
		</cftry>

		<h2><a href="BasicDemo/index.cfm">Basic Demo</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					The simplest <strong>quick start demo</strong> which illustrates how to use Image
					Uploader to send images with thumbnails to the server and redirect after the upload.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="UserQuota/index.cfm">User Quota</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Application which shows how to allow users to upload not more than <strong>specific number
						of files and/or file size</strong>. In particular it explains how to <strong>display user
							quota dynamically</strong>. In addition, it demonstrates how to
					make user interface customization.
				</p>
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" />
						</td>
						<td>
							Partial support. Unavailable features:
							<ul>
								<li>Certain appereance customization parameters (<em>see comments in source code for details</em>).</li>
							</ul>
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="OptimizedUpload/index.cfm">Optimized Upload</a></h2>
		<div class="Sample">			
			<div class="Description">
				<p>
					Demo application which reveals how to use Image Uploader to <strong>reduce the amount of
						traffic</strong> when uploading images. In this demo Image Uploader <strong>sends resized
							versions of images</strong> instead of original files. It automatically
					preserves EXIF information stored in original files. Moreover, EXIF data is used
					to <strong>rotate an image automatically</strong> if it has wrong orientation. Also,
					here you will learn how to send additional information in attached HTML form along
					with files.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="PhotoOrder/index.cfm">Photo Order</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Demo application that shows how Image Uploader can be used to build a <strong>photo order
						cart</strong>. In this application you can see how to configure quality
					meter, automatic upload recovery, and file restriction rules. Also, this application
					is a great illustration how to work with items selected for the upload through the
					JavaScript.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="Localization/index.cfm">Localization</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Multilanguage Image Uploader-based upload application. It demonstrates how to <strong>translate</strong>
					Image Uploader user interface into <strong>different languages</strong> and switch
					dynamically between them. Also, this demo contains ready-to-use translations to
					different languages that can be easily reused (even in single-language mode).
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="ConcurrentUpload/index.cfm">Concurrent Upload</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Application which demonstrates how to <strong>upload</strong> multiple files in
					<strong>several threads concurrently</strong>. Also, this is one more example how
					to customize Image Uploader appearance.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" />
						</td>
						<td>
							Partial support. Unavailable features:
							<ul>
								<li>Concurrent upload.</li>
							</ul>
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="OpenFileDialog/index.cfm">Open File Dialog</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Emulation of <strong>Open File dialog</strong> based on Image Uploader and auxiliary
					<code>ShellComboBox</code> control. This is a good example how to use these two
					controls together to synchronize Image Uploader folders when the user selects a
					folder in this combo-box. Additionally, this application demonstrates how to <strong>upload</strong>
					not just files, but <strong>whole folders</strong>. The automatic upload recovery
					feature is enabled in this demo as well.
				</p>
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="MultipleDescriptions/index.cfm">Multiple Descriptions</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Demo application that reveals how to upload <strong>supplementary information along with
						each file</strong> (in addition to the built-in file description field).
					This demo illustrates how to <strong>create a custom upload pane</strong> via HTML/JavaScript.
					It uses auxiliary control named <code>Thumbnail</code> for this purpose. Also, this
					is one more example how to work with items in the upload list through JavaScript.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="RobustUpload/index.cfm">Robust Upload</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Demo application which shows not just how to send files to the server, but also
					how to <strong>verify integrity</strong> of uploaded files. To do it, Image Uploader
					generate hash value that is used to check whether the image was corrupted during
					upload (see details in the source code). Additionally, this demo illustrates one
					more look-and-feel customization feature - how to <strong>replace standard Image Uploader 
					buttons by custom images</strong> without taking them into HTML.
				</p>
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="Watermark/index.cfm">Watermark</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Application that demonstrates how to <strong>draw an image watermark</strong> on each
					image uploaded to the server.
				</p>
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<h2><a href="ServerImaging/index.cfm">Server Imaging</a></h2>
		<div class="Sample">
			<div class="Description">
				<p>
					Example of application which performs additional image processing on the server
					after images are uploaded. It <strong>rotates uploaded images</strong> if necessary
					and <strong>adds a border</strong> to them. Unlike other demo applications, Image
					Uploader is used merely for the upload. None of imaging operations is made with
					it.
				</p>				
			</div>
			<div class="Platform">
				<table width="100%" cellspacing="0">
					<tr  class="ActiveX">
						<td class="Icon">
							<img src="Images/ActiveX.png" alt="ActiveX" width="40" height="22" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
					<tr>
						<td class="Icon">
							<img src="Images/Java.png" alt="Java" width="25" height="40" />
						</td>
						<td>
							Full support.
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<p>
			These demo applications are also available for other server platforms and languages:
		</p>
		<ul>
			<li>ASP</li>
			<li>ASP.NET - <em>C#</em></li>
			<li>ASP.NET - <em>VB.NET</em></li>
			<li>PHP</li>
			<li>JSP</li>
			<li>Perl</li>
			<li>Python</li>
			<li>Ruby</li>
		</ul>
		<p>
			These samples can be found in appropriate folders of the evaluation package.</p>
	</form>
</body>
</html>
