YUI Library Examples: Uploader: Single File Upload with Progress Tracking and a Sprite-skinned Button

Uploader: Single File Upload with Progress Tracking and a Sprite-skinned Button

Single File Upload with Progress Tracking and a Sprite-skinned Button

Set up the Uploader UI

The Uploader requires that the "Browse" button be implemented as an instance of the Flash Player; all other controls can be regular DOM elements. For this example, set up a container for the Flash Player and give it the id selectButton and set up a container for the "Upload" button (uploadButton). In addition, set up containers to display the name of the selected file (filename) and the progress of the upload (percent).

<div id="selectButton" style="width:100px;height:40px"></div> 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>
 
<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>

<div id="selectButton" style="width:100px;height:40px"></div> 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>
 
<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>

In the head section of the example, define custom styles for the uploadButton to give it an image skin that has multiple button states:

<style type="text/css">
	.uploadButton a {
		display:block;
		width:100px;
		height:40px;
		text-decoration: none;
	}
 
	.uploadButton a {
		background: url("assets/uploadFileButton.png") 0 0 no-repeat;
	}
 
    .uploadButton a:visited {
		background-position: 0 0;
	}
 
    .uploadButton a:hover {	
		background-position: 0 -40px;
	}
 
    .uploadButton a:active {
		background-position: 0 -80px;
	}
</style>

<style type="text/css">
	.uploadButton a {
		display:block;
		width:100px;
		height:40px;
		text-decoration: none;
	}
 
	.uploadButton a {
		background: url("assets/uploadFileButton.png") 0 0 no-repeat;
	}
 
    .uploadButton a:visited {
		background-position: 0 0;
	}
 
    .uploadButton a:hover {	
		background-position: 0 -40px;
	}
 
    .uploadButton a:active {
		background-position: 0 -80px;
	}
</style>

Create a YUI Instance

Now that the UI containers and controls are in place, create a YUI instance, using the uploader module, for this example:

YUI().use("uploader", function(Y) {
	// Y is the YUI instance.
	// The rest of the code in this tutorial is encapsulated 
	// in this anonymous function.
} );

YUI().use("uploader", function(Y) {
	// Y is the YUI instance.
	// The rest of the code in this tutorial is encapsulated 
	// in this anonymous function.
} );

Instantiate the Uploader

Next, create an instance of an Uploader and configure it. The Uploader only requires the reference to the container in which the "Browse" button should be placed, but in this example an image skin for the button is being used; as result, we need to provide the buttonSkin property with a reference to the image sprite, as well as the transparent Boolean value (this property specifies whether the transparent areas of the image sprite are rendered as such; if no buttonSkin is specified, the entire uploader would render as transparent).

var uploader = new Y.Uploader({boundingBox:"#selectButton", 
							   buttonSkin:"assets/selectFileButton.png",
							   transparent: false
							   });	

var uploader = new Y.Uploader({boundingBox:"#selectButton", 
							   buttonSkin:"assets/selectFileButton.png",
							   transparent: false
							   });	

Listen for Uploader Events

Next, add event handlers to various uploader events and the click handler for the "Upload" button. The uploaderReady event is particularly important because the uploader may not be ready to accept method calls until this event has fired. Therefore, any method calls and property settings for the uploader should be made within the handler for that event:

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
 
Y.one("#uploadButtonLink").on("click", uploadFile);

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
 
Y.one("#uploadButtonLink").on("click", uploadFile);

Set Up the Uploader

Once the uploader is ready, and the uploaderReady event is fired, set properties to further configure the Uploader. In particular, set the multiFiles property to restrict user to selecting only a single file, the log property to provide debug information (output only if the computer is running the debug version of the Flash player), and the fileFilters property to filter files in the user's "Browse" dialog:

function setupUploader (event) {
	uploader.set("multiFiles", false);
	uploader.set("log", true);
 
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
 
    uploader.set("fileFilters", fileFilters);
}

function setupUploader (event) {
	uploader.set("multiFiles", false);
	uploader.set("log", true);
 
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
 
    uploader.set("fileFilters", fileFilters);
}

Handler for the fileselect Event

In the handler for the fileselect, extract the file list from the event payload and display the name of the file. In this particular case, the list should only contain one file name, since the user was restricted to selecting a single file:

function fileSelect (event) {
	var fileData = event.fileList;	
 
	for (var key in fileData) {
		var output = "File selected: " + fileData[key].name;
		Y.one("#filename").setContent(output);
	}
}

function fileSelect (event) {
	var fileData = event.fileList;	
 
	for (var key in fileData) {
		var output = "File selected: " + fileData[key].name;
		Y.one("#filename").setContent(output);
	}
}

Handler for Other Events

In the uploadprogress handler, update the content of the percent container based on the values provided in the event payload. In the uploadcomplete handler, place the final message into the percent container. Finally, in the click handler, initiate the upload to a specific URL:

function updateProgress (event) {
	Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}
 
function uploadComplete (event) {
	Y.one("#percent").setContent("Upload complete!");
}
 
function uploadFile (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

function updateProgress (event) {
	Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}
 
function uploadComplete (event) {
	Y.one("#percent").setContent("Upload complete!");
}
 
function uploadFile (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}