Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

io-upload-iframe-debug.js 8.9KB

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