FancyUpload2.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. /**
  2. * FancyUpload - Flash meets Ajax for powerful and elegant uploads.
  3. *
  4. * Updated to latest 3.0 API. Hopefully 100% compat!
  5. *
  6. * @version 3.0
  7. *
  8. * @license MIT License
  9. *
  10. * @author Harald Kirschner <http://digitarald.de>
  11. * @copyright Authors
  12. */
  13. var FancyUpload2 = new Class({
  14. Extends: Swiff.Uploader,
  15. options: {
  16. queued: 1,
  17. // compat
  18. limitSize: 0,
  19. limitFiles: 0,
  20. validateFile: $lambda(true)
  21. },
  22. initialize: function(status, list, options) {
  23. this.status = $(status);
  24. this.list = $(list);
  25. // compat
  26. options.fileClass = options.fileClass || FancyUpload2.File;
  27. options.fileSizeMax = options.limitSize || options.fileSizeMax;
  28. options.fileListMax = options.limitFiles || options.fileListMax;
  29. this.parent(options);
  30. this.addEvents({
  31. 'load': this.render,
  32. 'select': this.onSelect,
  33. 'cancel': this.onCancel,
  34. 'start': this.onStart,
  35. 'queue': this.onQueue,
  36. 'complete': this.onComplete
  37. });
  38. },
  39. render: function() {
  40. this.overallTitle = this.status.getElement('.overall-title');
  41. this.currentTitle = this.status.getElement('.current-title');
  42. this.currentText = this.status.getElement('.current-text');
  43. var progress = this.status.getElement('.overall-progress');
  44. this.overallProgress = new Fx.ProgressBar(progress, {
  45. text: new Element('span', {'class': 'progress-text'}).inject(progress, 'after')
  46. });
  47. progress = this.status.getElement('.current-progress')
  48. this.currentProgress = new Fx.ProgressBar(progress, {
  49. text: new Element('span', {'class': 'progress-text'}).inject(progress, 'after')
  50. });
  51. this.updateOverall();
  52. },
  53. onSelect: function() {
  54. this.status.removeClass('status-browsing');
  55. },
  56. onCancel: function() {
  57. this.status.removeClass('file-browsing');
  58. },
  59. onStart: function() {
  60. this.status.addClass('file-uploading');
  61. this.overallProgress.set(0);
  62. },
  63. onQueue: function() {
  64. this.updateOverall();
  65. },
  66. onComplete: function() {
  67. this.status.removeClass('file-uploading');
  68. if (this.size) {
  69. this.overallProgress.start(100);
  70. } else {
  71. this.overallProgress.set(0);
  72. this.currentProgress.set(0);
  73. }
  74. },
  75. updateOverall: function() {
  76. this.overallTitle.set('html', MooTools.lang.get('FancyUpload', 'progressOverall').substitute({
  77. total: Swiff.Uploader.formatUnit(this.size, 'b')
  78. }));
  79. if (!this.size) {
  80. this.currentTitle.set('html', MooTools.lang.get('FancyUpload', 'currentTitle'));
  81. this.currentText.set('html', '');
  82. }
  83. },
  84. /**
  85. * compat
  86. */
  87. upload: function() {
  88. this.start();
  89. },
  90. removeFile: function() {
  91. return this.remove();
  92. }
  93. });
  94. FancyUpload2.File = new Class({
  95. Extends: Swiff.Uploader.File,
  96. render: function() {
  97. if (this.invalid) {
  98. if (this.validationError) {
  99. var msg = MooTools.lang.get('FancyUpload', 'validationErrors')[this.validationError] || this.validationError;
  100. this.validationErrorMessage = msg.substitute({
  101. name: this.name,
  102. size: Swiff.Uploader.formatUnit(this.size, 'b'),
  103. fileSizeMin: Swiff.Uploader.formatUnit(this.base.options.fileSizeMin || 0, 'b'),
  104. fileSizeMax: Swiff.Uploader.formatUnit(this.base.options.fileSizeMax || 0, 'b'),
  105. fileListMax: this.base.options.fileListMax || 0,
  106. fileListSizeMax: Swiff.Uploader.formatUnit(this.base.options.fileListSizeMax || 0, 'b')
  107. });
  108. }
  109. this.remove();
  110. return;
  111. }
  112. this.addEvents({
  113. 'start': this.onStart,
  114. 'progress': this.onProgress,
  115. 'complete': this.onComplete,
  116. 'error': this.onError,
  117. 'remove': this.onRemove
  118. });
  119. this.info = new Element('span', {'class': 'file-info'});
  120. this.element = new Element('li', {'class': 'file'}).adopt(
  121. new Element('span', {'class': 'file-size', 'html': Swiff.Uploader.formatUnit(this.size, 'b')}),
  122. new Element('a', {
  123. 'class': 'file-remove',
  124. href: '#',
  125. html: MooTools.lang.get('FancyUpload', 'remove'),
  126. title: MooTools.lang.get('FancyUpload', 'removeTitle'),
  127. events: {
  128. click: function() {
  129. this.remove();
  130. return false;
  131. }.bind(this)
  132. }
  133. }),
  134. new Element('span', {'class': 'file-name', 'html': MooTools.lang.get('FancyUpload', 'fileName').substitute(this)}),
  135. this.info
  136. ).inject(this.base.list);
  137. },
  138. validate: function() {
  139. return (this.parent() && this.base.options.validateFile(this));
  140. },
  141. onStart: function() {
  142. this.element.addClass('file-uploading');
  143. this.base.currentProgress.cancel().set(0);
  144. this.base.currentTitle.set('html', MooTools.lang.get('FancyUpload', 'currentFile').substitute(this));
  145. },
  146. onProgress: function() {
  147. this.base.overallProgress.start(this.base.percentLoaded);
  148. this.base.currentText.set('html', MooTools.lang.get('FancyUpload', 'currentProgress').substitute({
  149. rate: (this.progress.rate) ? Swiff.Uploader.formatUnit(this.progress.rate, 'bps') : '- B',
  150. bytesLoaded: Swiff.Uploader.formatUnit(this.progress.bytesLoaded, 'b'),
  151. timeRemaining: (this.progress.timeRemaining) ? Swiff.Uploader.formatUnit(this.progress.timeRemaining, 's') : '-'
  152. }));
  153. this.base.currentProgress.start(this.progress.percentLoaded);
  154. },
  155. onComplete: function() {
  156. this.element.removeClass('file-uploading');
  157. this.base.currentText.set('html', 'Upload completed');
  158. this.base.currentProgress.start(100);
  159. if (this.response.error) {
  160. var msg = MooTools.lang.get('FancyUpload', 'errors')[this.response.error] || '{error} #{code}';
  161. this.errorMessage = msg.substitute($extend({
  162. name: this.name,
  163. size: Swiff.Uploader.formatUnit(this.size, 'b')
  164. }, this.response));
  165. var args = [this, this.errorMessage, this.response];
  166. this.fireEvent('error', args).base.fireEvent('fileError', args);
  167. } else {
  168. this.base.fireEvent('fileSuccess', [this, this.response.text || '']);
  169. }
  170. },
  171. onError: function() {
  172. this.element.addClass('file-failed');
  173. var error = MooTools.lang.get('FancyUpload', 'fileError').substitute(this);
  174. this.info.set('html', '<strong>' + error + ':</strong> ' + this.errorMessage);
  175. },
  176. onRemove: function() {
  177. this.element.getElements('a').setStyle('visibility', 'hidden');
  178. this.element.fade('out').retrieve('tween').chain(Element.destroy.bind(Element, this.element));
  179. }
  180. });
  181. // Avoiding MooTools.lang dependency
  182. (function() {
  183. var phrases = {
  184. 'progressOverall': 'Overall Progress ({total})',
  185. 'currentTitle': 'File Progress',
  186. 'currentFile': 'Uploading "{name}"',
  187. 'currentProgress': 'Upload: {bytesLoaded} with {rate}, {timeRemaining} remaining.',
  188. 'fileName': '{name}',
  189. 'remove': 'Remove',
  190. 'removeTitle': 'Click to remove this entry.',
  191. 'fileError': 'Upload failed',
  192. 'validationErrors': {
  193. 'duplicate': 'File <em>{name}</em> is already added, duplicates are not allowed.',
  194. 'sizeLimitMin': 'File <em>{name}</em> (<em>{size}</em>) is too small, the minimal file size is {fileSizeMin}.',
  195. 'sizeLimitMax': 'File <em>{name}</em> (<em>{size}</em>) is too big, the maximal file size is <em>{fileSizeMax}</em>.',
  196. 'fileListMax': 'File <em>{name}</em> could not be added, amount of <em>{fileListMax} files</em> exceeded.',
  197. 'fileListSizeMax': 'File <em>{name}</em> (<em>{size}</em>) is too big, overall filesize of <em>{fileListSizeMax}</em> exceeded.'
  198. },
  199. 'errors': {
  200. 'httpStatus': 'Server returned HTTP-Status <code>#{code}</code>',
  201. 'securityError': 'Security error occured ({text})',
  202. 'ioError': 'Error caused a send or load operation to fail ({text})'
  203. }
  204. };
  205. if (MooTools.lang) {
  206. MooTools.lang.set('en-US', 'FancyUpload', phrases);
  207. } else {
  208. MooTools.lang = {
  209. get: function(from, key) {
  210. return phrases[key];
  211. }
  212. };
  213. }
  214. })();