1 YUI.add('io-upload-iframe', function (Y, NAME) {

     2 

     3 /**

     4 Extends the IO  to enable file uploads, with HTML forms

     5 using an iframe as the transport medium.

     6 @module io

     7 @submodule io-upload-iframe

     8 @for IO

     9 **/

    10 

    11 var w = Y.config.win,

    12     d = Y.config.doc,

    13     _std = (d.documentMode && d.documentMode >= 8),

    14     _d = decodeURIComponent,

    15     _end = Y.IO.prototype.end;

    16 

    17 /**

    18  * Creates the iframe transported used in file upload

    19  * transactions, and binds the response event handler.

    20  *

    21  * @method _cFrame

    22  * @private

    23  * @param {Object} o Transaction object generated by _create().

    24  * @param {Object} c Configuration object passed to YUI.io().

    25  * @param {Object} io

    26  */

    27 function _cFrame(o, c, io) {

    28     var i = Y.Node.create('<iframe src="#" id="io_iframe' + o.id + '" name="io_iframe' + o.id + '" />');

    29         i._node.style.position = 'absolute';

    30         i._node.style.top = '-1000px';

    31         i._node.style.left = '-1000px';

    32         Y.one('body').appendChild(i);

    33     // Bind the onload handler to the iframe to detect the file upload response.

    34     Y.on("load", function() { io._uploadComplete(o, c); }, '#io_iframe' + o.id);

    35 }

    36 

    37 /**

    38  * Removes the iframe transport used in the file upload

    39  * transaction.

    40  *

    41  * @method _dFrame

    42  * @private

    43  * @param {Number} id The transaction ID used in the iframe's creation.

    44  */

    45 function _dFrame(id) {

    46 	Y.Event.purgeElement('#io_iframe' + id, false);

    47 	Y.one('body').removeChild(Y.one('#io_iframe' + id));

    48 	Y.log('The iframe transport for transaction ' + id + ' has been destroyed.', 'info', 'io');

    49 }

    50 

    51 Y.mix(Y.IO.prototype, {

    52    /**

    53     * Parses the POST data object and creates hidden form elements

    54     * for each key-value, and appends them to the HTML form object.

    55     * @method _addData

    56     * @private

    57     * @static

    58     * @param {Object} f HTML form object.

    59     * @param {String} s The key-value POST data.

    60     * @return {Array} o Array of created fields.

    61     */

    62     _addData: function(f, s) {

    63         // Serialize an object into a key-value string using

    64         // querystring-stringify-simple.

    65         if (Y.Lang.isObject(s)) {

    66             s = Y.QueryString.stringify(s);

    67         }

    68 

    69         var o = [],

    70             m = s.split('='),

    71             i, l;

    72 

    73         for (i = 0, l = m.length - 1; i < l; i++) {

    74             o[i] = d.createElement('input');

    75             o[i].type = 'hidden';

    76             o[i].name = _d(m[i].substring(m[i].lastIndexOf('&') + 1));

    77             o[i].value = (i + 1 === l) ? _d(m[i + 1]) : _d(m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))));

    78             f.appendChild(o[i]);

    79             Y.log('key: ' +  o[i].name + ' and value: ' + o[i].value + ' added as form data.', 'info', 'io');

    80         }

    81 

    82         return o;

    83     },

    84 

    85    /**

    86     * Removes the custom fields created to pass additional POST

    87     * data, along with the HTML form fields.

    88     * @method _removeData

    89     * @private

    90     * @static

    91     * @param {Object} f HTML form object.

    92     * @param {Object} o HTML form fields created from configuration.data.

    93     */

    94     _removeData: function(f, o) {

    95         var i, l;

    96 

    97         for (i = 0, l = o.length; i < l; i++) {

    98             f.removeChild(o[i]);

    99         }

   100     },

   101 

   102    /**

   103     * Sets the appropriate attributes and values to the HTML

   104     * form, in preparation of a file upload transaction.

   105     * @method _setAttrs

   106     * @private

   107     * @static

   108     * @param {Object} f HTML form object.

   109     * @param {Object} id The Transaction ID.

   110     * @param {Object} uri Qualified path to transaction resource.

   111     */

   112     _setAttrs: function(f, id, uri) {

   113         // Track original HTML form attribute values.

   114         this._originalFormAttrs = {

   115             action: f.getAttribute('action'),

   116             target: f.getAttribute('target')

   117         };

   118 

   119         f.setAttribute('action', uri);

   120         f.setAttribute('method', 'POST');

   121         f.setAttribute('target', 'io_iframe' + id );

   122         f.setAttribute(Y.UA.ie && !_std ? 'encoding' : 'enctype', 'multipart/form-data');

   123     },

   124 

   125    /**

   126     * Reset the HTML form attributes to their original values.

   127     * @method _resetAttrs

   128     * @private

   129     * @static

   130     * @param {Object} f HTML form object.

   131     * @param {Object} a Object of original attributes.

   132     */

   133     _resetAttrs: function(f, a) {

   134         Y.Object.each(a, function(v, p) {

   135             if (v) {

   136                 f.setAttribute(p, v);

   137             }

   138             else {

   139                 f.removeAttribute(p);

   140             }

   141         });

   142     },

   143 

   144    /**

   145     * Starts timeout count if the configuration object

   146     * has a defined timeout property.

   147     *

   148     * @method _startUploadTimeout

   149     * @private

   150     * @static

   151     * @param {Object} o Transaction object generated by _create().

   152     * @param {Object} c Configuration object passed to YUI.io().

   153     */

   154     _startUploadTimeout: function(o, c) {

   155         var io = this;

   156 

   157         io._timeout[o.id] = w.setTimeout(

   158             function() {

   159                 o.status = 0;

   160                 o.statusText = 'timeout';

   161                 io.complete(o, c);

   162                 io.end(o, c);

   163                 Y.log('Transaction ' + o.id + ' timeout.', 'info', 'io');

   164             }, c.timeout);

   165     },

   166 

   167    /**

   168     * Clears the timeout interval started by _startUploadTimeout().

   169     * @method _clearUploadTimeout

   170     * @private

   171     * @static

   172     * @param {Number} id - Transaction ID.

   173     */

   174     _clearUploadTimeout: function(id) {

   175         var io = this;

   176 

   177         w.clearTimeout(io._timeout[id]);

   178         delete io._timeout[id];

   179     },

   180 

   181    /**

   182     * Bound to the iframe's Load event and processes

   183     * the response data.

   184     * @method _uploadComplete

   185     * @private

   186     * @static

   187     * @param {Object} o The transaction object

   188     * @param {Object} c Configuration object for the transaction.

   189     */

   190     _uploadComplete: function(o, c) {

   191         var io = this,

   192             d = Y.one('#io_iframe' + o.id).get('contentWindow.document'),

   193             b = d.one('body'),

   194             p;

   195 

   196         if (c.timeout) {

   197             io._clearUploadTimeout(o.id);

   198         }

   199 

   200 		try {

   201 			if (b) {

   202 				// When a response Content-Type of "text/plain" is used, Firefox and Safari

   203 				// will wrap the response string with <pre></pre>.

   204 				p = b.one('pre:first-child');

   205 				o.c.responseText = p ? p.get('text') : b.get('text');

   206 				Y.log('The responseText value for transaction ' + o.id + ' is: ' + o.c.responseText + '.', 'info', 'io');

   207 			}

   208 			else {

   209 				o.c.responseXML = d._node;

   210 				Y.log('The response for transaction ' + o.id + ' is an XML document.', 'info', 'io');

   211 			}

   212 		}

   213 		catch (e) {

   214 			o.e = "upload failure";

   215 		}

   216 

   217         io.complete(o, c);

   218         io.end(o, c);

   219         // The transaction is complete, so call _dFrame to remove

   220         // the event listener bound to the iframe transport, and then

   221         // destroy the iframe.

   222         w.setTimeout( function() { _dFrame(o.id); }, 0);

   223     },

   224 

   225    /**

   226     * Uploads HTML form data, inclusive of files/attachments,

   227     * using the iframe created in _create to facilitate the transaction.

   228     * @method _upload

   229     * @private

   230     * @static

   231     * @param {Object} o The transaction object

   232     * @param {Object} uri Qualified path to transaction resource.

   233     * @param {Object} c Configuration object for the transaction.

   234     */

   235     _upload: function(o, uri, c) {

   236         var io = this,

   237             f = (typeof c.form.id === 'string') ? d.getElementById(c.form.id) : c.form.id,

   238             fields;

   239 

   240         // Initialize the HTML form properties in case they are

   241         // not defined in the HTML form.

   242         io._setAttrs(f, o.id, uri);

   243         if (c.data) {

   244             fields = io._addData(f, c.data);

   245         }

   246 

   247         // Start polling if a callback is present and the timeout

   248         // property has been defined.

   249         if (c.timeout) {

   250             io._startUploadTimeout(o, c);

   251             Y.log('Transaction timeout started for transaction ' + o.id + '.', 'info', 'io');

   252         }

   253 

   254         // Start file upload.

   255         f.submit();

   256         io.start(o, c);

   257         if (c.data) {

   258             io._removeData(f, fields);

   259         }

   260 

   261         return {

   262             id: o.id,

   263             abort: function() {

   264                 o.status = 0;

   265                 o.statusText = 'abort';

   266                 if (Y.one('#io_iframe' + o.id)) {

   267                     _dFrame(o.id);

   268                     io.complete(o, c);

   269                     io.end(o, c);

   270                     Y.log('Transaction ' + o.id + ' aborted.', 'info', 'io');

   271                 }

   272                 else {

   273                     Y.log('Attempted to abort transaction ' + o.id + ' but transaction has completed.', 'warn', 'io');

   274                     return false;

   275                 }

   276             },

   277             isInProgress: function() {

   278                 return Y.one('#io_iframe' + o.id) ? true : false;

   279             },

   280             io: io

   281         };

   282     },

   283 

   284     upload: function(o, uri, c) {

   285         _cFrame(o, c, this);

   286         return this._upload(o, uri, c);

   287     },

   288 

   289     end: function(transaction, config) {

   290         var form, io;

   291 

   292         if (config) {

   293             form = config.form;

   294 

   295             if (form && form.upload) {

   296                 io = this;

   297 

   298                 // Restore HTML form attributes to their original values.

   299                 form = (typeof form.id === 'string') ? d.getElementById(form.id) : form.id;

   300 

   301                 // Check whether the form still exists before resetting it.

   302                 if (form) {

   303                     io._resetAttrs(form, this._originalFormAttrs);

   304                 }

   305             }

   306         }

   307 

   308         return _end.call(this, transaction, config);

   309     }

   310 }, true);

   311 

   312 

   313 }, '@VERSION@', {"requires": ["io-base", "node-base"]});