YUI Library Examples: Uploader Control: Simple Uploader Example With Button UI

Simple Uploader Example with Button UI

In this example, we allow the user to select a single image or video file and upload it to the server. We will render the Uploader UI as a sprite-skinned button, and display the name of the file as well as upload progress.

Because of security changes in Flash Player 10, the UI for invoking the "Browse" dialog must be contained inside the Flash player. The Uploader provides two ways of accomplishing that: it can take a button skin sprite (a single image containing multiple states of a button), and render as a button, or it can render as a transparent overlay on top of any UI you want to implement. In this example, we'll render the Uploader UI as a button. To create additional HTML rollover buttons that match the look of the Uploader button, we'll define the following styles: <html> <style type="text/css"> .uploadButton a, .clearButton a { display:block; width:100px; height:40px; text-decoration: none; margin-left:5px; } .uploadButton a { background: url("assets/uploadFileButton.png") 0 0 no-repeat; } .clearButton a { background: url("assets/clearListButton.png") 0 0 no-repeat; } .uploadButton a:visited, .clearButton a:visited { background-position: 0 0; } .uploadButton a:hover, .clearButton a:hover { background-position: 0 -40px; } .uploadButton a:active, .clearButton a:active { background-position: 0 -80px; } </style>

Notice that the styles are using two image files, uploadFileButton.png and clearListButton.png for rollovers. The directory contains another file, selectFileButton.png, which we will use to skin the Uploader UI. The sprite images look as follows:

Note that while for your own rollover buttons you can modify the location of the button states within the sprite, the Uploader requires that the button skin sprite had the states in the following order, stacked vertically: buttonUp state, buttonHover state, buttonDown state and buttonDisabled state.

Next, let's create the UI. First, we'll define the space for the file name and progress bar displays:

Next, we'll define three buttons. The first button will be rendered by the Uploader, so we'll put down the placeholder div of the right size. The other two buttons will be HTML-rendered, and we'll assign functions to be called when they are clicked:

Next, we instantiate the Uploader, and write it to the placeholder div. Note that we are passing the URL of the button skin sprite as the second argument to the Uploader constructor. If you don't pass this optional second argument, the uploader will be render transparent.

Next, we add event listeners to various events called by the uploader. Note specifically the "contentReady" event: until that event fires, the uploader methods are not available. We wont need to respond to all events, so we will leave some of these event handlers empty, just as placeholders.

Now, let us define the event handlers themselves. First, we will create the contentReady handler. In it, we will enable the logging output in the uploader (the log messages will be output both to the YUI Logger, and the Flash trace output), disallow multiple file selection (it is disallowed by default, so we are being redundant), and set file filters to filter user selection.

When a file is selected, we record the id of the selected file, and disable the uploader UI. Next, we display the name of the file and reset the progress bar.

The upload function is called when the "Upload File" button is clicked. Since we only have a single file to upload, we do not need to manage the queue, and can just make a single upload() call, passing the file id and the URL where to send the upload. The other two parameters to the upload() call are the name of the method to send accompanying variables ("GET" or "POST", and "GET" is default), and an object containing variables themselves.

This function, called when the user presses the "Clear List" button, clears the upload queue and reenables the uploader UI.

This function handles uploadProgress events, and draws a progress bar of correct size.

This function handles the uploadComplete event, draws a full progress bar, and reenables the uploader UI.

The rest of the event handlers are left as placeholders.

YUI Logger Output:

Uploader Control Examples:

More Uploader Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.