/admin/assets/js/jquery/jquery.fileupload-fp.js

https://github.com/JetRed/MuraCMS · JavaScript · 219 lines · 151 code · 11 blank · 57 comment · 21 complexity · ebd0cfcbbb8e8ececa8f05617a98b324 MD5 · raw file

  1. /*
  2. * jQuery File Upload File Processing Plugin 1.0
  3. * https://github.com/blueimp/jQuery-File-Upload
  4. *
  5. * Copyright 2012, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * http://www.opensource.org/licenses/MIT
  10. */
  11. /*jslint nomen: true, unparam: true, regexp: true */
  12. /*global define, window, document */
  13. (function (factory) {
  14. 'use strict';
  15. if (typeof define === 'function' && define.amd) {
  16. // Register as an anonymous AMD module:
  17. define([
  18. 'jquery',
  19. 'load-image',
  20. 'canvas-to-blob',
  21. './jquery.fileupload'
  22. ], factory);
  23. } else {
  24. // Browser globals:
  25. factory(
  26. window.jQuery,
  27. window.loadImage
  28. );
  29. }
  30. }(function ($, loadImage) {
  31. 'use strict';
  32. // The File Upload IP version extends the basic fileupload widget
  33. // with file processing functionality:
  34. $.widget('blueimpFP.fileupload', $.blueimp.fileupload, {
  35. options: {
  36. // The list of file processing actions:
  37. process: [
  38. /*
  39. {
  40. action: 'load',
  41. fileTypes: /^image\/(gif|jpeg|png)$/,
  42. maxFileSize: 20000000 // 20MB
  43. },
  44. {
  45. action: 'resize',
  46. maxWidth: 1920,
  47. maxHeight: 1200,
  48. minWidth: 800,
  49. minHeight: 600
  50. },
  51. {
  52. action: 'save'
  53. }
  54. */
  55. ],
  56. // The add callback is invoked as soon as files are added to the
  57. // fileupload widget (via file input selection, drag & drop or add
  58. // API call). See the basic file upload widget for more information:
  59. add: function (e, data) {
  60. $(this).fileupload('process', data).done(function () {
  61. data.submit();
  62. });
  63. }
  64. },
  65. processActions: {
  66. // Loads the image given via data.files and data.index
  67. // as canvas element.
  68. // Accepts the options fileTypes (regular expression)
  69. // and maxFileSize (integer) to limit the files to load:
  70. load: function (data, options) {
  71. var that = this,
  72. file = data.files[data.index],
  73. dfd = $.Deferred();
  74. if (window.HTMLCanvasElement &&
  75. window.HTMLCanvasElement.prototype.toBlob &&
  76. ($.type(options.maxFileSize) !== 'number' ||
  77. file.size < options.maxFileSize) &&
  78. (!options.fileTypes ||
  79. options.fileTypes.test(file.type))) {
  80. loadImage(
  81. file,
  82. function (canvas) {
  83. data.canvas = canvas;
  84. dfd.resolveWith(that, [data]);
  85. },
  86. {canvas: true}
  87. );
  88. } else {
  89. dfd.rejectWith(that, [data]);
  90. }
  91. return dfd.promise();
  92. },
  93. // Resizes the image given as data.canvas and updates
  94. // data.canvas with the resized image.
  95. // Accepts the options maxWidth, maxHeight, minWidth and
  96. // minHeight to scale the given image:
  97. resize: function (data, options) {
  98. if (data.canvas) {
  99. var canvas = loadImage.scale(data.canvas, options);
  100. if (canvas.width !== data.canvas.width ||
  101. canvas.height !== data.canvas.height) {
  102. data.canvas = canvas;
  103. data.processed = true;
  104. }
  105. }
  106. return data;
  107. },
  108. // Saves the processed image given as data.canvas
  109. // inplace at data.index of data.files:
  110. save: function (data, options) {
  111. // Do nothing if no processing has happened:
  112. if (!data.canvas || !data.processed) {
  113. return data;
  114. }
  115. var that = this,
  116. file = data.files[data.index],
  117. name = file.name,
  118. dfd = $.Deferred(),
  119. callback = function (blob) {
  120. if (!blob.name) {
  121. if (file.type === blob.type) {
  122. blob.name = file.name;
  123. } else if (file.name) {
  124. blob.name = file.name.replace(
  125. /\..+$/,
  126. '.' + blob.type.substr(6)
  127. );
  128. }
  129. }
  130. // Store the created blob at the position
  131. // of the original file in the files list:
  132. data.files[data.index] = blob;
  133. dfd.resolveWith(that, [data]);
  134. };
  135. // Use canvas.mozGetAsFile directly, to retain the filename, as
  136. // Gecko doesn't support the filename option for FormData.append:
  137. if (data.canvas.mozGetAsFile) {
  138. callback(data.canvas.mozGetAsFile(
  139. (/^image\/(jpeg|png)$/.test(file.type) && name) ||
  140. ((name && name.replace(/\..+$/, '')) ||
  141. 'blob') + '.png',
  142. file.type
  143. ));
  144. } else {
  145. data.canvas.toBlob(callback, file.type);
  146. }
  147. return dfd.promise();
  148. }
  149. },
  150. // Resizes the file at the given index and stores the created blob at
  151. // the original position of the files list, returns a Promise object:
  152. _processFile: function (files, index, options) {
  153. var that = this,
  154. dfd = $.Deferred().resolveWith(that, [{
  155. files: files,
  156. index: index
  157. }]),
  158. chain = dfd.promise();
  159. that._processing += 1;
  160. $.each(options.process, function (i, settings) {
  161. chain = chain.pipe(function (data) {
  162. return that.processActions[settings.action]
  163. .call(this, data, settings);
  164. });
  165. });
  166. chain.always(function () {
  167. that._processing -= 1;
  168. if (that._processing === 0) {
  169. that.element
  170. .removeClass('fileupload-processing');
  171. }
  172. });
  173. if (that._processing === 1) {
  174. that.element.addClass('fileupload-processing');
  175. }
  176. return chain;
  177. },
  178. // Processes the files given as files property of the data parameter,
  179. // returns a Promise object that allows to bind a done handler, which
  180. // will be invoked after processing all files (inplace) is done:
  181. process: function (data) {
  182. var that = this,
  183. options = $.extend({}, this.options, data);
  184. if (options.process && options.process.length &&
  185. this._isXHRUpload(options)) {
  186. $.each(data.files, function (index, file) {
  187. that._processingQueue = that._processingQueue.pipe(
  188. function () {
  189. var dfd = $.Deferred();
  190. that._processFile(data.files, index, options)
  191. .always(function () {
  192. dfd.resolveWith(that);
  193. });
  194. return dfd.promise();
  195. }
  196. );
  197. });
  198. }
  199. return this._processingQueue;
  200. },
  201. _create: function () {
  202. $.blueimp.fileupload.prototype._create.call(this);
  203. this._processing = 0;
  204. this._processingQueue = $.Deferred().resolveWith(this)
  205. .promise();
  206. }
  207. });
  208. }));