← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/uploader/uploader-simple.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/uploader/uploader-simple.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Simple Uploader with Progress Tracking</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Simple Uploader with Progress Tracking</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
<p>This example demonstrates how to use the YUI 3 Uploader to send a single image or video (filtered by file extension) to the server and to monitor the upload progress. The example also shows how to use a custom image skin for the "Browse" button used by the Uploader.</p>
22
 
 
23
 
<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>
24
 
<p><strong>Also note:</strong> The uploader is not supported on iOS devices (iPhone and iPad), because Flash player is not available on that system. This example will not function on such devices.</p>
25
 
</div>
26
 
 
27
 
<div class="example yui3-skin-sam">
28
 
        <style type="text/css">
29
 
                .uploadButton a {
30
 
                        display:block;
31
 
                        width:100px;
32
 
                        height:40px;
33
 
                        text-decoration: none;
34
 
                }
35
 
 
36
 
                .uploadButton a {
37
 
                        background: url("../assets/uploader/uploadFileButton.png") 0 0 no-repeat;
38
 
                }
39
 
 
40
 
            .uploadButton a:visited {
41
 
                        background-position: 0 0;
42
 
                }
43
 
 
44
 
            .uploadButton a:hover {     
45
 
                        background-position: 0 -40px;
46
 
                }
47
 
 
48
 
            .uploadButton a:active {
49
 
                        background-position: 0 -80px;
50
 
                }
51
 
        </style>
52
 
 
53
 
<div id="selectButton" style="width:100px;height:40px"></div> 
54
 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>
55
 
 
56
 
<div id="filename">
57
 
File selected:
58
 
</div>
59
 
<div id="percent">
60
 
Percent uploaded:
61
 
</div>
62
 
 
63
 
<script>
64
 
 
65
 
YUI({filter:"raw"}).use('uploader', function(Y) {
66
 
 
67
 
 
68
 
var swfURL = ../../build/uploader/assets/uploader.swf; 
69
 
 
70
 
 
71
 
if (Y.UA.ie >= 6) {
72
 
        swfURL += "?t=" + Y.guid();
73
 
}
74
 
 
75
 
 
76
 
 
77
 
var uploader = new Y.Uploader({boundingBox:"#selectButton", 
78
 
                                                           buttonSkin:"../assets/uploader/selectFileButton.png",
79
 
                                                           transparent: false,
80
 
                                                           swfURL: swfURL
81
 
                                                           });
82
 
 
83
 
uploader.on("uploaderReady", setupUploader);
84
 
uploader.on("fileselect", fileSelect);
85
 
uploader.on("uploadprogress", updateProgress);
86
 
uploader.on("uploadcomplete", uploadComplete);
87
 
 
88
 
Y.one("#uploadButtonLink").on("click", uploadFile);
89
 
 
90
 
 
91
 
function setupUploader (event) {
92
 
        uploader.set("multiFiles", false);
93
 
        uploader.set("log", true);
94
 
        
95
 
        var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
96
 
                           {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
97
 
        
98
 
    uploader.set("fileFilters", fileFilters);
99
 
}
100
 
 
101
 
 
102
 
function fileSelect (event) {
103
 
        var fileData = event.fileList;  
104
 
 
105
 
        for (var key in fileData) {
106
 
                var output = "File selected: " + fileData[key].name;
107
 
                Y.one("#filename").setContent(output);
108
 
        }
109
 
}
110
 
 
111
 
function updateProgress (event) {
112
 
        Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
113
 
}
114
 
 
115
 
function uploadComplete (event) {
116
 
        Y.one("#percent").setContent("Upload complete!");
117
 
}
118
 
 
119
 
function uploadFile (event) {
120
 
        uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
121
 
}
122
 
 
123
 
 
124
 
});
125
 
 
126
 
</script>
127
 
</div>
128
 
 
129
 
<h2>Set up the Uploader UI</h2>
130
 
 
131
 
<p>The Uploader requires that the "Browse" button be implemented as an instance of the Flash Player; all other controls can be regular DOM elements. For this example,  set up a container for the Flash Player and give it the id <code>selectButton</code> and set up a container for the "Upload" button (<code>uploadButton</code>). In addition, set up containers to display the name of the selected file (<code>filename</code>) and the progress of the upload (<code>percent</code>).</p>
132
 
<pre class="code prettyprint">&lt;div id=&quot;selectButton&quot; style=&quot;width:100px;height:40px&quot;&gt;&lt;&#x2F;div&gt; 
133
 
&lt;div class=&quot;uploadButton&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;uploadButtonLink&quot;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;div&gt;
134
 
 
135
 
&lt;div id=&quot;filename&quot;&gt;
136
 
File selected:
137
 
&lt;&#x2F;div&gt;
138
 
&lt;div id=&quot;percent&quot;&gt;
139
 
Percent uploaded:
140
 
&lt;&#x2F;div&gt;</pre>
141
 
 
142
 
 
143
 
<p>In the head section of the example, define custom styles for the <code>uploadButton</code> to give it an image skin that has multiple button states:</p>
144
 
 
145
 
<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;
146
 
        .uploadButton a {
147
 
                display:block;
148
 
                width:100px;
149
 
                height:40px;
150
 
                text-decoration: none;
151
 
        }
152
 
 
153
 
        .uploadButton a {
154
 
                background: url(&quot;assets&#x2F;uploadFileButton.png&quot;) 0 0 no-repeat;
155
 
        }
156
 
 
157
 
    .uploadButton a:visited {
158
 
                background-position: 0 0;
159
 
        }
160
 
 
161
 
    .uploadButton a:hover {     
162
 
                background-position: 0 -40px;
163
 
        }
164
 
 
165
 
    .uploadButton a:active {
166
 
                background-position: 0 -80px;
167
 
        }
168
 
&lt;&#x2F;style&gt;</pre>
169
 
 
170
 
 
171
 
<h2>Create a YUI Instance</h2>
172
 
<p>Now that the UI containers and controls are in place, create a YUI instance, using the <code>uploader</code> module, for this example:</p>
173
 
 
174
 
<pre class="code prettyprint">YUI().use(&quot;uploader&quot;, function(Y) {
175
 
        &#x2F;&#x2F; Y is the YUI instance.
176
 
        &#x2F;&#x2F; The rest of the code in this tutorial is encapsulated 
177
 
        &#x2F;&#x2F; in this anonymous function.
178
 
} );</pre>
179
 
 
180
 
 
181
 
<h2>Working around the IE Caching Bug</h2>
182
 
<p>Due to a bug in IE6 through IE8, when a SWF is loaded from local cache (after a page has been reloaded, for example), it's unable to properly communicate with the JavaScript VM. For that reason, specifically for IE,
183
 
we can prevent loading the SWF from cache by appending a random get variable to the SWF URL:</p>
184
 
 
185
 
<pre class="code prettyprint">var swfURL = Y.Env.cdn + &quot;uploader&#x2F;assets&#x2F;uploader.swf&quot;;
186
 
 
187
 
if (Y.UA.ie &gt;= 6) {
188
 
    swfURL += &quot;?t=&quot; + Y.guid();
189
 
}</pre>
190
 
 
191
 
 
192
 
<h2>Instantiate the Uploader</h2>
193
 
 
194
 
<p>Next, create an instance of an Uploader and configure it. The Uploader only requires the reference to the container in which the "Browse" button should be placed, but in this example an image skin for the button is being used; as result, we need to provide the <code>buttonSkin</code> property with a reference to the image sprite, as well as the <code>transparent</code> Boolean value (this property specifies whether the transparent areas of the image sprite are rendered as such; if no <code>buttonSkin</code> is specified, the entire uploader would render as transparent). Also note that we are including a custom SWF URL, defined in the workaround above (by default, the SWF URL would be as shown above, but unmodified):</p>
195
 
 
196
 
<pre class="code prettyprint">var uploader = new Y.Uploader({boundingBox:&quot;#selectButton&quot;, 
197
 
                               buttonSkin:&quot;assets&#x2F;selectFileButton.png&quot;,
198
 
                               transparent: false,
199
 
                               swfURL: swfURL
200
 
                              });</pre>
201
 
 
202
 
<h2>Listen for Uploader Events</h2>
203
 
<p>Next, add event handlers to various uploader events and the <code>click</code> handler for the "Upload" button. The <code>uploaderReady</code> event is particularly important because the uploader may not be ready to accept method calls until this event has fired. Therefore, any method calls and property settings for the uploader should be made within the handler for that event:</p>
204
 
<pre class="code prettyprint">uploader.on(&quot;uploaderReady&quot;, setupUploader);
205
 
uploader.on(&quot;fileselect&quot;, fileSelect);
206
 
uploader.on(&quot;uploadprogress&quot;, updateProgress);
207
 
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);
208
 
 
209
 
Y.one(&quot;#uploadButtonLink&quot;).on(&quot;click&quot;, uploadFile);</pre>
210
 
 
211
 
 
212
 
<h2>Set Up the Uploader</h2>
213
 
<p>Once the uploader is ready, and the <code>uploaderReady</code> event is fired, set properties to further configure the Uploader. In particular, set the <code>multiFiles</code> property to restrict user to selecting only a single file, the <code>log</code> property to provide debug information (output only if the computer is running the debug version of the Flash player), and the <code>fileFilters</code> property to filter files in the user's "Browse" dialog:</p>
214
 
 
215
 
<pre class="code prettyprint">function setupUploader (event) {
216
 
        uploader.set(&quot;multiFiles&quot;, false);
217
 
        uploader.set(&quot;log&quot;, true);
218
 
        
219
 
        var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
220
 
                           {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
221
 
        
222
 
    uploader.set(&quot;fileFilters&quot;, fileFilters);
223
 
}</pre>
224
 
 
225
 
 
226
 
<h2>Handler for the <code>fileselect</code> Event</h2>
227
 
 
228
 
<p>In the handler for the <code>fileselect</code>, extract the file list from the event payload and display the name of the file. In this particular case, the list should only contain one file name, since the user was restricted to selecting a single file:</p>
229
 
 
230
 
<pre class="code prettyprint">function fileSelect (event) {
231
 
        var fileData = event.fileList;  
232
 
 
233
 
        for (var key in fileData) {
234
 
                var output = &quot;File selected: &quot; + fileData[key].name;
235
 
                Y.one(&quot;#filename&quot;).setContent(output);
236
 
        }
237
 
}</pre>
238
 
 
239
 
 
240
 
<h2>Handler for Other Events</h2>
241
 
 
242
 
<p>In the <code>uploadprogress</code> handler, update the content of the <code>percent</code> container based on the values provided in the event payload. In the <code>uploadcomplete</code> handler, place the final message into the <code>percent</code> container. Finally, in the <code>click</code> handler, initiate the upload to a specific URL:</p>
243
 
 
244
 
<pre class="code prettyprint">function updateProgress (event) {
245
 
        Y.one(&quot;#percent&quot;).setContent(&quot;Percent uploaded: &quot; + Math.round((100 * event.bytesLoaded &#x2F; event.bytesTotal)) + &quot;%&quot;);
246
 
}
247
 
 
248
 
function uploadComplete (event) {
249
 
        Y.one(&quot;#percent&quot;).setContent(&quot;Upload complete!&quot;);
250
 
}
251
 
 
252
 
function uploadFile (event) {
253
 
        uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload_simple.php&quot;);
254
 
}</pre>
255
 
 
256
 
 
257
 
 
258
 
 
259
 
<h2>Full Source Code For this Example</h2>
260
 
 
261
 
<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;
262
 
 
263
 
.progressbars {
264
 
        width:300px;
265
 
}
266
 
 
267
 
.yui3-progressbar {
268
 
        margin-bottom:3px;
269
 
        border: 2px solid #c4c4c4;
270
 
        border-radius:5px;
271
 
        -moz-border-radius: 5px;
272
 
        -webkit-border-radius:5px;
273
 
}
274
 
.yui3-progressbar .yui3-progressbar-content {
275
 
        background-color:#fff;
276
 
        position:relative;
277
 
&#x2F;* width: 200px; *&#x2F;
278
 
}
279
 
.yui3-progressbar .yui3-progressbar-label {
280
 
        position: absolute;
281
 
        top:1px;
282
 
        left:3px;
283
 
        font-size:11px;
284
 
        font-family:Arial,Helvetica,sans-serif;
285
 
}
286
 
.yui3-progressbar .yui3-progressbar-slider {
287
 
        background-color:#e0bb30;
288
 
        height: 15px;
289
 
        line-height: 29px;
290
 
        width: 0;
291
 
}
292
 
 
293
 
#selectFilesLink #selectLink,
294
 
#uploadFilesLink #uploadLink {
295
 
    color: #00c;
296
 
    text-decoration: underline;
297
 
}
298
 
&lt;&#x2F;style&gt;
299
 
 
300
 
&lt;div id=&quot;uploaderContainer&quot;&gt; 
301
 
        &lt;div id=&quot;uploaderOverlay&quot; style=&quot;position:absolute; z-index:2&quot;&gt;&lt;&#x2F;div&gt; 
302
 
        &lt;div id=&quot;selectFilesLink&quot; style=&quot;z-index:1&quot;&gt;&lt;a id=&quot;selectLink&quot; href=&quot;#&quot;&gt;Select Files&lt;&#x2F;a&gt;&lt;&#x2F;div&gt; 
303
 
&lt;&#x2F;div&gt; 
304
 
&lt;div id=&quot;uploadFilesLink&quot;&gt;&lt;a id=&quot;uploadLink&quot; href=&quot;#&quot;&gt;Upload Files&lt;&#x2F;a&gt;&lt;&#x2F;div&gt;
305
 
 
306
 
&lt;div id=&quot;files&quot;&gt;
307
 
  &lt;table id=&quot;filenames&quot; style=&quot;border-width:1px; border-style:solid; padding:5px;&quot;&gt;
308
 
    &lt;thead&gt;
309
 
           &lt;tr&gt;&lt;th&gt;Filename&lt;&#x2F;th&gt;&lt;th&gt;File size&lt;&#x2F;th&gt;&lt;th&gt;Percent uploaded&lt;&#x2F;th&gt;&lt;&#x2F;tr&gt;
310
 
        &lt;&#x2F;thead&gt;
311
 
        &lt;tbody&gt;
312
 
        &lt;&#x2F;tbody&gt;
313
 
  &lt;&#x2F;table&gt;   
314
 
&lt;&#x2F;div&gt;
315
 
 
316
 
&lt;script&gt;
317
 
 
318
 
YUI({filter:&quot;raw&quot;, gallery: &#x27;gallery-2011.02.09-21-32&#x27;}).use(&quot;uploader&quot;, &#x27;gallery-progress-bar&#x27;, function(Y) {
319
 
        
320
 
var uploader,
321
 
    selectedFiles = {};
322
 
 
323
 
function init () {
324
 
var overlayRegion = Y.one(&quot;#selectLink&quot;).get(&#x27;region&#x27;);
325
 
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetWidth&quot;, overlayRegion.width);
326
 
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetHeight&quot;, overlayRegion.height);
327
 
 
328
 
 
329
 
 
330
 
var swfURL = ..&#x2F;..&#x2F;build&#x2F;uploader&#x2F;assets&#x2F;uploader.swf; 
331
 
 
332
 
 
333
 
if (Y.UA.ie &gt;= 6) {
334
 
        swfURL += &quot;?t=&quot; + Y.guid();
335
 
}
336
 
 
337
 
uploader = new Y.Uploader({boundingBox:&quot;#uploaderOverlay&quot;, 
338
 
                           swfURL: swfURL});    
339
 
 
340
 
uploader.on(&quot;uploaderReady&quot;, setupUploader);
341
 
uploader.on(&quot;fileselect&quot;, fileSelect);
342
 
uploader.on(&quot;uploadprogress&quot;, updateProgress);
343
 
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);
344
 
}
345
 
 
346
 
Y.on(&quot;domready&quot;, init);
347
 
 
348
 
 
349
 
function setupUploader (event) {
350
 
        uploader.set(&quot;multiFiles&quot;, true);
351
 
        uploader.set(&quot;simLimit&quot;, 3);
352
 
        uploader.set(&quot;log&quot;, true);
353
 
        
354
 
        var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
355
 
                           {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
356
 
        
357
 
    uploader.set(&quot;fileFilters&quot;, fileFilters); 
358
 
}
359
 
 
360
 
function fileSelect (event) {
361
 
        var fileData = event.fileList;  
362
 
    
363
 
        for (var key in fileData) {
364
 
                if (!selectedFiles[fileData[key].id]) {
365
 
                           var output = &quot;&lt;tr&gt;&lt;td&gt;&quot; + fileData[key].name + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&quot; + 
366
 
                                        fileData[key].size + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&lt;div id=&#x27;div_&quot; + 
367
 
                                        fileData[key].id + &quot;&#x27; class=&#x27;progressbars&#x27;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;&quot;;
368
 
                           Y.one(&quot;#filenames tbody&quot;).append(output);
369
 
                          
370
 
                           var progressBar = new Y.ProgressBar({id:&quot;pb_&quot; + fileData[key].id, layout : &#x27;&lt;div class=&quot;{labelClass}&quot;&gt;&lt;&#x2F;div&gt;&lt;div class=&quot;{sliderClass}&quot;&gt;&lt;&#x2F;div&gt;&#x27;});
371
 
                               progressBar.render(&quot;#div_&quot; + fileData[key].id);
372
 
                               progressBar.set(&quot;progress&quot;, 0);
373
 
               
374
 
               selectedFiles[fileData[key].id] = true;
375
 
                        }
376
 
        }
377
 
 
378
 
}
379
 
 
380
 
function updateProgress (event) {
381
 
        var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
382
 
        pb.set(&quot;progress&quot;, Math.round(100 * event.bytesLoaded &#x2F; event.bytesTotal));
383
 
}
384
 
 
385
 
function uploadComplete (event) {
386
 
        var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
387
 
        pb.set(&quot;progress&quot;, 100);
388
 
}
389
 
 
390
 
function uploadFiles (event) {
391
 
        uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload_simple.php&quot;);
392
 
}
393
 
 
394
 
Y.one(&quot;#uploadFilesLink&quot;).on(&quot;click&quot;, uploadFiles);
395
 
 
396
 
});
397
 
 
398
 
&lt;&#x2F;script&gt;</pre>
399
 
 
400
 
</div>
401
 
        </div>
402
 
 
403
 
        <div id="sidebar" class="yui3-u">
404
 
            
405
 
 
406
 
            
407
 
                <div class="sidebox">
408
 
                    <div class="hd">
409
 
                        <h2 class="no-toc">Examples</h2>
410
 
                    </div>
411
 
 
412
 
                    <div class="bd">
413
 
                        <ul class="examples">
414
 
                            
415
 
                                
416
 
                                    <li data-description="How to upload a single file, while tracking progress and using a sprite-skinned button">
417
 
                                        <a href="uploader-simple.html">Simple Uploader with Progress Tracking</a>
418
 
                                    </li>
419
 
                                
420
 
                            
421
 
                                
422
 
                                    <li data-description="How to upload a single file, along with GET and POST Vars Submission and receive data from the server">
423
 
                                        <a href="uploader-withvars.html">Single File Upload with Additional Data</a>
424
 
                                    </li>
425
 
                                
426
 
                            
427
 
                                
428
 
                                    <li data-description="How to upload multiple files with progress tracking and a transparent overlay upload button">
429
 
                                        <a href="uploader-multiple.html">Multiple Files Upload with Transparent Overlay Button</a>
430
 
                                    </li>
431
 
                                
432
 
                            
433
 
                        </ul>
434
 
                    </div>
435
 
                </div>
436
 
            
437
 
 
438
 
            
439
 
        </div>
440
 
    </div>
441
 
</div>
442
 
 
443
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
444
 
<script>prettyPrint();</script>
445
 
 
446
 
</body>
447
 
</html>