← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/tests/uploader-deprecated/tests/uploader-multiple.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/tests/uploader-deprecated/tests/uploader-multiple.html
1
 
<html>
2
 
<head>
3
 
    <title>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</title>
4
 
        <script type="text/javascript" src="../../../build/yui/yui-min.js"></script>
5
 
        <script type="text/javascript" src="../../../build/uploader-deprecated/uploader-deprecated.js"></script>
6
 
        
7
 
<style>
8
 
 
9
 
.yui3-progressbar {
10
 
        width:200px;
11
 
        height:20px;
12
 
}
13
 
 
14
 
.yui3-progressbar .yui3-progressbar-label {
15
 
        position:absolute;
16
 
        font-size:11px;
17
 
        top: 4px;
18
 
        left: 5px;
19
 
        z-index: 3;
20
 
}
21
 
 
22
 
.yui3-progressbar .yui3-progressbar-content {
23
 
        position:relative;
24
 
        width:200px;
25
 
        height:20px;
26
 
        background:url('assets/active.gif') left center no-repeat;
27
 
        z-index: 1;
28
 
}
29
 
 
30
 
.yui3-progressbar .yui3-progressbar-slider {
31
 
        position:absolute;
32
 
        width:200px;
33
 
        height:20px;
34
 
        top: 0px;
35
 
        left: 0px;
36
 
        background:url('assets/background.gif') left center no-repeat;
37
 
        z-index: 2;
38
 
}
39
 
 
40
 
</style>
41
 
</head>
42
 
<body>
43
 
<h1>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h1>
44
 
<div id="uploaderContainer"> 
45
 
        <div id="uploaderOverlay" style="position:absolute; z-index:2"></div> 
46
 
        <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div> 
47
 
</div> 
48
 
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>
49
 
 
50
 
<div id="files">
51
 
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
52
 
        <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
53
 
  </table>      
54
 
</div>
55
 
<script>
56
 
 
57
 
 
58
 
YUI({ debug:true, 
59
 
          filter:"raw",
60
 
      gallery: 'gallery-2010.06.30-19-54'}).use('base', 'event', 'node', 'swf', 'uploader-deprecated', 'gallery-progressbar', function (Y) {
61
 
        
62
 
var uploader;
63
 
 
64
 
function init () {
65
 
        
66
 
var overlayRegion = Y.one("#selectLink").get('region');
67
 
Y.log(overlayRegion);
68
 
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
69
 
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);
70
 
 
71
 
uploader = new Y.Uploader({boundingBox:"#uploaderOverlay", 
72
 
                                                   swfURL:"../../../build/uploader-deprecated/assets/uploader.swf",
73
 
                                               transparent: true
74
 
                                                  });
75
 
 
76
 
uploader.on("uploaderReady", setupUploader);
77
 
uploader.on("fileselect", fileSelect);
78
 
uploader.on("uploadprogress", updateProgress);
79
 
uploader.on("uploadcomplete", uploadComplete);
80
 
}
81
 
 
82
 
Y.on("domready", init);
83
 
 
84
 
 
85
 
var setupUploader = function (event) {
86
 
        uploader.set("multiFiles", true);
87
 
        uploader.set("simLimit", 3);
88
 
        uploader.set("log", true);
89
 
        
90
 
        var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
91
 
                           {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
92
 
        
93
 
    uploader.set("fileFilters", fileFilters); 
94
 
}
95
 
 
96
 
var fileSelect = function (event) {
97
 
        Y.log("File was selected, parsing...");
98
 
        var fileData = event.fileList;  
99
 
 
100
 
        for (var key in fileData) {
101
 
                var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
102
 
                Y.one("#filenames").append(output);
103
 
                
104
 
                var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
105
 
                progressBar.render("#div_" + fileData[key].id);
106
 
                progressBar.set("progress", 0);
107
 
        }
108
 
}
109
 
 
110
 
var updateProgress = function (event) {
111
 
        var pb = Y.Widget.getByNode("#pb_" + event.id);
112
 
        pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
113
 
}
114
 
 
115
 
var uploadComplete = function (event) {
116
 
        var pb = Y.Widget.getByNode("#pb_" + event.id);
117
 
        pb.set("progress", 100);
118
 
}
119
 
 
120
 
var uploadFile = function (event) {
121
 
        uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
122
 
}
123
 
 
124
 
Y.one("#uploadFilesLink").on("click", uploadFile);
125
 
 
126
 
 
127
 
 
128
 
});
129
 
 
130
 
</script>
131
 
 
132
 
</body>
133
 
</html>