This example demonstrates how the YUI Uploader Control can be rendered as a transparent layer on top of your own UI and how custom variables can be added to the upload's POST request. In this example, the server-side script also echoes the POST variables accompanying the upload; we 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
uploader.swf to your server and set the
YAHOO.Uploader.SWFURL variable to its full path.
Note: This example uses a server-side script to accept file uploads. The script used does not open or store the file data sent to it. It also does not store the accompanying POST variables, but it does echo them in the response relayed back to the sender of the request. When trying out the example, do not send any sensitive or private data. Do not exceed a file size of 10 MB.
In this example, we allow the user to select a single image or video, and upload it to the server, while tracking progress on the upload. The user can specify custom values for a couple POST vars sent along with the upload, and also get the response from the server (in this case, a simple echo of POSTed variables). 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.
For starters, let's define the necessary UI styles. We will use regular text links as the UI, and switch their background color when the mouse hovers over them.
Next, we'll place the UI elements on the page. Notice that the
selectFilesLink div is overlaid by the
uploaderOverlay is where we'll place the transparent Flash UI layer, that will dispatch various mouse events, based on which we will be able to change the appearance of the UI below.
We are also placing a few input fields for the user to specify two custom POST variables that will be sent along with the file upload, as well as a text field to report back on the upload progress, and a text area to display the response received from the server:
Once the DOM is ready, we can size our container for the transparent UI to the link below it. The following code accomplishes that: