File: uploader-advanced-cookie.html

package info (click to toggle)
yui 2.9.0.dfsg.0.1-0.1
links: PTS, VCS
area: main
in suites: wheezy
size: 89,324 kB
sloc: php: 52,404; java: 4,329; xml: 748; makefile: 37
file content (573 lines) | stat: -rw-r--r-- 34,293 bytes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Uploader Control: Advanced Uploader Example With Cookie Submission as a POST variable</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/uploader/uploader-debug.js"></script>
<script type="text/javascript" src="../../build/cookie/cookie-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>

<!--there is no custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Uploader Control: Advanced Uploader Example With Cookie Submission as a POST variable</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Uploader Control: Advanced Uploader Example With Cookie Submission as a POST variable</h1>
	
	<div class="exampleIntro">
	<p>One of the major limitations of the Flash-based uploader is that it cannot use browser cookies to authenticate file uploads. In this example, we provide sample code that demonstrates how to attach the page cookie as a variable in the body of the upload POST request, rather than in the header. The code will generate a cookie with a username and the last uploaded file name, and send the value along with the file that needs to be uploaded. We also provide a sample backend script that accepts the file upload and echoes the POST variables accompanying the upload (thus ascertaining that the cookie data was received by the server).  We show how we can retrieve the data returned by the server and display it to the user.</p>
<p><strong>Note:</strong> The YUI Uploader Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
<p><strong>Note:</strong> The YUI Uploader Control requires the uploader.swf Flash file that is distributed as part of the YUI package, in the uploader/assets folder. Copy the uploader.swf to your server and set the YAHOO.Uploader.SWFURL variable to its full path.</p>
<p style="color:red;"><strong>ATTENTION:</strong> This example <strong>WILL NOT WORK</strong> on this page. It is merely provided here as a convenience — you will need to set it up on your own server to run it.</p>			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="uploader-advanced-cookie_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<style>
#selectFilesLink a, #uploadFilesLink a, #clearFilesLink a {
	color: #0000CC;
	background-color: #FFFFFF;
}

#selectFilesLink a:visited, #uploadFilesLink a:visited, #clearFilesLink a:visited {
	color: #0000CC;
	background-color: #FFFFFF;
}

#uploadFilesLink a:hover, #clearFilesLink a:hover {	
	color: #FFFFFF;
	background-color: #000000;
}
</style>

<div id="uiElements" style="display:inline;">
	
		<div id="messageContainer"></div><br/>
		<div id="uploaderContainer">
			<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
			<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select File</a></div>
		</div>
		<div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload File</a></div><br/>
		<div id="selectedFileDisplay">
		Progress: <input type="text" cols="50" id="progressReport" value="" autocomplete="off" readonly /><br/><br/>
		</div>
		<div id="returnedDataDisplay">
		Data returned by the server:<br/>

		<textarea id="serverData" rows="15" cols="50" readonly="yes">
			
		</textarea>
		</div>
</div>



<script type="text/javascript">
 	// init messageContainer.
	function init() { 
		var curCookie = YAHOO.util.Cookie.get("myCookie");
		var messageContainer = document.getElementById("messageContainer");
		var newHtml;
		var currentUser = YAHOO.util.Cookie.getSub("myCookie","currentUser");
		var lastUploadedFile = YAHOO.util.Cookie.getSub("myCookie","lastUploadedFile");
	
		if(curCookie == null || currentUser == null) {
			// If there is no existing cookie or username, this wiil show the text input and a button to add user name to the cookie.
			YAHOO.util.Cookie.set("myCookie", document.cookie);
			newHtml = 'Hi, there. Add your name in the box below.<br/>';
			newHtml +='<input type="text" id="userInput" value="Anonymous" /><input type="button" value="Set User" id="btnAdd" />';
		}else{
			// If there is an existing cookie, this wiil show welcome message with an option of removing the username and file name from the cookie.
			newHtml = currentUser+', welcome back!<br/>';
			if(lastUploadedFile) {
				newHtml += 'Your last uploaded file was '+lastUploadedFile+'<br/>';
			}
			newHtml +='<input type="button" value="Remove User" id="btnRemove" />';
		};
		messageContainer.innerHTML = newHtml;
	
		// reset progressReport and serverData feild.
		this.serverData = document.getElementById("serverData");
		this.serverData.value = "";
	
		this.progressReport = document.getElementById("progressReport");
		this.progressReport.value ="";
	};
	// when DOM is ready, call init().
	YAHOO.util.Event.onDOMReady(init);
	
	// Button Event: "Set User" button clicked. Adds the username to the cookie.
	YAHOO.util.Event.on("btnAdd", "click", function(){
	    var newUser = document.getElementById("userInput").value;
		YAHOO.util.Cookie.setSub("myCookie","currentUser",newUser);
		var newHtml = "Hi, "+ newUser +"!";
		var messageContainer = document.getElementById("messageContainer");
		messageContainer.innerHTML = newHtml;
	});
	
	// Button Event: "Remove User" button clicked. Removes username and last Uploaded File name from the cookie.
	YAHOO.util.Event.on("btnRemove", "click", function(){
	 	YAHOO.util.Cookie.removeSub("myCookie","currentUser");
		YAHOO.util.Cookie.removeSub("myCookie","lastUploadedFile");
		init();
	});

	YAHOO.util.Event.onDOMReady(function () { 
		var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
		var overlay = YAHOO.util.Dom.get('uploaderOverlay');
		YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
		YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
	});

	// Custom URL for the uploader swf file (same folder).
	YAHOO.widget.Uploader.SWFURL = "assets/uploader.swf";

    // Instantiate the uploader and write it to its placeholder div.
	var uploader = new YAHOO.widget.Uploader( "uploaderOverlay" );
	
	// Add event listeners to various events on the uploader.
	// Methods on the uploader should only be called once the 
	// contentReady event has fired.
	
	uploader.addListener('contentReady', handleContentReady);
	uploader.addListener('fileSelect', onFileSelect)
	uploader.addListener('uploadStart', onUploadStart);
	uploader.addListener('uploadProgress', onUploadProgress);
	uploader.addListener('uploadCancel', onUploadCancel);
	uploader.addListener('uploadComplete', onUploadComplete);
	uploader.addListener('uploadCompleteData', onUploadResponse);
	uploader.addListener('uploadError', onUploadError);
    uploader.addListener('rollOver', handleRollOver);
    uploader.addListener('rollOut', handleRollOut);
    uploader.addListener('click', handleClick);
    	
    // Variable for holding the selected file id.
	var fileID;
	// Variable for holding the selected file name.
	var fileName;
	// When the mouse rolls over the uploader, this function
	// is called in response to the rollOver event.
	// It changes the appearance of the UI element below the Flash overlay.
	function handleRollOver () {
		YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('selectLink'), 'color', "#FFFFFF");
		YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('selectLink'), 'background-color', "#000000");
	}
	
	// On rollOut event, this function is called, which changes the appearance of the
	// UI element below the Flash layer back to its original state.
	function handleRollOut () {
		YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('selectLink'), 'color', "#0000CC");
		YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('selectLink'), 'background-color', "#FFFFFF");
	}
	
	// When the Flash layer is clicked, the "Browse" dialog is invoked.
	// The click event handler allows you to do something else if you need to.
	function handleClick () {
	}
	
	// When contentReady event is fired, you can call methods on the uploader.
	function handleContentReady () {
	    // Allows the uploader to send log messages to trace, as well as to YAHOO.log
		uploader.setAllowLogging(true);
		
		// Disallows multiple file selection in "Browse" dialog.
		uploader.setAllowMultipleFiles(false);
		
		// New set of file filters.
		var ff = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
		                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
		                   
		// Apply new set of file filters to the uploader.
		uploader.setFileFilters(ff);
	}

	// Actually uploads the files. Since we are only allowing one file
	// to be selected, we use the upload function, in conjunction with the id 
	// of the selected file (returned by the fileSelect event). We are also including
	// the cookie as a variable.

	function upload() {
		
	if (fileID != null) {
		var docCookie = YAHOO.util.Cookie.get("myCookie");
		
		uploader.upload(fileID, "YOUR_DOMAIN_SAME_AS_PAGE_DOMAIN_HERE", 
		                "POST", 
		                {cookieVar:docCookie });
	}	
	}
	
	// Fired when the user selects files in the "Browse" dialog
	// and clicks "Ok". Here, we set the value of the progress
	// report textfield to reflect the fact that a file has been
	// selected.
	
	function onFileSelect(event) {
		for (var file in event.fileList) {
		    if(YAHOO.lang.hasOwnProperty(event.fileList, file)) {
				fileID = event.fileList[file].id;
			}
		}
		
		this.progressReport = document.getElementById("progressReport");
		fileName =	event.fileList[fileID].name;
		this.progressReport.value = "Selected " + fileName
	}


    // When the upload starts, we inform the user about it via
	// the progress report textfield. 
	function onUploadStart(event) {
		this.progressReport.value = "Starting upload...";
	}
	
	// As upload progresses, we report back to the user via the
	// progress report textfield.
	function onUploadProgress(event) {
		prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
		this.progressReport.value = prog + "% uploaded...";
	}
	
	// Report back to the user that the upload has completed.
	function onUploadComplete(event) {
		YAHOO.util.Cookie.setSub("myCookie","lastUploadedFile",fileName);
		this.progressReport.value = "Upload complete.";
	}
	
	// Report back to the user if there has been an error.
	function onUploadError(event) {
		this.progressReport.value = "Upload error.";
	}
	
	// Do something if an upload is canceled.
	function onUploadCancel(event) {

	}
	
	// When the data is received back from the server, display it to the user
	// in the server data text area.
	function onUploadResponse(event) {
		
		this.serverData = document.getElementById("serverData");
		this.serverData.value = event.data;
		
	}
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Advanced Uploader Example With Cookie Submission as a POST variable.</h2>

<p>In this example, we demonstrate the code that allows the user to upload a single image or video to the server, and track the upload progress. In addition, the code will also send a generated document cookie along with the request. Since Flash cannot include the browser cookie in the header, the cookie will be attached as a POST variable. The sample server script provided at the end of this example will respond to the request, demonstrating that the cookie was received.</p>

<p>Because of security changes in Flash Player 10, the UI for invoking the "Browse" dialog has to be contained within the Flash player. In this example, the Flash player is rendered as a transparent overlay on top of a custom HTML-based UI. The Uploader running in the Flash player dispatches necessary mouse events to the DOM to make visual changes to the overlaid UI.</p>
<p>Just as in the other advanced example, we will use regular HTML links as the UI, and modify their background color when the mouse is hovered over them.</p>

<textarea style="display: none;" name="code" class="html" cols="60" rows="5">	&lt;style&gt;
	#selectFilesLink a, #uploadFilesLink a, #clearFilesLink a {
		color: #0000CC;
		background-color: #FFFFFF;
	}

	#selectFilesLink a:visited, #uploadFilesLink a:visited, #clearFilesLink a:visited {
		color: #0000CC;
		background-color: #FFFFFF;
	}

	#uploadFilesLink a:hover, #clearFilesLink a:hover {	
		color: #FFFFFF;
		background-color: #000000;
	}
	&lt;/style&gt;
</textarea>
<p>In addition to the controls, we'll also include the following elements: a <code>messageContainer</code> div as a container for messages we'll relay to the user, a <code>selectedFileDisplay</code> text field to show the name of the file selected for upload, a <code>progressReport</code> text field for showing the upload progress, and a <code>returnedDataDisplay</code> container with a text area to display the response received from the server:

<textarea style="display: none;" name="code" class="html" cols="60" rows="5">

	<div id="uiElements" style="display:inline;">

			<div id="messageContainer"></div><br/>
			<div id="uploaderContainer">
				<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
				<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select File</a></div>
			</div>
			<div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload File</a></div><br/>
			<div id="selectedFileDisplay">
			Progress: <input type="text" cols="50" id="progressReport" value="" autocomplete="off" readonly /><br/><br/>
			</div>
			<div id="returnedDataDisplay">
			Data returned by the server:<br/>

			<textarea id="serverData" rows="15" cols="50" readonly="yes">&lt;/textarea&gt;
			</div>
	</div>

</textarea>


<p>
When the DOM is in a usable state, the <code>init()</code> function will check the existing document cookie value to decide what to show in the <code>messageContainer</code> (see <a href="http://developer.yahoo.com/yui/event/#ondomready">YAHOO.util.Event.onDOMReady</a> for the <code>onDOMReady</code> event). In a standard scenario, the cookie will be set by the server in the header of the loaded page. In our case, for the example's sake, (<a href="http://developer.yahoo.com/yui/cookie/">YUI Cookie Utililty</a> will be used to create and manipulate the example subcookies ("username" and "lastUploadedFile"). If the current Cookie("myCookie") does not have the matching subcookies in it, the <code>messageContainer</code> will display a UI allowing the user to set a custom username. In a case where the subcookies already exist, the <code>messageContainer</code> div will show a welcome message with the name of the file last uploaded by the user, and a <code>&quot;Remove User&quot;</code> button that will remove the username and the last uploaded file name from the document cookie.</p>

<textarea style="display: none;" name="code" class="html" cols="60" rows="5">
	function init() { 
		var curCookie = YAHOO.util.Cookie.get("myCookie");
		var messageContainer = document.getElementById("messageContainer");
		var newHtml;
		var currentUser = YAHOO.util.Cookie.getSub("myCookie","currentUser");
		var lastUploadedFile = YAHOO.util.Cookie.getSub("myCookie","lastUploadedFile");
	
		if(curCookie == null || currentUser == null) {
			// If there is no existing cookie or username, we will show the text input and button to add the username into cookie.
			YAHOO.util.Cookie.set("myCookie", document.cookie);
			newHtml = 'Hi, there. Add your name in the box below.<br/>';
			newHtml +='<input type="text" id="userInput" value="Anonymous" /><input type="button" value="Set User" id="btnAdd" />';
		}else{
			// If there is an existing cookie, we will show a welcome message with an option of removing the username and file name from the cookie.
			newHtml = currentUser+', welcome back!<br/>';
			if(lastUploadedFile) {
				newHtml += 'Your last uploaded file was '+lastUploadedFile+'<br/>';
			}
			newHtml +='<input type="button" value="Remove User" id="btnRemove" />';
		};
		messageContainer.innerHTML = newHtml;
	
		// reset progressReport and serverData feild.
		this.serverData = document.getElementById("serverData");
		this.serverData.value = "";
	
		this.progressReport = document.getElementById("progressReport");
		this.progressReport.value ="";
	});
	
	YAHOO.util.Event.onDOMReady(init);
</textarea>
<p>Next, we'll add the code to actually modify the cookie based on the input from the user: </p>
<p>
<textarea style="display: none;" name="code" class="html" cols="60" rows="5">
	// Button Event: "Set User" button clicked. Will add the username to the cookie.
	YAHOO.util.Event.on("btnAdd", "click", function(){
	    var newUser = document.getElementById("userInput").value;
		YAHOO.util.Cookie.setSub("myCookie","currentUser",newUser);
		var newHtml = "Hi, "+ newUser+"!";
		var messageContainer = document.getElementById("messageContainer");
		messageContainer.innerHTML = newHtml;
	});
	
	// Button Event: "Remove User" button clicked. Will remove username and last Uploaded File name from the cookie.
		YAHOO.util.Event.on("btnRemove", "click", function(){
	 	YAHOO.util.Cookie.removeSub("myCookie","currentUser");
		YAHOO.util.Cookie.removeSub("myCookie","lastUploadedFile");
		init();
	});

</textarea>
</p>
<p>To record the name of the uploaded file, we set the variable named "fileName" on uploader's <code>fileSelect</code> event.</p>
<p><textarea style="display: none;" name="code" class="html" cols="60" rows="5">
var fileName;

function onFileSelect(event) {
	for (var file in event.fileList) {
	    if(YAHOO.lang.hasOwnProperty(event.fileList, file)) {
			fileID = event.fileList[file].id;
		}
	}
	
	this.progressReport = document.getElementById("progressReport");
	fileName =	event.fileList[fileID].name;
	this.progressReport.value = "Selected " + fileName
}
</textarea>
</p>

<p>After the file upload is complete, we'll store the name of the uploaded file in the subcookie.</p>
<p><textarea style="display: none;" name="code" class="html" cols="60" rows="5">
// Report back to the user that the upload has completed.
	function onUploadComplete(event) {
		YAHOO.util.Cookie.setSub("myCookie", "lastUploadedFile", fileName);
		this.progressReport.value = "Upload complete.";
	}
</textarea></p>

<p>If the <code>fileID</code> variable has been populated, we will upload the file to the designated location. Note that we are passing the document cookie as a POST variable in the upload. <b>Important: make sure that the domain of the server that the cookie is being sent to is in the same security sandbox as the domain from which the page hosting the upload dialog has originated. In a simplest scenario, this means that the upload server domain should be the same as the page's domain. That would ensure that the cookie content remains secure. </b></p>
<p><textarea style="display: none;" name="code" class="html" cols="60" rows="5">
function upload() {
		
	if (fileID != null) {
		var docCookie = YAHOO.util.Cookie.get("myCookie");
		uploader.upload(fileID, "DOMAIN_SAME_AS_PAGE_DOMAIN/upload.php", 
		                "POST", 
		                {cookieVar:docCookie });
	}	
}
	
</textarea></p>

<p>When a response is received from the server, we display it in the provided text area:</p>
<p><textarea style="display: none;" name="code" class="html" cols="60" rows="5">
 function onUploadResponse(event) { 
	        this.serverData = document.getElementById("serverData"); 
	        this.serverData.value = event.data; 
	    } 
	</textarea></p>

<p> In PHP, where you would normally check for the cookie value by checking the global <code>$_COOKIE</code> array, you can instead check the POST variable that was used to carry the cookie. So, if the cookie is sent as a "cookieVar" parameter (as in the example above), instead of checking for:

<p><textarea style="display: none;" name="code" class="php" cols="60" rows="2">
$_COOKIE['username'];
</textarea></p>

you would check for:

<p><textarea style="display: none;" name="code" class="php" cols="60" rows="2">
$_POST['cookieVar']['username'];	
</textarea></p>

<p> A sample PHP code for retrieving the uploaded file might look as follows (this code does not perform any authentication; you would need to check the cookie as described above to do so):</p>
<p><textarea style="display: none;" name="code" class="php" cols="60" rows="2">
$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['Filedata']['name']); 

if(move_uploaded_file($_FILES['Filedata']['tmp_name'], $target_path)) {
	echo "The file ".basename( $_FILES['Filedata']['name'])." has been uploaded\n";
	echo "POST:\n";
	foreach($_POST as $key => $value) echo $key."=".htmlentities($value)."\n";
	echo "GET:\n";
	foreach($_GET as $key => $value) echo $key."=".htmlentities($value)."\n";
} else {
	echo "There was an error uploading the file, please try again!";
}
</textarea></p>


<p> 
<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?uploader&cookie&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerDiv"></div>
						</div>
					
				
					<div id="examples">
						<h3>Uploader Control Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../uploader/uploader-simple-button.html'>Simple Uploader Example With Button UI</a></li><li><a href='../uploader/uploader-advanced-postvars.html'>Advanced Uploader Example With Additional POST Variables and Server Data Return</a></li><li class='selected'><a href='../uploader/uploader-advanced-cookie.html'>Advanced Uploader Example With Cookie Submission as a POST variable</a></li><li><a href='../uploader/uploader-advanced-queue.html'>Advanced Uploader Example With Transparent UI and Automatic Queue Management</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Uploader Control Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/uploader/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_uploader.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/uploader.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="selected "><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>