|
1 /* |
|
2 Copyright (c) 2009, Yahoo! Inc. All rights reserved. |
|
3 Code licensed under the BSD License: |
|
4 http://developer.yahoo.net/yui/license.txt |
|
5 version: 3.0.0 |
|
6 build: 1549 |
|
7 */ |
|
8 YUI.add('io-upload-iframe', function(Y) { |
|
9 |
|
10 /** |
|
11 * Extends the IO base class to enable file uploads, with HTML forms, |
|
12 * using an iframe as the transport medium. |
|
13 * @module io |
|
14 * @submodule io-upload-iframe |
|
15 */ |
|
16 |
|
17 var w = Y.config.win; |
|
18 /** |
|
19 * @description Parses the POST data object and creates hidden form elements |
|
20 * for each key-value, and appends them to the HTML form object. |
|
21 * @method appendData |
|
22 * @private |
|
23 * @static |
|
24 * @param {object} f HTML form object. |
|
25 * @param {string} s The key-value POST data. |
|
26 * @return {array} e Array of created fields. |
|
27 */ |
|
28 function _addData(f, s) { |
|
29 var o = [], |
|
30 m = s.split('='), |
|
31 i, l; |
|
32 |
|
33 for (i = 0, l = m.length - 1; i < l; i++) { |
|
34 o[i] = document.createElement('input'); |
|
35 o[i].type = 'hidden'; |
|
36 o[i].name = m[i].substring(m[i].lastIndexOf('&') + 1); |
|
37 o[i].value = (i + 1 === l) ? m[i + 1] : m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))); |
|
38 f.appendChild(o[i]); |
|
39 Y.log('key: ' + o[i].name + ' and value: ' + o[i].value + ' added as form data.', 'info', 'io'); |
|
40 } |
|
41 |
|
42 return o; |
|
43 } |
|
44 |
|
45 /** |
|
46 * @description Removes the custom fields created to pass additional POST |
|
47 * data, along with the HTML form fields. |
|
48 * @method f |
|
49 * @private |
|
50 * @static |
|
51 * @param {object} f HTML form object. |
|
52 * @param {object} o HTML form fields created from configuration.data. |
|
53 * @return {void} |
|
54 */ |
|
55 function _removeData(f, o) { |
|
56 var i, l; |
|
57 |
|
58 for(i = 0, l = o.length; i < l; i++){ |
|
59 f.removeChild(o[i]); |
|
60 } |
|
61 } |
|
62 |
|
63 /** |
|
64 * @description Sets the appropriate attributes and values to the HTML |
|
65 * form, in preparation of a file upload transaction. |
|
66 * @method _setAttrs |
|
67 * @private |
|
68 * @static |
|
69 * @param {object} f HTML form object. |
|
70 * @param {object} id The Transaction ID. |
|
71 * @param {object} uri Qualified path to transaction resource. |
|
72 * @return {void} |
|
73 */ |
|
74 function _setAttrs(f, id, uri) { |
|
75 var ie8 = (document.documentMode && document.documentMode === 8) ? true : false; |
|
76 |
|
77 f.setAttribute('action', uri); |
|
78 f.setAttribute('method', 'POST'); |
|
79 f.setAttribute('target', 'ioupload' + id ); |
|
80 f.setAttribute(Y.UA.ie && !ie8 ? 'encoding' : 'enctype', 'multipart/form-data'); |
|
81 } |
|
82 |
|
83 /** |
|
84 * @description Sets the appropriate attributes and values to the HTML |
|
85 * form, in preparation of a file upload transaction. |
|
86 * @method _resetAttrs |
|
87 * @private |
|
88 * @static |
|
89 * @param {object} f HTML form object. |
|
90 * @param {object} a Object of original attributes. |
|
91 * @return {void} |
|
92 */ |
|
93 function _resetAttrs(f, a){ |
|
94 var p; |
|
95 |
|
96 for (p in a) { |
|
97 if (a.hasOwnProperty(a, p)) { |
|
98 if (a[p]) { |
|
99 f.setAttribute(p, f[p]); |
|
100 } |
|
101 else { |
|
102 f.removeAttribute(p); |
|
103 } |
|
104 } |
|
105 } |
|
106 } |
|
107 |
|
108 /** |
|
109 * @description Creates the iframe transported used in file upload |
|
110 * transactions, and binds the response event handler. |
|
111 * |
|
112 * @method _create |
|
113 * @private |
|
114 * @static |
|
115 * @param {object} o Transaction object generated by _create(). |
|
116 * @param {object} c Configuration object passed to YUI.io(). |
|
117 * @return {void} |
|
118 */ |
|
119 function _create(o, c) { |
|
120 var i = Y.Node.create('<iframe id="ioupload' + o.id + '" name="ioupload' + o.id + '" />'); |
|
121 i._node.style.position = 'absolute'; |
|
122 i._node.style.top = '-1000px'; |
|
123 i._node.style.left = '-1000px'; |
|
124 |
|
125 Y.one('body').appendChild(i); |
|
126 // Bind the onload handler to the iframe to detect the file upload response. |
|
127 Y.on("load", function() { _handle(o, c) }, '#ioupload' + o.id); |
|
128 } |
|
129 |
|
130 /** |
|
131 * @description Bound to the iframe's Load event and processes |
|
132 * the response data. |
|
133 * @method _handle |
|
134 * @private |
|
135 * @static |
|
136 * @param {o} o The transaction object |
|
137 * @param {object} c Configuration object for the transaction. |
|
138 * @return {void} |
|
139 */ |
|
140 function _handle(o, c) { |
|
141 var d = Y.one('#ioupload' + o.id).get('contentWindow.document'), |
|
142 b = d.one('body'), |
|
143 xml = (d._node.nodeType === 9), |
|
144 p; |
|
145 |
|
146 if (c.timeout) { |
|
147 _clearTimeout(o.id); |
|
148 } |
|
149 |
|
150 if (b) { |
|
151 // When a response Content-Type of "text/plain" is used, Firefox and Safari |
|
152 // will wrap the response string with <pre></pre>. |
|
153 p = b.query('pre:first-child'); |
|
154 o.c.responseText = p ? p.get('innerHTML') : b.get('innerHTML'); |
|
155 Y.log('The responseText value for transaction ' + o.id + ' is: ' + o.c.responseText + '.', 'info', 'io'); |
|
156 } |
|
157 else if (xml) { |
|
158 o.c.responseXML = d._node; |
|
159 Y.log('The response for transaction ' + o.id + ' is an XML document.', 'info', 'io'); |
|
160 } |
|
161 |
|
162 Y.io.complete(o, c); |
|
163 Y.io.end(o, c); |
|
164 // The transaction is complete, so call _destroy to remove |
|
165 // the event listener bound to the iframe transport, and then |
|
166 // destroy the iframe. |
|
167 w.setTimeout( function() { _destroy(o.id); }, 0); |
|
168 } |
|
169 |
|
170 /** |
|
171 * @description Starts timeout count if the configuration object |
|
172 * has a defined timeout property. |
|
173 * |
|
174 * @method _startTimeout |
|
175 * @private |
|
176 * @static |
|
177 * @param {object} o Transaction object generated by _create(). |
|
178 * @param {object} c Configuration object passed to YUI.io(). |
|
179 * @return {void} |
|
180 */ |
|
181 function _startTimeout(o, c) { |
|
182 Y.io._timeout[o.id] = w.setTimeout( |
|
183 function() { |
|
184 var r = { id: o.id, status: 'timeout' }; |
|
185 |
|
186 Y.io.complete(r, c); |
|
187 Y.io.end(r, c); |
|
188 Y.log('Transaction ' + o.id + ' timeout.', 'info', 'io'); |
|
189 }, c.timeout); |
|
190 } |
|
191 |
|
192 /** |
|
193 * @description Clears the timeout interval started by _startTimeout(). |
|
194 * @method _clearTimeout |
|
195 * @private |
|
196 * @static |
|
197 * @param {number} id - Transaction ID. |
|
198 * @return {void} |
|
199 */ |
|
200 function _clearTimeout(id) { |
|
201 w.clearTimeout(Y.io._timeout[id]); |
|
202 delete Y.io._timeout[id]; |
|
203 } |
|
204 |
|
205 /** |
|
206 * @description |
|
207 * @method _destroy |
|
208 * @private |
|
209 * @static |
|
210 * @param {o} o The transaction object |
|
211 * @param {object} uri Qualified path to transaction resource. |
|
212 * @param {object} c Configuration object for the transaction. |
|
213 * @return {void} |
|
214 */ |
|
215 function _destroy(id) { |
|
216 Y.Event.purgeElement('#ioupload' + id, false); |
|
217 Y.one('body').removeChild(Y.one('#ioupload' + id)); |
|
218 Y.log('The iframe transport for transaction ' + id + ' has been destroyed.', 'info', 'io'); |
|
219 } |
|
220 |
|
221 Y.mix(Y.io, { |
|
222 /** |
|
223 * @description Uploads HTML form data, inclusive of files/attachments, |
|
224 * using the iframe created in _create to facilitate the transaction. |
|
225 * @method _upload |
|
226 * @private |
|
227 * @static |
|
228 * @param {o} o The transaction object |
|
229 * @param {object} uri Qualified path to transaction resource. |
|
230 * @param {object} c Configuration object for the transaction. |
|
231 * @return {void} |
|
232 */ |
|
233 _upload: function(o, uri, c) { |
|
234 var f = (typeof c.form.id === 'string') ? Y.config.doc.getElementById(c.form.id) : c.form.id, |
|
235 fields, |
|
236 // Track original HTML form attribute values. |
|
237 attr = { |
|
238 action: f.getAttribute('action'), |
|
239 target: f.getAttribute('target') |
|
240 }; |
|
241 |
|
242 _create(o, c); |
|
243 // Initialize the HTML form properties in case they are |
|
244 // not defined in the HTML form. |
|
245 _setAttrs(f, o.id, uri); |
|
246 if (c.data) { |
|
247 fields = _addData(f, c.data); |
|
248 } |
|
249 |
|
250 // Start polling if a callback is present and the timeout |
|
251 // property has been defined. |
|
252 if (c.timeout) { |
|
253 _startTimeout(o, c); |
|
254 Y.log('Transaction timeout started for transaction ' + o.id + '.', 'info', 'io'); |
|
255 } |
|
256 |
|
257 // Start file upload. |
|
258 f.submit(); |
|
259 Y.io.start(o.id, c); |
|
260 if (c.data) { |
|
261 _removeData(f, fields); |
|
262 } |
|
263 // Restore HTML form attributes to their original values. |
|
264 _resetAttrs(f, attr); |
|
265 |
|
266 return { |
|
267 id: o.id, |
|
268 abort: function() { |
|
269 var r = { id: o.id, status: 'abort' }; |
|
270 |
|
271 if (Y.one('#ioupload' + o.id)) { |
|
272 _destroy(o.id); |
|
273 Y.io.complete(r, c); |
|
274 Y.io.end(r, c); |
|
275 Y.log('Transaction ' + o.id + ' aborted.', 'info', 'io'); |
|
276 } |
|
277 else { |
|
278 Y.log('Attempted to abort transaction ' + o.id + ' but transaction has completed.', 'info', 'io'); |
|
279 return false; |
|
280 } |
|
281 }, |
|
282 isInProgress: function() { |
|
283 return Y.one('#ioupload' + o.id) ? true : false; |
|
284 } |
|
285 } |
|
286 } |
|
287 }); |
|
288 |
|
289 |
|
290 |
|
291 }, '3.0.0' ,{requires:['io-base','node-base','event-base']}); |