YUI Library Home

YUI Library Examples: Uploader Control: Advanced Uploader Example With Cookie Submission as a POST variable

Uploader Control: Advanced Uploader Example With Cookie Submission as a POST variable

One of the major limitations of the Flash-based uploader is that it cannot use browser cookies to authenticate file uploads. In this example, we provide sample code that demonstrates how to attach the page cookie as a variable in the body of the upload POST request, rather than in the header. The code will generate a cookie with a username and the last uploaded file name, and send the value along with the file that needs to be uploaded. We also provide a sample backend script that accepts the file upload and echoes the POST variables accompanying the upload (thus ascertaining that the cookie data was received by the server). We show how we can retrieve the data returned by the server and display it to the user.

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.

ATTENTION: This example WILL NOT WORK on this page. It is merely provided here as a convenience — you will need to set it up on your own server to run it.


Data returned by the server:

Advanced Uploader Example With Cookie Submission as a POST variable.

In this example, we demonstrate the code that allows the user to upload a single image or video to the server, and track the upload progress. In addition, the code will also send a generated document cookie along with the request. Since Flash cannot include the browser cookie in the header, the cookie will be attached as a POST variable. The sample server script provided at the end of this example will respond to the request, demonstrating that the cookie was received.

Because of security changes in Flash Player 10, the UI for invoking the "Browse" dialog has to be contained within the Flash player. In this example, the Flash player is rendered as a transparent overlay on top of a custom HTML-based UI. The Uploader running in the Flash player dispatches necessary mouse events to the DOM to make visual changes to the overlaid UI.

Just as in the other advanced example, we will use regular HTML links as the UI, and modify their background color when the mouse is hovered over them.

In addition to the controls, we'll also include the following elements: a messageContainer div as a container for messages we'll relay to the user, a selectedFileDisplay text field to show the name of the file selected for upload, a progressReport text field for showing the upload progress, and a returnedDataDisplay container with a text area to display the response received from the server:

When the DOM is in a usable state, the init() function will check the existing document cookie value to decide what to show in the messageContainer (see YAHOO.util.Event.onDOMReady for the onDOMReady event). In a standard scenario, the cookie will be set by the server in the header of the loaded page. In our case, for the example's sake, (YUI Cookie Utililty will be used to create and manipulate the example subcookies ("username" and "lastUploadedFile"). If the current Cookie("myCookie") does not have the matching subcookies in it, the messageContainer will display a UI allowing the user to set a custom username. In a case where the subcookies already exist, the messageContainer div will show a welcome message with the name of the file last uploaded by the user, and a "Remove User" button that will remove the username and the last uploaded file name from the document cookie.

Next, we'll add the code to actually modify the cookie based on the input from the user:

To record the name of the uploaded file, we set the variable named "fileName" on uploader's fileSelect event.

After the file upload is complete, we'll store the name of the uploaded file in the subcookie.

If the fileID variable has been populated, we will upload the file to the designated location. Note that we are passing the document cookie as a POST variable in the upload. Important: make sure that the domain of the server that the cookie is being sent to is in the same security sandbox as the domain from which the page hosting the upload dialog has originated. In a simplest scenario, this means that the upload server domain should be the same as the page's domain. That would ensure that the cookie content remains secure.

When a response is received from the server, we display it in the provided text area:

In PHP, where you would normally check for the cookie value by checking the global $_COOKIE array, you can instead check the POST variable that was used to carry the cookie. So, if the cookie is sent as a "cookieVar" parameter (as in the example above), instead of checking for:

you would check for:

A sample PHP code for retrieving the uploaded file might look as follows (this code does not perform any authentication; you would need to check the cookie as described above to do so):

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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