<style type="text/css">

.progressbars {

width:300px;

}

.yui3-progressbar {

margin-bottom:3px;

border: 2px solid #c4c4c4;

border-radius:5px;

-moz-border-radius: 5px;

-webkit-border-radius:5px;

}

.yui3-progressbar .yui3-progressbar-content {

background-color:#fff;

position:relative;

/* width: 200px; */

}

.yui3-progressbar .yui3-progressbar-label {

position: absolute;

top:1px;

left:3px;

font-size:11px;

font-family:Arial,Helvetica,sans-serif;

}

.yui3-progressbar .yui3-progressbar-slider {

background-color:#e0bb30;

height: 15px;

line-height: 29px;

width: 0;

}

#selectFilesLink #selectLink,

#uploadFilesLink #uploadLink {

color: #00c;

text-decoration: underline;

}

</style>

<div id="uploaderContainer">

<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>

<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>

</div>

<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">

<table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">

<thead>

<tr><th>Filename</th><th>File size</th><th>Percent uploaded</th></tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<script>

YUI({filter:"raw", gallery: 'gallery-2011.02.09-21-32'}).use("uploader", 'gallery-progress-bar', function(Y) {

var uploader,

selectedFiles = {};

function init () {

var overlayRegion = Y.one("#selectLink").get('region');

Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);

Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

{{#if dist}}

var swfURL = {{yuiLocalBuildUrl}}/uploader/assets/uploader.swf;

{{else}}

var swfURL = Y.Env.cdn + "uploader/assets/uploader.swf";

{{/if}}

if (Y.UA.ie >= 6) {

swfURL += "?t=" + Y.guid();

}

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay",

swfURL: swfURL});

uploader.on("uploaderReady", setupUploader);

uploader.on("fileselect", fileSelect);

uploader.on("uploadprogress", updateProgress);

uploader.on("uploadcomplete", uploadComplete);

}

Y.on("domready", init);

function setupUploader (event) {

uploader.set("multiFiles", true);

uploader.set("simLimit", 3);

uploader.set("log", true);

var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},

{description:"Videos", extensions:"*.avi;*.mov;*.mpg"});

uploader.set("fileFilters", fileFilters);

}

function fileSelect (event) {

var fileData = event.fileList;

for (var key in fileData) {

if (!selectedFiles[fileData[key].id]) {

var output = "<tr><td>" + fileData[key].name + "</td><td>" +

fileData[key].size + "</td><td><div id='div_" +

fileData[key].id + "' class='progressbars'></div></td></tr>";

Y.one("#filenames tbody").append(output);

var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'}, label: {0: '', 100: 'Upload complete'});

progressBar.render("#div_" + fileData[key].id);

progressBar.set("progress", 0);

selectedFiles[fileData[key].id] = true;

}

}

}

function updateProgress (event) {

var pb = Y.Widget.getByNode("#pb_" + event.id);

pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));

}

function uploadComplete (event) {

var pb = Y.Widget.getByNode("#pb_" + event.id);

pb.set("progress", 100);

}

function uploadFiles (event) {

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

}

Y.one("#uploadFilesLink").on("click", uploadFiles);

});

</script>