3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('io-upload-iframe', function(Y) {
10
Extends the IO to enable file uploads, with HTML forms
11
using an iframe as the transport medium.
13
@submodule io-upload-iframe
19
_std = (d.documentMode && d.documentMode >= 8),
20
_d = decodeURIComponent;
23
* Creates the iframe transported used in file upload
24
* transactions, and binds the response event handler.
28
* @param {Object} o Transaction object generated by _create().
29
* @param {Object} c Configuration object passed to YUI.io().
32
function _cFrame(o, c, io) {
33
var i = Y.Node.create('<iframe id="io_iframe' + o.id + '" name="io_iframe' + o.id + '" />');
34
i._node.style.position = 'absolute';
35
i._node.style.top = '-1000px';
36
i._node.style.left = '-1000px';
37
Y.one('body').appendChild(i);
38
// Bind the onload handler to the iframe to detect the file upload response.
39
Y.on("load", function() { io._uploadComplete(o, c); }, '#io_iframe' + o.id);
43
* Removes the iframe transport used in the file upload
48
* @param {Number} id The transaction ID used in the iframe's creation.
50
function _dFrame(id) {
51
Y.Event.purgeElement('#io_iframe' + id, false);
52
Y.one('body').removeChild(Y.one('#io_iframe' + id));
53
Y.log('The iframe transport for transaction ' + id + ' has been destroyed.', 'info', 'io');
56
Y.mix(Y.IO.prototype, {
58
* Parses the POST data object and creates hidden form elements
59
* for each key-value, and appends them to the HTML form object.
63
* @param {Object} f HTML form object.
64
* @param {String} s The key-value POST data.
65
* @return {Array} e Array of created fields.
67
_addData: function(f, s) {
68
// Serialize an object into a key-value string using
69
// querystring-stringify-simple.
70
if (Y.Lang.isObject(s)) {
71
s = Y.QueryString.stringify(s);
78
for (i = 0, l = m.length - 1; i < l; i++) {
79
o[i] = d.createElement('input');
81
o[i].name = _d(m[i].substring(m[i].lastIndexOf('&') + 1));
82
o[i].value = (i + 1 === l) ? _d(m[i + 1]) : _d(m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))));
84
Y.log('key: ' + o[i].name + ' and value: ' + o[i].value + ' added as form data.', 'info', 'io');
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
f.setAttribute('action', uri);
119
f.setAttribute('method', 'POST');
120
f.setAttribute('target', 'io_iframe' + id );
121
f.setAttribute(Y.UA.ie && !_std ? 'encoding' : 'enctype', 'multipart/form-data');
125
* Reset the HTML form attributes to their original values.
126
* @method _resetAttrs
129
* @param {Object} f HTML form object.
130
* @param {Object} a Object of original attributes.
132
_resetAttrs: function(f, a) {
133
Y.Object.each(a, function(v, p) {
135
f.setAttribute(p, v);
138
f.removeAttribute(p);
144
* Starts timeout count if the configuration object
145
* has a defined timeout property.
147
* @method _startTimeout
150
* @param {Object} o Transaction object generated by _create().
151
* @param {Object} c Configuration object passed to YUI.io().
153
_startTimeout: function(o, c) {
156
io._timeout[o.id] = w.setTimeout(
159
o.statusText = 'timeout';
162
Y.log('Transaction ' + o.id + ' timeout.', 'info', 'io');
167
* Clears the timeout interval started by _startTimeout().
168
* @method _clearTimeout
171
* @param {Number} id - Transaction ID.
173
_clearTimeout: function(id) {
176
w.clearTimeout(io._timeout[id]);
177
delete io._timeout[id];
181
* Bound to the iframe's Load event and processes
183
* @method _uploadComplete
186
* @param {Object} o The transaction object
187
* @param {Object} c Configuration object for the transaction.
189
_uploadComplete: function(o, c) {
191
d = Y.one('#io_iframe' + o.id).get('contentWindow.document'),
196
io._clearTimeout(o.id);
201
// When a response Content-Type of "text/plain" is used, Firefox and Safari
202
// will wrap the response string with <pre></pre>.
203
p = b.one('pre:first-child');
204
o.c.responseText = p ? p.get('text') : b.get('text');
205
Y.log('The responseText value for transaction ' + o.id + ' is: ' + o.c.responseText + '.', 'info', 'io');
208
o.c.responseXML = d._node;
209
Y.log('The response for transaction ' + o.id + ' is an XML document.', 'info', 'io');
213
o.e = "upload failure";
218
// The transaction is complete, so call _dFrame to remove
219
// the event listener bound to the iframe transport, and then
220
// destroy the iframe.
221
w.setTimeout( function() { _dFrame(o.id); }, 0);
225
* Uploads HTML form data, inclusive of files/attachments,
226
* using the iframe created in _create to facilitate the transaction.
230
* @param {Object} o The transaction object
231
* @param {Object} uri Qualified path to transaction resource.
232
* @param {Object} c Configuration object for the transaction.
234
_upload: function(o, uri, c) {
236
f = (typeof c.form.id === 'string') ? d.getElementById(c.form.id) : c.form.id,
237
// Track original HTML form attribute values.
239
action: f.getAttribute('action'),
240
target: f.getAttribute('target')
244
// Initialize the HTML form properties in case they are
245
// not defined in the HTML form.
246
io._setAttrs(f, o.id, uri);
248
fields = io._addData(f, c.data);
251
// Start polling if a callback is present and the timeout
252
// property has been defined.
254
io._startTimeout(o, c);
255
Y.log('Transaction timeout started for transaction ' + o.id + '.', 'info', 'io');
258
// Start file upload.
262
io._removeData(f, fields);
264
// Restore HTML form attributes to their original values.
265
io._resetAttrs(f, attr);
271
o.statusText = 'abort';
272
if (Y.one('#io_iframe' + o.id)) {
276
Y.log('Transaction ' + o.id + ' aborted.', 'info', 'io');
279
Y.log('Attempted to abort transaction ' + o.id + ' but transaction has completed.', 'warn', 'io');
283
isInProgress: function() {
284
return Y.one('#io_iframe' + o.id) ? true : false;
290
upload: function(o, uri, c) {
292
return this._upload(o, uri, c);
298
}, '3.4.1' ,{requires:['io-base','node-base']});