uploader-multiple.html revision ec3da7f85c70d991f53c50587791088b994256f7
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <title>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</title>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <script type="text/javascript" src="/build/yui/yui-min.js"></script>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <script type="text/javascript" src="/build/uploader-deprecated/uploader-deprecated.js"></script>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich.yui3-progressbar {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich.yui3-progressbar .yui3-progressbar-label {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich position:absolute;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich font-size:11px;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich.yui3-progressbar .yui3-progressbar-content {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich position:relative;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich background:url('assets/active.gif') left center no-repeat;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich.yui3-progressbar .yui3-progressbar-slider {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich position:absolute;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich background:url('assets/background.gif') left center no-repeat;
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich<h1>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h1>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichYUI({ debug:true,
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich filter:"raw",
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich gallery: 'gallery-2010.06.30-19-54'}).use('base', 'event', 'node', 'swf', 'uploader-deprecated', 'gallery-progressbar', function (Y) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichfunction init () {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar overlayRegion = Y.one("#selectLink").get('region');
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichY.log(overlayRegion);
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichY.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichY.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichuploader = new Y.Uploader({boundingBox:"#uploaderOverlay",
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich swfURL:"/build/uploader-deprecated/assets/uploader.swf",
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich transparent: true
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichuploader.on("uploaderReady", setupUploader);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichuploader.on("fileselect", fileSelect);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichuploader.on("uploadprogress", updateProgress);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichuploader.on("uploadcomplete", uploadComplete);
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichY.on("domready", init);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar setupUploader = function (event) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich uploader.set("multiFiles", true);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich uploader.set("simLimit", 3);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich uploader.set("fileFilters", fileFilters);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar fileSelect = function (event) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich Y.log("File was selected, parsing...");
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich for (var key in fileData) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich Y.one("#filenames").append(output);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich progressBar.render("#div_" + fileData[key].id);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar updateProgress = function (event) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich var pb = Y.Widget.getByNode("#pb_" + event.id);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar uploadComplete = function (event) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich var pb = Y.Widget.getByNode("#pb_" + event.id);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich pb.set("progress", 100);
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovichvar uploadFile = function (event) {
ec3da7f85c70d991f53c50587791088b994256f7Allen Rabinovich uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
ec3da7f85c70d991f53c50587791088b994256f7Allen RabinovichY.one("#uploadFilesLink").on("click", uploadFile);