Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Uploader Control (experimental): Simple Uploader Example

# Uploader Control (experimental): Simple Uploader Example

This example is a demonstration of the YUI Uploader Control's features.

Note: The YUI Uploader Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

Note: 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.

Note: This example requires a backend component to receive uploaded files. Download the source for this example below to use on your own PHP server.

Download example source.

When you have the example running on your own server, it should look like the screenshot below:

## A Simple Use Case for the Uploader Control

Start by including all the necessary files for the Uploader and Logger controls:

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Uploader Simple Example</title> <!-- Required YUI files --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script> <!-- Main Uploader script --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/uploader/uploader-experimental.js"></script> <!-- Logger CSS and JS --> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/logger/assets/skins/sam/logger.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js"></script> </head> <body class="yui-skin-sam"> <h1>Uploader Quickstart Example</h1>

Next, we set a placeholder for the Uploader Control. The Control has a built-in logging console, so if you set the size of the div to 400x210, you'll see the internal logs of the Uploader.

<div id="uploaderPlaceHolder" style="width:400px;height:210px"> Unable to load Flash content. The YUI File Uploader Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a> </div>

Next, we'll add two buttons, a "Browse" button, and the "Upload" button. Note that the buttons call the `browse()` and `upload()` functions, respectively.

<input type="Button" value="Browse" onClick="browse();" /> <input type="Button" value="Upload" onClick="upload();" />

We will now initialize the Logger and the Uploader controls. Note that we are also specifying the `SWFURL` property for the uploader that's different from the default (./assets/Uploader.swf):

<script type="text/javascript"> this.myLogReader = new YAHOO.widget.LogReader(); YAHOO.widget.Uploader.SWFURL = "http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf"; var uploader = new YAHOO.widget.Uploader( "uploaderPlaceHolder" );

Next, we'll add the event listeners to the Uploader control, and initialize a `fileList` variable to hold the list of fileIDs and file information.

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); var fileList;

Next, we'll define the `browse()` and `upload()` functions that are called when the respective buttons are pressed. In the `browse()` function, we call the `uploader.clearFileList()`, to make sure that no files are left over from the previous upload (if this is the first time the page loads, then there wont be any files there to start with; but the upload queue is not automatically cleared between file selections, so unless we want it to preserve, we want to clear it). We then call the `uploader.browse` function. The first argument to that function specifies whether we want the user to be able to select multiple files. To keep this example simple, we'll restrict the user to just one file. The second argument is an array of extension filters -- in this case, we have just one, limiting the file extensions to ".jpg". We also post a message to the Logger control.

function browse() { uploader.clearFileList(); uploader.browse(false, [{description:"Images", extensions:"*.jpg"}]); YAHOO.log("Started browsing for images"); }

In the `upload()` function, we go through the fileList (that's populated by the `onFileSelect` function below) and call the upload method on all of the file ids contained in it (since we are only allowing the user to select one file, there will be only one file id in the list):

function upload() { if (fileList != null) { for(var i in fileList) { uploader.upload(i, 'YOUR UPLOAD URL HERE'); } } }

Next, we'll define the functions that are called in response to the events. These are the functions we specified when we added the event listeners above:

The `onFileSelect` receives the list of files and populates the `fileList` variable with it.

function onFileSelect(event) { fileList = event.fileList; YAHOO.log("Files selected"); YAHOO.log(event); }

The rest of the functions simply log the events they receive in the Logger. By examining the event object dump in the Logger, you will be able to see what variables are passed for each specific event (see the Getting Started for the detailed description):

function onUploadStart(event) { YAHOO.log(event); } function onUploadProgress(event) { YAHOO.log(event); } function onUploadComplete(event) { YAHOO.log(event); } function onUploadError(event) { YAHOO.log(event, "error"); } function onUploadCancel(event) { YAHOO.log(event); } function onUploadResponse(event) { YAHOO.log(event); } </script> </body> </html>

### Uploader Control (experimental) Examples:

- Simple Uploader Example
- Advanced Uploader Example

### More Uploader Control (experimental) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings