docs/partials/uploader-multiple-source.mustache

	uploader-multiple-source.mustache revision 61347e205d65dcb803738228d1ffec58144e4eca
<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;">
    <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
  </table>
</div>

<script>

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

var uploader;

function init () {

var overlayRegion = Y.one("#selectLink").get('region');
Y.log(overlayRegion);
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay"});

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
}

Y.on("domready", init);


var setupUploader = function (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);
}

var fileSelect = function (event) {
    Y.log("File was selected, parsing...");
    var fileData = event.fileList;

    for (var key in fileData) {
        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>\n";
        Y.one("#filenames").append(output);

        var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
        progressBar.render("#div_" + fileData[key].id);
        progressBar.set("progress", 0);
    }
}

var updateProgress = function (event) {
    var pb = Y.Widget.getByNode("#pb_" + event.id);
    pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}

var uploadComplete = function (event) {
    var pb = Y.Widget.getByNode("#pb_" + event.id);
    pb.set("progress", 100);
}

var uploadFile = function (event) {
    uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

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


});

</script>