← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/uploader/uploader-withvars.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Single File Upload with Additional Data</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: Single File Upload with Additional Data</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 extends the single file upload example and shows how to submit GET and POST variables along with the file upload request, and how to receive data from the server. The uploader is set up to filter extensions of uploaded files to only allow common image and video formats.</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
 
<div>Sending via GET: foo='bar', foo1='bar1'</div>
63
 
<div>Sending via POST: bar='bazz', bar1='bazz1'</div>
64
 
<div id="result">Data returned from the server:</div>
65
 
 
66
 
<script>
67
 
 
68
 
YUI({filter:"raw"}).use('uploader', function (Y) {
69
 
 
70
 
 
71
 
var swfURL = ../../build/uploader/assets/uploader.swf; 
72
 
 
73
 
 
74
 
if (Y.UA.ie >= 6) {
75
 
    swfURL += "?t=" + Y.guid();
76
 
}
77
 
 
78
 
var uploader = new Y.Uploader({boundingBox:"#selectButton", 
79
 
                               buttonSkin:"../assets/uploader/selectFileButton.png",
80
 
                               transparent: false,
81
 
                               swfURL: swfURL
82
 
                               });  
83
 
 
84
 
uploader.on("uploaderReady", setupUploader);
85
 
uploader.on("fileselect", fileSelect);
86
 
uploader.on("uploadprogress", updateProgress);
87
 
uploader.on("uploadcomplete", uploadComplete);
88
 
uploader.on("uploadcompletedata", uploadCompleteData);
89
 
 
90
 
Y.one("#uploadButtonLink").on("click", uploadFile);
91
 
 
92
 
 
93
 
function setupUploader (event) {
94
 
    uploader.set("multiFiles", false);
95
 
    uploader.set("log", true);
96
 
    
97
 
    var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
98
 
                       {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
99
 
    
100
 
    uploader.set("fileFilters", fileFilters);
101
 
}
102
 
 
103
 
 
104
 
function fileSelect (event) {
105
 
    var fileData = event.fileList;  
106
 
 
107
 
    for (var key in fileData) {
108
 
        var output = "File selected: " + fileData[key].name;
109
 
        Y.one("#filename").setContent(output);
110
 
    }
111
 
}
112
 
 
113
 
function updateProgress (event) {
114
 
    Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
115
 
}
116
 
 
117
 
function uploadComplete (event) {
118
 
    Y.one("#percent").setContent("Upload complete!");
119
 
}
120
 
 
121
 
function uploadCompleteData (event) {
122
 
    Y.one("#result").setContent("Data returned from the server:<br>" + event.data);
123
 
}
124
 
 
125
 
function uploadFile (event) {
126
 
    uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
127
 
}
128
 
 
129
 
 
130
 
});
131
 
 
132
 
</script>
133
 
</div>
134
 
 
135
 
<h2>Adding Functionality to Simple File Upload</h2>
136
 
 
137
 
<p>Please read the "Simple File Upload" example tutorial first, since this example builds on top of it.</p>
138
 
 
139
 
<h2>Additional UI</h2>
140
 
<p>In addition to the UI for selecting files, uploading them, and reporting on the upload progress, add the container to output the data returned from the server:</p>
141
 
 
142
 
<pre class="code prettyprint">&lt;div id=&quot;result&quot;&gt;Data returned from the server:&lt;&#x2F;div&gt;</pre>
143
 
 
144
 
 
145
 
<h2>Event Binding for <code>uploadcompletedata</code></h2>
146
 
<p>When declaring uploader event bindings, add a handler for the <code>uploadcompletedata</code> event, which carries the output returned by the server:</p>
147
 
 
148
 
<pre class="code prettyprint">uploader.on(&quot;uploadcompletedata&quot;, uploadCompleteData);</pre>
149
 
 
150
 
 
151
 
<h2>Handling <code>uploadcompletedata</code></h2>
152
 
<p>Add a handler for the <code>uploadcompletedata</code> event. In the handler, set the content of the <code>result</code> container to the server's response to the request, carried in the event payload:</p>
153
 
 
154
 
<pre class="code prettyprint">function uploadCompleteData (event) {
155
 
        Y.one(&quot;#result&quot;).setContent(&quot;Data returned from the server:&lt;br&gt;&quot; + event.data);
156
 
}</pre>
157
 
 
158
 
 
159
 
<h2>Change Upload Method</h2>
160
 
<p>Finally, modify the <code>uploadAll()</code> method call to specifically set the variable transmission method to POST and to add the variables to be carried in the POST request:</p>
161
 
 
162
 
<pre class="code prettyprint">function uploadFile (event) {
163
 
        uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload.php?foo=bar&amp;foo1=bar1&quot;, &quot;POST&quot;, {bar:&quot;bazz&quot;, bar1:&quot;bazz1&quot;});
164
 
}</pre>
165
 
 
166
 
 
167
 
<h2>Full Source Code For this Example</h2>
168
 
 
169
 
<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;
170
 
    .uploadButton a {
171
 
        display:block;
172
 
        width:100px;
173
 
        height:40px;
174
 
        text-decoration: none;
175
 
    }
176
 
 
177
 
    .uploadButton a {
178
 
        background: url(&quot;..&#x2F;assets&#x2F;uploader&#x2F;uploadFileButton.png&quot;) 0 0 no-repeat;
179
 
    }
180
 
 
181
 
    .uploadButton a:visited {
182
 
        background-position: 0 0;
183
 
    }
184
 
 
185
 
    .uploadButton a:hover { 
186
 
        background-position: 0 -40px;
187
 
    }
188
 
 
189
 
    .uploadButton a:active {
190
 
        background-position: 0 -80px;
191
 
    }
192
 
&lt;&#x2F;style&gt;
193
 
 
194
 
&lt;div id=&quot;selectButton&quot; style=&quot;width:100px;height:40px&quot;&gt;&lt;&#x2F;div&gt; 
195
 
&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;
196
 
 
197
 
&lt;div id=&quot;filename&quot;&gt;
198
 
File selected:
199
 
&lt;&#x2F;div&gt;
200
 
&lt;div id=&quot;percent&quot;&gt;
201
 
Percent uploaded:
202
 
&lt;&#x2F;div&gt;
203
 
&lt;div&gt;Sending via GET: foo=&#x27;bar&#x27;, foo1=&#x27;bar1&#x27;&lt;&#x2F;div&gt;
204
 
&lt;div&gt;Sending via POST: bar=&#x27;bazz&#x27;, bar1=&#x27;bazz1&#x27;&lt;&#x2F;div&gt;
205
 
&lt;div id=&quot;result&quot;&gt;Data returned from the server:&lt;&#x2F;div&gt;
206
 
 
207
 
&lt;script&gt;
208
 
 
209
 
YUI({filter:&quot;raw&quot;}).use(&#x27;uploader&#x27;, function (Y) {
210
 
 
211
 
 
212
 
var swfURL = ..&#x2F;..&#x2F;build&#x2F;uploader&#x2F;assets&#x2F;uploader.swf; 
213
 
 
214
 
 
215
 
if (Y.UA.ie &gt;= 6) {
216
 
    swfURL += &quot;?t=&quot; + Y.guid();
217
 
}
218
 
 
219
 
var uploader = new Y.Uploader({boundingBox:&quot;#selectButton&quot;, 
220
 
                               buttonSkin:&quot;..&#x2F;assets&#x2F;uploader&#x2F;selectFileButton.png&quot;,
221
 
                               transparent: false,
222
 
                               swfURL: swfURL
223
 
                               });  
224
 
 
225
 
uploader.on(&quot;uploaderReady&quot;, setupUploader);
226
 
uploader.on(&quot;fileselect&quot;, fileSelect);
227
 
uploader.on(&quot;uploadprogress&quot;, updateProgress);
228
 
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);
229
 
uploader.on(&quot;uploadcompletedata&quot;, uploadCompleteData);
230
 
 
231
 
Y.one(&quot;#uploadButtonLink&quot;).on(&quot;click&quot;, uploadFile);
232
 
 
233
 
 
234
 
function setupUploader (event) {
235
 
    uploader.set(&quot;multiFiles&quot;, false);
236
 
    uploader.set(&quot;log&quot;, true);
237
 
    
238
 
    var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
239
 
                       {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
240
 
    
241
 
    uploader.set(&quot;fileFilters&quot;, fileFilters);
242
 
}
243
 
 
244
 
 
245
 
function fileSelect (event) {
246
 
    var fileData = event.fileList;  
247
 
 
248
 
    for (var key in fileData) {
249
 
        var output = &quot;File selected: &quot; + fileData[key].name;
250
 
        Y.one(&quot;#filename&quot;).setContent(output);
251
 
    }
252
 
}
253
 
 
254
 
function updateProgress (event) {
255
 
    Y.one(&quot;#percent&quot;).setContent(&quot;Percent uploaded: &quot; + Math.round((100 * event.bytesLoaded &#x2F; event.bytesTotal)) + &quot;%&quot;);
256
 
}
257
 
 
258
 
function uploadComplete (event) {
259
 
    Y.one(&quot;#percent&quot;).setContent(&quot;Upload complete!&quot;);
260
 
}
261
 
 
262
 
function uploadCompleteData (event) {
263
 
    Y.one(&quot;#result&quot;).setContent(&quot;Data returned from the server:&lt;br&gt;&quot; + event.data);
264
 
}
265
 
 
266
 
function uploadFile (event) {
267
 
    uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload.php?foo=bar&amp;foo1=bar1&quot;, &quot;POST&quot;, {bar:&quot;bazz&quot;, bar1:&quot;bazz1&quot;});
268
 
}
269
 
 
270
 
 
271
 
});
272
 
 
273
 
&lt;&#x2F;script&gt;</pre>
274
 
 
275
 
 
276
 
</div>
277
 
        </div>
278
 
 
279
 
        <div id="sidebar" class="yui3-u">
280
 
            
281
 
 
282
 
            
283
 
                <div class="sidebox">
284
 
                    <div class="hd">
285
 
                        <h2 class="no-toc">Examples</h2>
286
 
                    </div>
287
 
 
288
 
                    <div class="bd">
289
 
                        <ul class="examples">
290
 
                            
291
 
                                
292
 
                                    <li data-description="How to upload a single file, while tracking progress and using a sprite-skinned button">
293
 
                                        <a href="uploader-simple.html">Simple Uploader with Progress Tracking</a>
294
 
                                    </li>
295
 
                                
296
 
                            
297
 
                                
298
 
                                    <li data-description="How to upload a single file, along with GET and POST Vars Submission and receive data from the server">
299
 
                                        <a href="uploader-withvars.html">Single File Upload with Additional Data</a>
300
 
                                    </li>
301
 
                                
302
 
                            
303
 
                                
304
 
                                    <li data-description="How to upload multiple files with progress tracking and a transparent overlay upload button">
305
 
                                        <a href="uploader-multiple.html">Multiple Files Upload with Transparent Overlay Button</a>
306
 
                                    </li>
307
 
                                
308
 
                            
309
 
                        </ul>
310
 
                    </div>
311
 
                </div>
312
 
            
313
 
 
314
 
            
315
 
        </div>
316
 
    </div>
317
 
</div>
318
 
 
319
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
320
 
<script>prettyPrint();</script>
321
 
 
322
 
</body>
323
 
</html>