2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.com/yui/license.html
8 YUI.add('io-upload-iframe', function(Y) {
11 * Extends the IO base class to enable file uploads, with HTML forms,
12 * using an iframe as the transport medium.
14 * @submodule io-upload-iframe
19 _std = (d.documentMode && d.documentMode >= 8),
20 _d = decodeURIComponent;
22 * @description Parses the POST data object and creates hidden form elements
23 * for each key-value, and appends them to the HTML form object.
27 * @param {object} f HTML form object.
28 * @param {string} s The key-value POST data.
29 * @return {array} e Array of created fields.
31 function _addData(f, s) {
36 for (i = 0, l = m.length - 1; i < l; i++) {
37 o[i] = d.createElement('input');
39 o[i].name = _d(m[i].substring(m[i].lastIndexOf('&') + 1));
40 o[i].value = (i + 1 === l) ? _d(m[i + 1]) : _d(m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))));
48 * @description Removes the custom fields created to pass additional POST
49 * data, along with the HTML form fields.
53 * @param {object} f HTML form object.
54 * @param {object} o HTML form fields created from configuration.data.
57 function _removeData(f, o) {
60 for (i = 0, l = o.length; i < l; i++) {
66 * @description Sets the appropriate attributes and values to the HTML
67 * form, in preparation of a file upload transaction.
71 * @param {object} f HTML form object.
72 * @param {object} id The Transaction ID.
73 * @param {object} uri Qualified path to transaction resource.
76 function _setAttrs(f, id, uri) {
77 f.setAttribute('action', uri);
78 f.setAttribute('method', 'POST');
79 f.setAttribute('target', 'ioupload' + id );
80 f.setAttribute(Y.UA.ie && !_std ? 'encoding' : 'enctype', 'multipart/form-data');
84 * @description Reset the HTML form attributes to their original values.
88 * @param {object} f HTML form object.
89 * @param {object} a Object of original attributes.
92 function _resetAttrs(f, a){
96 if (a.hasOwnProperty(p)) {
98 f.setAttribute(p, f[p]);
101 f.removeAttribute(p);
108 * @description Starts timeout count if the configuration object
109 * has a defined timeout property.
111 * @method _startTimeout
114 * @param {object} o Transaction object generated by _create().
115 * @param {object} c Configuration object passed to YUI.io().
118 function _startTimeout(o, c) {
119 Y.io._timeout[o.id] = w.setTimeout(
121 var r = { id: o.id, status: 'timeout' };
129 * @description Clears the timeout interval started by _startTimeout().
130 * @method _clearTimeout
133 * @param {number} id - Transaction ID.
136 function _clearTimeout(id) {
137 w.clearTimeout(Y.io._timeout[id]);
138 delete Y.io._timeout[id];
146 * @param {o} o The transaction object
147 * @param {object} uri Qualified path to transaction resource.
148 * @param {object} c Configuration object for the transaction.
151 function _destroy(id) {
152 Y.Event.purgeElement('#ioupload' + id, false);
153 Y.one('body').removeChild(Y.one('#ioupload' + id));
157 * @description Bound to the iframe's Load event and processes
162 * @param {o} o The transaction object
163 * @param {object} c Configuration object for the transaction.
166 function _handle(o, c) {
167 var d = Y.one('#ioupload' + o.id).get('contentWindow.document'),
176 // When a response Content-Type of "text/plain" is used, Firefox and Safari
177 // will wrap the response string with <pre></pre>.
178 p = b.one('pre:first-child');
179 o.c.responseText = p ? p.get('text') : b.get('text');
182 o.c.responseXML = d._node;
187 // The transaction is complete, so call _destroy to remove
188 // the event listener bound to the iframe transport, and then
189 // destroy the iframe.
190 w.setTimeout( function() { _destroy(o.id); }, 0);
194 * @description Creates the iframe transported used in file upload
195 * transactions, and binds the response event handler.
200 * @param {object} o Transaction object generated by _create().
201 * @param {object} c Configuration object passed to YUI.io().
204 function _create(o, c) {
205 var i = Y.Node.create('<iframe id="ioupload' + o.id + '" name="ioupload' + o.id + '" />');
206 i._node.style.position = 'absolute';
207 i._node.style.top = '-1000px';
208 i._node.style.left = '-1000px';
210 Y.one('body').appendChild(i);
211 // Bind the onload handler to the iframe to detect the file upload response.
212 Y.on("load", function() { _handle(o, c); }, '#ioupload' + o.id);
216 * @description Uploads HTML form data, inclusive of files/attachments,
217 * using the iframe created in _create to facilitate the transaction.
221 * @param {o} o The transaction object
222 * @param {object} uri Qualified path to transaction resource.
223 * @param {object} c Configuration object for the transaction.
226 function _send(o, uri, c) {
227 var f = (typeof c.form.id === 'string') ? d.getElementById(c.form.id) : c.form.id,
229 // Track original HTML form attribute values.
231 action: f.getAttribute('action'),
232 target: f.getAttribute('target')
235 // Initialize the HTML form properties in case they are
236 // not defined in the HTML form.
237 _setAttrs(f, o.id, uri);
239 fields = _addData(f, c.data);
242 // Start polling if a callback is present and the timeout
243 // property has been defined.
248 // Start file upload.
252 _removeData(f, fields);
254 // Restore HTML form attributes to their original values.
255 _resetAttrs(f, attr);
260 var r = { id: o.id, status: 'abort' };
262 if (Y.one('#ioupload' + o.id)) {
271 isInProgress: function() {
272 return Y.one('#ioupload' + o.id) ? true : false;
278 upload: function(o, uri, c) {
280 return _send(o, uri, c);
286 }, '3.3.0' ,{requires:['io-base','node-base']});