24d1b2fbc92b69d36be9e21f57a46191745ef7c6.svn-base 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. /*
  2. * jQuery File Upload AngularJS Plugin 2.2.0
  3. * https://github.com/blueimp/jQuery-File-Upload
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * http://www.opensource.org/licenses/MIT
  10. */
  11. /* jshint nomen:false */
  12. /* global define, angular */
  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. 'angular',
  20. './jquery.fileupload-image',
  21. './jquery.fileupload-audio',
  22. './jquery.fileupload-video',
  23. './jquery.fileupload-validate'
  24. ], factory);
  25. } else {
  26. factory();
  27. }
  28. }(function () {
  29. 'use strict';
  30. angular.module('blueimp.fileupload', [])
  31. // The fileUpload service provides configuration options
  32. // for the fileUpload directive and default handlers for
  33. // File Upload events:
  34. .provider('fileUpload', function () {
  35. var scopeEvalAsync = function (expression) {
  36. var scope = angular.element(this)
  37. .fileupload('option', 'scope');
  38. // Schedule a new $digest cycle if not already inside of one
  39. // and evaluate the given expression:
  40. scope.$evalAsync(expression);
  41. },
  42. addFileMethods = function (scope, data) {
  43. var files = data.files,
  44. file = files[0];
  45. angular.forEach(files, function (file, index) {
  46. file._index = index;
  47. file.$state = function () {
  48. return data.state();
  49. };
  50. file.$processing = function () {
  51. return data.processing();
  52. };
  53. file.$progress = function () {
  54. return data.progress();
  55. };
  56. file.$response = function () {
  57. return data.response();
  58. };
  59. });
  60. file.$submit = function () {
  61. if (!file.error) {
  62. return data.submit();
  63. }
  64. };
  65. file.$cancel = function () {
  66. return data.abort();
  67. };
  68. },
  69. $config;
  70. $config = this.defaults = {
  71. handleResponse: function (e, data) {
  72. var files = data.result && data.result.files;
  73. if (files) {
  74. data.scope.replace(data.files, files);
  75. } else if (data.errorThrown ||
  76. data.textStatus === 'error') {
  77. data.files[0].error = data.errorThrown ||
  78. data.textStatus;
  79. }
  80. },
  81. add: function (e, data) {
  82. if (e.isDefaultPrevented()) {
  83. return false;
  84. }
  85. var scope = data.scope,
  86. filesCopy = [];
  87. angular.forEach(data.files, function (file) {
  88. filesCopy.push(file);
  89. });
  90. scope.$apply(function () {
  91. addFileMethods(scope, data);
  92. var method = scope.option('prependFiles') ?
  93. 'unshift' : 'push';
  94. Array.prototype[method].apply(scope.queue, data.files);
  95. });
  96. data.process(function () {
  97. return scope.process(data);
  98. }).always(function () {
  99. scope.$apply(function () {
  100. addFileMethods(scope, data);
  101. scope.replace(filesCopy, data.files);
  102. });
  103. }).then(function () {
  104. if ((scope.option('autoUpload') ||
  105. data.autoUpload) &&
  106. data.autoUpload !== false) {
  107. data.submit();
  108. }
  109. });
  110. },
  111. progress: function (e, data) {
  112. if (e.isDefaultPrevented()) {
  113. return false;
  114. }
  115. data.scope.$apply();
  116. },
  117. done: function (e, data) {
  118. if (e.isDefaultPrevented()) {
  119. return false;
  120. }
  121. var that = this;
  122. data.scope.$apply(function () {
  123. data.handleResponse.call(that, e, data);
  124. });
  125. },
  126. fail: function (e, data) {
  127. if (e.isDefaultPrevented()) {
  128. return false;
  129. }
  130. var that = this,
  131. scope = data.scope;
  132. if (data.errorThrown === 'abort') {
  133. scope.clear(data.files);
  134. return;
  135. }
  136. scope.$apply(function () {
  137. data.handleResponse.call(that, e, data);
  138. });
  139. },
  140. stop: scopeEvalAsync,
  141. processstart: scopeEvalAsync,
  142. processstop: scopeEvalAsync,
  143. getNumberOfFiles: function () {
  144. var scope = this.scope;
  145. return scope.queue.length - scope.processing();
  146. },
  147. dataType: 'json',
  148. autoUpload: false
  149. };
  150. this.$get = [
  151. function () {
  152. return {
  153. defaults: $config
  154. };
  155. }
  156. ];
  157. })
  158. // Format byte numbers to readable presentations:
  159. .provider('formatFileSizeFilter', function () {
  160. var $config = {
  161. // Byte units following the IEC format
  162. // http://en.wikipedia.org/wiki/Kilobyte
  163. units: [
  164. {size: 1000000000, suffix: ' GB'},
  165. {size: 1000000, suffix: ' MB'},
  166. {size: 1000, suffix: ' KB'}
  167. ]
  168. };
  169. this.defaults = $config;
  170. this.$get = function () {
  171. return function (bytes) {
  172. if (!angular.isNumber(bytes)) {
  173. return '';
  174. }
  175. var unit = true,
  176. i = 0,
  177. prefix,
  178. suffix;
  179. while (unit) {
  180. unit = $config.units[i];
  181. prefix = unit.prefix || '';
  182. suffix = unit.suffix || '';
  183. if (i === $config.units.length - 1 || bytes >= unit.size) {
  184. return prefix + (bytes / unit.size).toFixed(2) + suffix;
  185. }
  186. i += 1;
  187. }
  188. };
  189. };
  190. })
  191. // The FileUploadController initializes the fileupload widget and
  192. // provides scope methods to control the File Upload functionality:
  193. .controller('FileUploadController', [
  194. '$scope', '$element', '$attrs', '$window', 'fileUpload',
  195. function ($scope, $element, $attrs, $window, fileUpload) {
  196. var uploadMethods = {
  197. progress: function () {
  198. return $element.fileupload('progress');
  199. },
  200. active: function () {
  201. return $element.fileupload('active');
  202. },
  203. option: function (option, data) {
  204. if (arguments.length === 1) {
  205. return $element.fileupload('option', option);
  206. }
  207. $element.fileupload('option', option, data);
  208. },
  209. add: function (data) {
  210. return $element.fileupload('add', data);
  211. },
  212. send: function (data) {
  213. return $element.fileupload('send', data);
  214. },
  215. process: function (data) {
  216. return $element.fileupload('process', data);
  217. },
  218. processing: function (data) {
  219. return $element.fileupload('processing', data);
  220. }
  221. };
  222. $scope.disabled = !$window.jQuery.support.fileInput;
  223. $scope.queue = $scope.queue || [];
  224. $scope.clear = function (files) {
  225. var queue = this.queue,
  226. i = queue.length,
  227. file = files,
  228. length = 1;
  229. if (angular.isArray(files)) {
  230. file = files[0];
  231. length = files.length;
  232. }
  233. while (i) {
  234. i -= 1;
  235. if (queue[i] === file) {
  236. return queue.splice(i, length);
  237. }
  238. }
  239. };
  240. $scope.replace = function (oldFiles, newFiles) {
  241. var queue = this.queue,
  242. file = oldFiles[0],
  243. i,
  244. j;
  245. for (i = 0; i < queue.length; i += 1) {
  246. if (queue[i] === file) {
  247. for (j = 0; j < newFiles.length; j += 1) {
  248. queue[i + j] = newFiles[j];
  249. }
  250. return;
  251. }
  252. }
  253. };
  254. $scope.applyOnQueue = function (method) {
  255. var list = this.queue.slice(0),
  256. i,
  257. file;
  258. for (i = 0; i < list.length; i += 1) {
  259. file = list[i];
  260. if (file[method]) {
  261. file[method]();
  262. }
  263. }
  264. };
  265. $scope.submit = function () {
  266. this.applyOnQueue('$submit');
  267. };
  268. $scope.cancel = function () {
  269. this.applyOnQueue('$cancel');
  270. };
  271. // Add upload methods to the scope:
  272. angular.extend($scope, uploadMethods);
  273. // The fileupload widget will initialize with
  274. // the options provided via "data-"-parameters,
  275. // as well as those given via options object:
  276. $element.fileupload(angular.extend(
  277. {scope: $scope},
  278. fileUpload.defaults
  279. )).on('fileuploadadd', function (e, data) {
  280. data.scope = $scope;
  281. }).on('fileuploadfail', function (e, data) {
  282. if (data.errorThrown === 'abort') {
  283. return;
  284. }
  285. if (data.dataType &&
  286. data.dataType.indexOf('json') === data.dataType.length - 4) {
  287. try {
  288. data.result = angular.fromJson(data.jqXHR.responseText);
  289. } catch (ignore) {}
  290. }
  291. }).on([
  292. 'fileuploadadd',
  293. 'fileuploadsubmit',
  294. 'fileuploadsend',
  295. 'fileuploaddone',
  296. 'fileuploadfail',
  297. 'fileuploadalways',
  298. 'fileuploadprogress',
  299. 'fileuploadprogressall',
  300. 'fileuploadstart',
  301. 'fileuploadstop',
  302. 'fileuploadchange',
  303. 'fileuploadpaste',
  304. 'fileuploaddrop',
  305. 'fileuploaddragover',
  306. 'fileuploadchunksend',
  307. 'fileuploadchunkdone',
  308. 'fileuploadchunkfail',
  309. 'fileuploadchunkalways',
  310. 'fileuploadprocessstart',
  311. 'fileuploadprocess',
  312. 'fileuploadprocessdone',
  313. 'fileuploadprocessfail',
  314. 'fileuploadprocessalways',
  315. 'fileuploadprocessstop'
  316. ].join(' '), function (e, data) {
  317. if ($scope.$emit(e.type, data).defaultPrevented) {
  318. e.preventDefault();
  319. }
  320. }).on('remove', function () {
  321. // Remove upload methods from the scope,
  322. // when the widget is removed:
  323. var method;
  324. for (method in uploadMethods) {
  325. if (uploadMethods.hasOwnProperty(method)) {
  326. delete $scope[method];
  327. }
  328. }
  329. });
  330. // Observe option changes:
  331. $scope.$watch(
  332. $attrs.fileUpload,
  333. function (newOptions) {
  334. if (newOptions) {
  335. $element.fileupload('option', newOptions);
  336. }
  337. }
  338. );
  339. }
  340. ])
  341. // Provide File Upload progress feedback:
  342. .controller('FileUploadProgressController', [
  343. '$scope', '$attrs', '$parse',
  344. function ($scope, $attrs, $parse) {
  345. var fn = $parse($attrs.fileUploadProgress),
  346. update = function () {
  347. var progress = fn($scope);
  348. if (!progress || !progress.total) {
  349. return;
  350. }
  351. $scope.num = Math.floor(
  352. progress.loaded / progress.total * 100
  353. );
  354. };
  355. update();
  356. $scope.$watch(
  357. $attrs.fileUploadProgress + '.loaded',
  358. function (newValue, oldValue) {
  359. if (newValue !== oldValue) {
  360. update();
  361. }
  362. }
  363. );
  364. }
  365. ])
  366. // Display File Upload previews:
  367. .controller('FileUploadPreviewController', [
  368. '$scope', '$element', '$attrs',
  369. function ($scope, $element, $attrs) {
  370. $scope.$watch(
  371. $attrs.fileUploadPreview + '.preview',
  372. function (preview) {
  373. $element.empty();
  374. if (preview) {
  375. $element.append(preview);
  376. }
  377. }
  378. );
  379. }
  380. ])
  381. .directive('fileUpload', function () {
  382. return {
  383. controller: 'FileUploadController',
  384. scope: true
  385. };
  386. })
  387. .directive('fileUploadProgress', function () {
  388. return {
  389. controller: 'FileUploadProgressController',
  390. scope: true
  391. };
  392. })
  393. .directive('fileUploadPreview', function () {
  394. return {
  395. controller: 'FileUploadPreviewController'
  396. };
  397. })
  398. // Enhance the HTML5 download attribute to
  399. // allow drag&drop of files to the desktop:
  400. .directive('download', function () {
  401. return function (scope, elm) {
  402. elm.on('dragstart', function (e) {
  403. try {
  404. e.originalEvent.dataTransfer.setData(
  405. 'DownloadURL',
  406. [
  407. 'application/octet-stream',
  408. elm.prop('download'),
  409. elm.prop('href')
  410. ].join(':')
  411. );
  412. } catch (ignore) {}
  413. });
  414. };
  415. });
  416. }));