<div class="intro">
<p>This example demonstrates how to use the YUI 3 Uploader to send a single image or video (filtered by file extension) to the server and to monitor the upload progress. The example also shows how to use a custom image skin for the "Browse" button used by the Uploader.</p>
<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>
<p><strong>Also note:</strong> The uploader is not supported on iOS devices (iPhone and iPad), because Flash player is not available on that system. This example will not function on such devices.</p>
</div>
<div class="example yui3-skin-sam">
{{>uploader-simple-source}}
</div>
<h2>Set up the Uploader UI</h2>
<p>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`).</p>
```
<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>
```
<p>In the head section of the example, define custom styles for the `uploadButton` to give it an image skin that has multiple button states:</p>
```
<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>
```
<h2>Create a YUI Instance</h2>
<p>Now that the UI containers and controls are in place, create a YUI instance, using the `uploader` module, for this example:</p>
```
YUI().use("uploader", function(Y) {
// Y is the YUI instance.
// The rest of the code in this tutorial is encapsulated
// in this anonymous function.
} );
```
<h2>Working around the IE Caching Bug</h2>
<p>Due to a bug in IE6 through IE8, when a SWF is loaded from local cache (after a page has been reloaded, for example), it's unable to properly communicate with the JavaScript VM. For that reason, specifically for IE,
we can prevent loading the SWF from cache by appending a random get variable to the SWF URL:</p>
```
var swfURL = Y.Env.cdn + "uploader/assets/uploader.swf";
if (Y.UA.ie >= 6) {
swfURL += "?t=" + Y.guid();
}
```
<h2>Instantiate the Uploader</h2>
<p>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). Also note that we are including a custom SWF URL, defined in the workaround above (by default, the SWF URL would be as shown above, but unmodified):</p>
```
var uploader = new Y.Uploader({boundingBox:"#selectButton",
buttonSkin:"assets/selectFileButton.png",
transparent: false,
swfURL: swfURL
});
```
<h2>Listen for Uploader Events</h2>
<p>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:</p>
```
uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
Y.one("#uploadButtonLink").on("click", uploadFile);
```
<h2>Set Up the Uploader</h2>
<p>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:</p>
```
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);
}
```
<h2>Handler for the `fileselect` Event</h2>
<p>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:</p>
```
function fileSelect (event) {
var fileData = event.fileList;
for (var key in fileData) {
var output = "File selected: " + fileData[key].name;
Y.one("#filename").setContent(output);
}
}
```
<h2>Handler for Other Events</h2>
<p>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:</p>
```
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) {
}
```
<h2>Full Source Code For this Example</h2>
```
{{>uploader-multiple-source}}
```