2 YUI 3.13.0 (build 508226d)
3 Copyright 2013 Yahoo! Inc. All rights reserved.
4 Licensed under the BSD License.
5 http://yuilibrary.com/license/
8 YUI.add('io-upload-iframe', function (Y, NAME) {
11 Extends the IO to enable file uploads, with HTML forms
12 using an iframe as the transport medium.
14 @submodule io-upload-iframe
20 _std = (d.documentMode && d.documentMode >= 8),
21 _d = decodeURIComponent,
22 _end = Y.IO.prototype.end;
25 * Creates the iframe transported used in file upload
26 * transactions, and binds the response event handler.
30 * @param {Object} o Transaction object generated by _create().
31 * @param {Object} c Configuration object passed to YUI.io().
34 function _cFrame(o, c, io) {
35 var i = Y.Node.create('<iframe src="#" id="io_iframe' + o.id + '" name="io_iframe' + o.id + '" />');
36 i._node.style.position = 'absolute';
37 i._node.style.top = '-1000px';
38 i._node.style.left = '-1000px';
39 Y.one('body').appendChild(i);
40 // Bind the onload handler to the iframe to detect the file upload response.
41 Y.on("load", function() { io._uploadComplete(o, c); }, '#io_iframe' + o.id);
45 * Removes the iframe transport used in the file upload
50 * @param {Number} id The transaction ID used in the iframe's creation.
52 function _dFrame(id) {
53 Y.Event.purgeElement('#io_iframe' + id, false);
54 Y.one('body').removeChild(Y.one('#io_iframe' + id));
57 Y.mix(Y.IO.prototype, {
59 * Parses the POST data object and creates hidden form elements
60 * for each key-value, and appends them to the HTML form object.
64 * @param {Object} f HTML form object.
65 * @param {String} s The key-value POST data.
66 * @return {Array} o Array of created fields.
68 _addData: function(f, s) {
69 // Serialize an object into a key-value string using
70 // querystring-stringify-simple.
71 if (Y.Lang.isObject(s)) {
72 s = Y.QueryString.stringify(s);
79 for (i = 0, l = m.length - 1; i < l; i++) {
80 o[i] = d.createElement('input');
82 o[i].name = _d(m[i].substring(m[i].lastIndexOf('&') + 1));
83 o[i].value = (i + 1 === l) ? _d(m[i + 1]) : _d(m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))));
91 * Removes the custom fields created to pass additional POST
92 * data, along with the HTML form fields.
96 * @param {Object} f HTML form object.
97 * @param {Object} o HTML form fields created from configuration.data.
99 _removeData: function(f, o) {
102 for (i = 0, l = o.length; i < l; i++) {
108 * Sets the appropriate attributes and values to the HTML
109 * form, in preparation of a file upload transaction.
113 * @param {Object} f HTML form object.
114 * @param {Object} id The Transaction ID.
115 * @param {Object} uri Qualified path to transaction resource.
117 _setAttrs: function(f, id, uri) {
118 // Track original HTML form attribute values.
119 this._originalFormAttrs = {
120 action: f.getAttribute('action'),
121 target: f.getAttribute('target')
124 f.setAttribute('action', uri);
125 f.setAttribute('method', 'POST');
126 f.setAttribute('target', 'io_iframe' + id );
127 f.setAttribute(Y.UA.ie && !_std ? 'encoding' : 'enctype', 'multipart/form-data');
131 * Reset the HTML form attributes to their original values.
132 * @method _resetAttrs
135 * @param {Object} f HTML form object.
136 * @param {Object} a Object of original attributes.
138 _resetAttrs: function(f, a) {
139 Y.Object.each(a, function(v, p) {
141 f.setAttribute(p, v);
144 f.removeAttribute(p);
150 * Starts timeout count if the configuration object
151 * has a defined timeout property.
153 * @method _startUploadTimeout
156 * @param {Object} o Transaction object generated by _create().
157 * @param {Object} c Configuration object passed to YUI.io().
159 _startUploadTimeout: function(o, c) {
162 io._timeout[o.id] = w.setTimeout(
165 o.statusText = 'timeout';
172 * Clears the timeout interval started by _startUploadTimeout().
173 * @method _clearUploadTimeout
176 * @param {Number} id - Transaction ID.
178 _clearUploadTimeout: function(id) {
181 w.clearTimeout(io._timeout[id]);
182 delete io._timeout[id];
186 * Bound to the iframe's Load event and processes
188 * @method _uploadComplete
191 * @param {Object} o The transaction object
192 * @param {Object} c Configuration object for the transaction.
194 _uploadComplete: function(o, c) {
196 d = Y.one('#io_iframe' + o.id).get('contentWindow.document'),
201 io._clearUploadTimeout(o.id);
206 // When a response Content-Type of "text/plain" is used, Firefox and Safari
207 // will wrap the response string with <pre></pre>.
208 p = b.one('pre:first-child');
209 o.c.responseText = p ? p.get('text') : b.get('text');
212 o.c.responseXML = d._node;
216 o.e = "upload failure";
221 // The transaction is complete, so call _dFrame to remove
222 // the event listener bound to the iframe transport, and then
223 // destroy the iframe.
224 w.setTimeout( function() { _dFrame(o.id); }, 0);
228 * Uploads HTML form data, inclusive of files/attachments,
229 * using the iframe created in _create to facilitate the transaction.
233 * @param {Object} o The transaction object
234 * @param {Object} uri Qualified path to transaction resource.
235 * @param {Object} c Configuration object for the transaction.
237 _upload: function(o, uri, c) {
239 f = (typeof c.form.id === 'string') ? d.getElementById(c.form.id) : c.form.id,
242 // Initialize the HTML form properties in case they are
243 // not defined in the HTML form.
244 io._setAttrs(f, o.id, uri);
246 fields = io._addData(f, c.data);
249 // Start polling if a callback is present and the timeout
250 // property has been defined.
252 io._startUploadTimeout(o, c);
255 // Start file upload.
259 io._removeData(f, fields);
266 o.statusText = 'abort';
267 if (Y.one('#io_iframe' + o.id)) {
276 isInProgress: function() {
277 return Y.one('#io_iframe' + o.id) ? true : false;
283 upload: function(o, uri, c) {
285 return this._upload(o, uri, c);
288 end: function(transaction, config) {
294 if (form && form.upload) {
297 // Restore HTML form attributes to their original values.
298 form = (typeof form.id === 'string') ? d.getElementById(form.id) : form.id;
300 io._resetAttrs(form, this._originalFormAttrs);
304 return _end.call(this, transaction, config);
309 }, '3.13.0', {"requires": ["io-base", "node-base"]});