uploader-multiple.html revision ec3da7f85c70d991f53c50587791088b994256f7
ee359fe1384507fed6c2274e7bfe81d288de4542Stephen Gallagher <title>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</title>
33396dc46ea52c18f47db1b5d590880806521005Sumit Bose <script type="text/javascript" src="/build/yui/yui-min.js"></script>
ee359fe1384507fed6c2274e7bfe81d288de4542Stephen Gallagher <script type="text/javascript" src="/build/uploader-deprecated/uploader-deprecated.js"></script>
324fb26ba803a999bedc29e93c46c84f27abf5b7Sumit Bose.yui3-progressbar {
324fb26ba803a999bedc29e93c46c84f27abf5b7Sumit Bose width:200px;
324fb26ba803a999bedc29e93c46c84f27abf5b7Sumit Bose height:20px;
84ae5edab16ad6be5e3be956cb6fa031c1428eb5Stephen Gallagher.yui3-progressbar .yui3-progressbar-label {
84ae5edab16ad6be5e3be956cb6fa031c1428eb5Stephen Gallagher position:absolute;
84ae5edab16ad6be5e3be956cb6fa031c1428eb5Stephen Gallagher font-size:11px;
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher.yui3-progressbar .yui3-progressbar-content {
ccf340e56364851f2e5b75e52d3d63701b662954Lukas Slebodnik position:relative;
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher background:url('assets/active.gif') left center no-repeat;
cc98edd9479d4622634a1275c98058916c14059aStephen Gallagher.yui3-progressbar .yui3-progressbar-slider {
d3da1c165cdb4c1ec126a8f4b6b544ca415b9d20Pavel Březina position:absolute;
002f84aea86371aa079b867c0ec39396b97109d3Lukas Slebodnik background:url('assets/background.gif') left center no-repeat;
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher<h1>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h1>
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher <div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
c89589fa349f38214c9cb8d9389c0fd557e5dca2Simo Sorce<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozek <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozek <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
86b61156743b7ebdc049450a6f88452890fd9a61Jakub HrozekYUI({ debug:true,
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozek filter:"raw",
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozek gallery: 'gallery-2010.06.30-19-54'}).use('base', 'event', 'node', 'swf', 'uploader-deprecated', 'gallery-progressbar', function (Y) {
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozekvar uploader;
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozekfunction init () {
86b61156743b7ebdc049450a6f88452890fd9a61Jakub Hrozekvar overlayRegion = Y.one("#selectLink").get('region');
48130eef6c5c64a07094b9e8582ba358b2048f24Jakub HrozekY.log(overlayRegion);
48130eef6c5c64a07094b9e8582ba358b2048f24Jakub HrozekY.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
48130eef6c5c64a07094b9e8582ba358b2048f24Jakub HrozekY.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagheruploader = new Y.Uploader({boundingBox:"#uploaderOverlay",
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher swfURL:"/build/uploader-deprecated/assets/uploader.swf",
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher transparent: true
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagheruploader.on("uploaderReady", setupUploader);
1658c567191c35beaddffafdb079abe33248037bLukas Slebodnikuploader.on("fileselect", fileSelect);
1658c567191c35beaddffafdb079abe33248037bLukas Slebodnikuploader.on("uploadprogress", updateProgress);
1658c567191c35beaddffafdb079abe33248037bLukas Slebodnikuploader.on("uploadcomplete", uploadComplete);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen GallagherY.on("domready", init);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallaghervar setupUploader = function (event) {
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher uploader.set("multiFiles", true);
d921c1eba437662437847279f251a0a5d8f70127Maxim uploader.set("simLimit", 3);
d921c1eba437662437847279f251a0a5d8f70127Maxim uploader.set("log", true);
d921c1eba437662437847279f251a0a5d8f70127Maxim var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
d921c1eba437662437847279f251a0a5d8f70127Maxim {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
d921c1eba437662437847279f251a0a5d8f70127Maxim uploader.set("fileFilters", fileFilters);
327127bb7fcc07f882209f029e14026de1b23c94Maximvar fileSelect = function (event) {
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher Y.log("File was selected, parsing...");
d3da1c165cdb4c1ec126a8f4b6b544ca415b9d20Pavel Březina var fileData = event.fileList;
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher for (var key in fileData) {
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher Y.one("#filenames").append(output);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
eb2e21b764d03544d8161e9956d7f70b07b75f77Simo Sorce progressBar.render("#div_" + fileData[key].id);
bc9235cfb80bd64a3bfa959e8d26d5ad1be0bdf4Jakub Hrozek progressBar.set("progress", 0);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallaghervar updateProgress = function (event) {
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher var pb = Y.Widget.getByNode("#pb_" + event.id);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
90fd1bbd6035cdab46faa3a695a2fb2be6508b17Sumit Bosevar uploadComplete = function (event) {
03713859dffacc7142393e53c73d8d4cf7dee8d5Pavel Březina var pb = Y.Widget.getByNode("#pb_" + event.id);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallagher pb.set("progress", 100);
551aa6c36797ed720487f5974dcadabf19e6ff9fStephen Gallaghervar uploadFile = function (event) {
068dbee9ca7bf5b37330eff91c94ae10f288d09fJakub Hrozek uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
e124844907ed6973915e4d56f5442ecd07535a12Jakub HrozekY.one("#uploadFilesLink").on("click", uploadFile);