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