0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews<div class="intro">

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews<p>This example demonstrates how to use the YUI 3 Uploader to send a single file 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>

0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews

0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews<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>

0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews</div>

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

12178c86525332bb0ab66155feb61fbf32eca6acEvan Hunt<div class="example yui3-skin-sam">

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews {{>uploader-simple-source}}

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews</div>

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews<h2>Set up the Uploader UI</h2>

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

e13d04fda918c0c14c2247475bb99e0760d9a6a4Evan Hunt<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>

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson```

c2bc56dc65b4b103a5600565680eb5f33fa4c90bMark Andrews<div id="selectButton" style="width:100px;height:40px"></div>

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>

c2bc56dc65b4b103a5600565680eb5f33fa4c90bMark Andrews

dbb012765c735ee0d82dedb116cdc7cf18957814Evan Hunt<div id="filename">

9e77d51069a97a21c68184134a0c9847e95490ffMark AndrewsFile selected:

12178c86525332bb0ab66155feb61fbf32eca6acEvan Hunt</div>

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews<div id="percent">

9e77d51069a97a21c68184134a0c9847e95490ffMark AndrewsPercent uploaded:

0e40083fdd5445703bd30e46e5bfe7d047bced12Brian Wellington</div>

8d0ee7a153381d98f6c1e6e9bfe6b73659433666Brian Wellington```

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉<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>

c2bc56dc65b4b103a5600565680eb5f33fa4c90bMark Andrews

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews```

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews<style type="text/css">

8d0ee7a153381d98f6c1e6e9bfe6b73659433666Brian Wellington .uploadButton a {

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews display:block;

c2bc56dc65b4b103a5600565680eb5f33fa4c90bMark Andrews width:100px;

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews height:40px;

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉 text-decoration: none;

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉 }

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

e99691e566c10f8901b3f66a6b6629705cf78c52Mark Andrews .uploadButton a {

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews background: url("assets/uploadFileButton.png") 0 0 no-repeat;

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews }

f4cbe536b11da614fe05aeaeff41e324854cda7bMark Andrews

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews .uploadButton a:visited {

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews background-position: 0 0;

bb1cf189bb9fd9059cf13b785d15b0e50c0be8fbAndreas Gustafsson }

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews

01b8865b1462ba219c90cf6c00f1bf0fdf780d9bBrian Wellington .uploadButton a:hover {

01b8865b1462ba219c90cf6c00f1bf0fdf780d9bBrian Wellington background-position: 0 -40px;

c40265eba0c99708887d68e67901924065ba2514Brian Wellington }

c40265eba0c99708887d68e67901924065ba2514Brian Wellington

c40265eba0c99708887d68e67901924065ba2514Brian Wellington .uploadButton a:active {

c40265eba0c99708887d68e67901924065ba2514Brian Wellington background-position: 0 -80px;

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews }

9e77d51069a97a21c68184134a0c9847e95490ffMark Andrews</style>

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson```

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark Andrews

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark Andrews<h2>Create a YUI Instance</h2>

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson<p>Now that the UI containers and controls are in place, create a YUI instance, using the `uploader` module, for this example:</p>

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson```

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark AndrewsYUI().use("uploader", function(Y) {

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark Andrews // Y is the YUI instance.

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson // The rest of the code in this tutorial is encapsulated

a26ad011f382d12058478704cb5e90e6f4366d01Andreas Gustafsson // in this anonymous function.

fcb54ce0a4f7377486df5bec83b3aa4711bf4131Mark Andrews} );

0c2313eb367de3b58801d643d52c0fd9bc0e5df7Evan Hunt```

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉

dbb012765c735ee0d82dedb116cdc7cf18957814Evan Hunt<h2>Instantiate the Uploader</h2>

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉

e99691e566c10f8901b3f66a6b6629705cf78c52Mark Andrews<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).</p>

dbb012765c735ee0d82dedb116cdc7cf18957814Evan Hunt

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉```

dbb012765c735ee0d82dedb116cdc7cf18957814Evan Huntvar uploader = new Y.Uploader({boundingBox:"#selectButton",

a27fe4c990f96bd792f2a07ca4d38c78d5b9df2cTatuya JINMEI 神明達哉 buttonSkin:"assets/selectFileButton.png",

bb01a40e659564bcb9571eca0319762eb20b7a01Andreas Gustafsson transparent: false

c40265eba0c99708887d68e67901924065ba2514Brian Wellington });

c40265eba0c99708887d68e67901924065ba2514Brian Wellington```

c40265eba0c99708887d68e67901924065ba2514Brian Wellington<h2>Listen for Uploader Events</h2>

c40265eba0c99708887d68e67901924065ba2514Brian Wellington<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>

bb01a40e659564bcb9571eca0319762eb20b7a01Andreas Gustafsson```

bb01a40e659564bcb9571eca0319762eb20b7a01Andreas Gustafssonuploader.on("uploaderReady", setupUploader);

4137fd1295f3c6242a1c641352c8811378912820Andreas Gustafssonuploader.on("fileselect", fileSelect);

01b8865b1462ba219c90cf6c00f1bf0fdf780d9bBrian Wellingtonuploader.on("uploadprogress", updateProgress);

bb01a40e659564bcb9571eca0319762eb20b7a01Andreas Gustafssonuploader.on("uploadcomplete", uploadComplete);

f4cbe536b11da614fe05aeaeff41e324854cda7bMark Andrews

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark AndrewsY.one("#uploadButtonLink").on("click", uploadFile);

74cb99072c4b0ebd2ccafcfa284288fa760f7a1aMark Andrews```

47c2e9924ef9f9c20287642e4f0a13a5f2cb2574Mark Andrews

53aba5065d2ee3c103912ecfe865418bad6fa576Brian Wellington<h2>Set Up the Uploader</h2>

47c2e9924ef9f9c20287642e4f0a13a5f2cb2574Mark Andrews<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>

c40265eba0c99708887d68e67901924065ba2514Brian Wellington

c40265eba0c99708887d68e67901924065ba2514Brian Wellington```

d03d2dbfe9cebf4dbbd2c8807afe5703862cc721Mark Andrewsfunction 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) {

uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");

}

```

<h2>Full Source Code For this Example</h2>

```

{{>uploader-multiple-source}}

```