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 }

    49 

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

    51    /**

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

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

    54     * @method _addData

    55     * @private

    56     * @static

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

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

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

    60     */

    61     _addData: function(f, s) {

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

    63         // querystring-stringify-simple.

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

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

    66         }

    67 

    68         var o = [],

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

    70             i, l;

    71 

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

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

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

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

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

    77             f.appendChild(o[i]);

    78         }

    79 

    80         return o;

    81     },

    82 

    83    /**

    84     * Removes the custom fields created to pass additional POST

    85     * data, along with the HTML form fields.

    86     * @method _removeData

    87     * @private

    88     * @static

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

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

    91     */

    92     _removeData: function(f, o) {

    93         var i, l;

    94 

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

    96             f.removeChild(o[i]);

    97         }

    98     },

    99 

   100    /**

   101     * Sets the appropriate attributes and values to the HTML

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

   103     * @method _setAttrs

   104     * @private

   105     * @static

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

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

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

   109     */

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

   111         // Track original HTML form attribute values.

   112         this._originalFormAttrs = {

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

   114             target: f.getAttribute('target')

   115         };

   116 

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

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

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

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

   121     },

   122 

   123    /**

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

   125     * @method _resetAttrs

   126     * @private

   127     * @static

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

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

   130     */

   131     _resetAttrs: function(f, a) {

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

   133             if (v) {

   134                 f.setAttribute(p, v);

   135             }

   136             else {

   137                 f.removeAttribute(p);

   138             }

   139         });

   140     },

   141 

   142    /**

   143     * Starts timeout count if the configuration object

   144     * has a defined timeout property.

   145     *

   146     * @method _startUploadTimeout

   147     * @private

   148     * @static

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

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

   151     */

   152     _startUploadTimeout: function(o, c) {

   153         var io = this;

   154 

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

   156             function() {

   157                 o.status = 0;

   158                 o.statusText = 'timeout';

   159                 io.complete(o, c);

   160                 io.end(o, c);

   161             }, c.timeout);

   162     },

   163 

   164    /**

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

   166     * @method _clearUploadTimeout

   167     * @private

   168     * @static

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

   170     */

   171     _clearUploadTimeout: function(id) {

   172         var io = this;

   173 

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

   175         delete io._timeout[id];

   176     },

   177 

   178    /**

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

   180     * the response data.

   181     * @method _uploadComplete

   182     * @private

   183     * @static

   184     * @param {Object} o The transaction object

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

   186     */

   187     _uploadComplete: function(o, c) {

   188         var io = this,

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

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

   191             p;

   192 

   193         if (c.timeout) {

   194             io._clearUploadTimeout(o.id);

   195         }

   196 

   197 		try {

   198 			if (b) {

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

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

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

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

   203 			}

   204 			else {

   205 				o.c.responseXML = d._node;

   206 			}

   207 		}

   208 		catch (e) {

   209 			o.e = "upload failure";

   210 		}

   211 

   212         io.complete(o, c);

   213         io.end(o, c);

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

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

   216         // destroy the iframe.

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

   218     },

   219 

   220    /**

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

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

   223     * @method _upload

   224     * @private

   225     * @static

   226     * @param {Object} o The transaction object

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

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

   229     */

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

   231         var io = this,

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

   233             fields;

   234 

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

   236         // not defined in the HTML form.

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

   238         if (c.data) {

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

   240         }

   241 

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

   243         // property has been defined.

   244         if (c.timeout) {

   245             io._startUploadTimeout(o, c);

   246         }

   247 

   248         // Start file upload.

   249         f.submit();

   250         io.start(o, c);

   251         if (c.data) {

   252             io._removeData(f, fields);

   253         }

   254 

   255         return {

   256             id: o.id,

   257             abort: function() {

   258                 o.status = 0;

   259                 o.statusText = 'abort';

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

   261                     _dFrame(o.id);

   262                     io.complete(o, c);

   263                     io.end(o, c);

   264                 }

   265                 else {

   266                     return false;

   267                 }

   268             },

   269             isInProgress: function() {

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

   271             },

   272             io: io

   273         };

   274     },

   275 

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

   277         _cFrame(o, c, this);

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

   279     },

   280 

   281     end: function(transaction, config) {

   282         var form, io;

   283 

   284         if (config) {

   285             form = config.form;

   286 

   287             if (form && form.upload) {

   288                 io = this;

   289 

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

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

   292 

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

   294                 if (form) {

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

   296                 }

   297             }

   298         }

   299 

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

   301     }

   302 }, true);

   303 

   304 

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