[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('io-upload-iframe', function (Y, NAME) {
   9  
  10  /**
  11  Extends the IO  to enable file uploads, with HTML forms
  12  using an iframe as the transport medium.
  13  @module io
  14  @submodule io-upload-iframe
  15  @for IO
  16  **/
  17  
  18  var w = Y.config.win,
  19      d = Y.config.doc,
  20      _std = (d.documentMode && d.documentMode >= 8),
  21      _d = decodeURIComponent,
  22      _end = Y.IO.prototype.end;
  23  
  24  /**
  25   * Creates the iframe transported used in file upload
  26   * transactions, and binds the response event handler.
  27   *
  28   * @method _cFrame
  29   * @private
  30   * @param {Object} o Transaction object generated by _create().
  31   * @param {Object} c Configuration object passed to YUI.io().
  32   * @param {Object} io
  33   */
  34  function _cFrame(o, c, io) {
  35      var i = Y.Node.create('<iframe 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);
  42  }
  43  
  44  /**
  45   * Removes the iframe transport used in the file upload
  46   * transaction.
  47   *
  48   * @method _dFrame
  49   * @private
  50   * @param {Number} id The transaction ID used in the iframe's creation.
  51   */
  52  function _dFrame(id) {
  53      Y.Event.purgeElement('#io_iframe' + id, false);
  54      Y.one('body').removeChild(Y.one('#io_iframe' + id));
  55      Y.log('The iframe transport for transaction ' + id + ' has been destroyed.', 'info', 'io');
  56  }
  57  
  58  Y.mix(Y.IO.prototype, {
  59     /**
  60      * Parses the POST data object and creates hidden form elements
  61      * for each key-value, and appends them to the HTML form object.
  62      * @method _addData
  63      * @private
  64      * @static
  65      * @param {Object} f HTML form object.
  66      * @param {String} s The key-value POST data.
  67      * @return {Array} o Array of created fields.
  68      */
  69      _addData: function(f, s) {
  70          // Serialize an object into a key-value string using
  71          // querystring-stringify-simple.
  72          if (Y.Lang.isObject(s)) {
  73              s = Y.QueryString.stringify(s);
  74          }
  75  
  76          var o = [],
  77              m = s.split('='),
  78              i, l;
  79  
  80          for (i = 0, l = m.length - 1; i < l; i++) {
  81              o[i] = d.createElement('input');
  82              o[i].type = 'hidden';
  83              o[i].name = _d(m[i].substring(m[i].lastIndexOf('&') + 1));
  84              o[i].value = (i + 1 === l) ? _d(m[i + 1]) : _d(m[i + 1].substring(0, (m[i + 1].lastIndexOf('&'))));
  85              f.appendChild(o[i]);
  86              Y.log('key: ' +  o[i].name + ' and value: ' + o[i].value + ' added as form data.', 'info', 'io');
  87          }
  88  
  89          return o;
  90      },
  91  
  92     /**
  93      * Removes the custom fields created to pass additional POST
  94      * data, along with the HTML form fields.
  95      * @method _removeData
  96      * @private
  97      * @static
  98      * @param {Object} f HTML form object.
  99      * @param {Object} o HTML form fields created from configuration.data.
 100      */
 101      _removeData: function(f, o) {
 102          var i, l;
 103  
 104          for (i = 0, l = o.length; i < l; i++) {
 105              f.removeChild(o[i]);
 106          }
 107      },
 108  
 109     /**
 110      * Sets the appropriate attributes and values to the HTML
 111      * form, in preparation of a file upload transaction.
 112      * @method _setAttrs
 113      * @private
 114      * @static
 115      * @param {Object} f HTML form object.
 116      * @param {Object} id The Transaction ID.
 117      * @param {Object} uri Qualified path to transaction resource.
 118      */
 119      _setAttrs: function(f, id, uri) {
 120          // Track original HTML form attribute values.
 121          this._originalFormAttrs = {
 122              action: f.getAttribute('action'),
 123              target: f.getAttribute('target')
 124          };
 125  
 126          f.setAttribute('action', uri);
 127          f.setAttribute('method', 'POST');
 128          f.setAttribute('target', 'io_iframe' + id );
 129          f.setAttribute(Y.UA.ie && !_std ? 'encoding' : 'enctype', 'multipart/form-data');
 130      },
 131  
 132     /**
 133      * Reset the HTML form attributes to their original values.
 134      * @method _resetAttrs
 135      * @private
 136      * @static
 137      * @param {Object} f HTML form object.
 138      * @param {Object} a Object of original attributes.
 139      */
 140      _resetAttrs: function(f, a) {
 141          Y.Object.each(a, function(v, p) {
 142              if (v) {
 143                  f.setAttribute(p, v);
 144              }
 145              else {
 146                  f.removeAttribute(p);
 147              }
 148          });
 149      },
 150  
 151     /**
 152      * Starts timeout count if the configuration object
 153      * has a defined timeout property.
 154      *
 155      * @method _startUploadTimeout
 156      * @private
 157      * @static
 158      * @param {Object} o Transaction object generated by _create().
 159      * @param {Object} c Configuration object passed to YUI.io().
 160      */
 161      _startUploadTimeout: function(o, c) {
 162          var io = this;
 163  
 164          io._timeout[o.id] = w.setTimeout(
 165              function() {
 166                  o.status = 0;
 167                  o.statusText = 'timeout';
 168                  io.complete(o, c);
 169                  io.end(o, c);
 170                  Y.log('Transaction ' + o.id + ' timeout.', 'info', 'io');
 171              }, c.timeout);
 172      },
 173  
 174     /**
 175      * Clears the timeout interval started by _startUploadTimeout().
 176      * @method _clearUploadTimeout
 177      * @private
 178      * @static
 179      * @param {Number} id - Transaction ID.
 180      */
 181      _clearUploadTimeout: function(id) {
 182          var io = this;
 183  
 184          w.clearTimeout(io._timeout[id]);
 185          delete io._timeout[id];
 186      },
 187  
 188     /**
 189      * Bound to the iframe's Load event and processes
 190      * the response data.
 191      * @method _uploadComplete
 192      * @private
 193      * @static
 194      * @param {Object} o The transaction object
 195      * @param {Object} c Configuration object for the transaction.
 196      */
 197      _uploadComplete: function(o, c) {
 198          var io = this,
 199              d = Y.one('#io_iframe' + o.id).get('contentWindow.document'),
 200              b = d.one('body'),
 201              p;
 202  
 203          if (c.timeout) {
 204              io._clearUploadTimeout(o.id);
 205          }
 206  
 207          try {
 208              if (b) {
 209                  // When a response Content-Type of "text/plain" is used, Firefox and Safari
 210                  // will wrap the response string with <pre></pre>.
 211                  p = b.one('pre:first-child');
 212                  o.c.responseText = p ? p.get('text') : b.get('text');
 213                  Y.log('The responseText value for transaction ' + o.id + ' is: ' + o.c.responseText + '.', 'info', 'io');
 214              }
 215              else {
 216                  o.c.responseXML = d._node;
 217                  Y.log('The response for transaction ' + o.id + ' is an XML document.', 'info', 'io');
 218              }
 219          }
 220          catch (e) {
 221              o.e = "upload failure";
 222          }
 223  
 224          io.complete(o, c);
 225          io.end(o, c);
 226          // The transaction is complete, so call _dFrame to remove
 227          // the event listener bound to the iframe transport, and then
 228          // destroy the iframe.
 229          w.setTimeout( function() { _dFrame(o.id); }, 0);
 230      },
 231  
 232     /**
 233      * Uploads HTML form data, inclusive of files/attachments,
 234      * using the iframe created in _create to facilitate the transaction.
 235      * @method _upload
 236      * @private
 237      * @static
 238      * @param {Object} o The transaction object
 239      * @param {Object} uri Qualified path to transaction resource.
 240      * @param {Object} c Configuration object for the transaction.
 241      */
 242      _upload: function(o, uri, c) {
 243          var io = this,
 244              f = (typeof c.form.id === 'string') ? d.getElementById(c.form.id) : c.form.id,
 245              fields;
 246  
 247          // Initialize the HTML form properties in case they are
 248          // not defined in the HTML form.
 249          io._setAttrs(f, o.id, uri);
 250          if (c.data) {
 251              fields = io._addData(f, c.data);
 252          }
 253  
 254          // Start polling if a callback is present and the timeout
 255          // property has been defined.
 256          if (c.timeout) {
 257              io._startUploadTimeout(o, c);
 258              Y.log('Transaction timeout started for transaction ' + o.id + '.', 'info', 'io');
 259          }
 260  
 261          // Start file upload.
 262          f.submit();
 263          io.start(o, c);
 264          if (c.data) {
 265              io._removeData(f, fields);
 266          }
 267  
 268          return {
 269              id: o.id,
 270              abort: function() {
 271                  o.status = 0;
 272                  o.statusText = 'abort';
 273                  if (Y.one('#io_iframe' + o.id)) {
 274                      _dFrame(o.id);
 275                      io.complete(o, c);
 276                      io.end(o, c);
 277                      Y.log('Transaction ' + o.id + ' aborted.', 'info', 'io');
 278                  }
 279                  else {
 280                      Y.log('Attempted to abort transaction ' + o.id + ' but transaction has completed.', 'warn', 'io');
 281                      return false;
 282                  }
 283              },
 284              isInProgress: function() {
 285                  return Y.one('#io_iframe' + o.id) ? true : false;
 286              },
 287              io: io
 288          };
 289      },
 290  
 291      upload: function(o, uri, c) {
 292          _cFrame(o, c, this);
 293          return this._upload(o, uri, c);
 294      },
 295  
 296      end: function(transaction, config) {
 297          var form, io;
 298  
 299          if (config) {
 300              form = config.form;
 301  
 302              if (form && form.upload) {
 303                  io = this;
 304  
 305                  // Restore HTML form attributes to their original values.
 306                  form = (typeof form.id === 'string') ? d.getElementById(form.id) : form.id;
 307  
 308                  // Check whether the form still exists before resetting it.
 309                  if (form) {
 310                      io._resetAttrs(form, this._originalFormAttrs);
 311                  }
 312              }
 313          }
 314  
 315          return _end.call(this, transaction, config);
 316      }
 317  }, true);
 318  
 319  
 320  }, '3.17.2', {"requires": ["io-base", "node-base"]});