jquery.fileupload-angular.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. /*
  2. * jQuery File Upload AngularJS Plugin 2.1.2
  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. return $element.fileupload('option', option, data);
  205. },
  206. add: function (data) {
  207. return $element.fileupload('add', data);
  208. },
  209. send: function (data) {
  210. return $element.fileupload('send', data);
  211. },
  212. process: function (data) {
  213. return $element.fileupload('process', data);
  214. },
  215. processing: function (data) {
  216. return $element.fileupload('processing', data);
  217. }
  218. };
  219. $scope.disabled = !$window.jQuery.support.fileInput;
  220. $scope.queue = $scope.queue || [];
  221. $scope.clear = function (files) {
  222. var queue = this.queue,
  223. i = queue.length,
  224. file = files,
  225. length = 1;
  226. if (angular.isArray(files)) {
  227. file = files[0];
  228. length = files.length;
  229. }
  230. while (i) {
  231. i -= 1;
  232. if (queue[i] === file) {
  233. return queue.splice(i, length);
  234. }
  235. }
  236. };
  237. $scope.replace = function (oldFiles, newFiles) {
  238. var queue = this.queue,
  239. file = oldFiles[0],
  240. i,
  241. j;
  242. for (i = 0; i < queue.length; i += 1) {
  243. if (queue[i] === file) {
  244. for (j = 0; j < newFiles.length; j += 1) {
  245. queue[i + j] = newFiles[j];
  246. }
  247. return;
  248. }
  249. }
  250. };
  251. $scope.applyOnQueue = function (method) {
  252. var list = this.queue.slice(0),
  253. i,
  254. file;
  255. for (i = 0; i < list.length; i += 1) {
  256. file = list[i];
  257. if (file[method]) {
  258. file[method]();
  259. }
  260. }
  261. };
  262. $scope.submit = function () {
  263. this.applyOnQueue('$submit');
  264. };
  265. $scope.cancel = function () {
  266. this.applyOnQueue('$cancel');
  267. };
  268. // Add upload methods to the scope:
  269. angular.extend($scope, uploadMethods);
  270. // The fileupload widget will initialize with
  271. // the options provided via "data-"-parameters,
  272. // as well as those given via options object:
  273. $element.fileupload(angular.extend(
  274. {scope: function () {
  275. return $scope;
  276. }},
  277. fileUpload.defaults
  278. )).on('fileuploadadd', function (e, data) {
  279. data.scope = $scope.option('scope');
  280. }).on('fileuploadfail', function (e, data) {
  281. if (data.errorThrown === 'abort') {
  282. return;
  283. }
  284. if (data.dataType &&
  285. data.dataType.indexOf('json') === data.dataType.length - 4) {
  286. try {
  287. data.result = angular.fromJson(data.jqXHR.responseText);
  288. } catch (ignore) {}
  289. }
  290. }).on([
  291. 'fileuploadadd',
  292. 'fileuploadsubmit',
  293. 'fileuploadsend',
  294. 'fileuploaddone',
  295. 'fileuploadfail',
  296. 'fileuploadalways',
  297. 'fileuploadprogress',
  298. 'fileuploadprogressall',
  299. 'fileuploadstart',
  300. 'fileuploadstop',
  301. 'fileuploadchange',
  302. 'fileuploadpaste',
  303. 'fileuploaddrop',
  304. 'fileuploaddragover',
  305. 'fileuploadchunksend',
  306. 'fileuploadchunkdone',
  307. 'fileuploadchunkfail',
  308. 'fileuploadchunkalways',
  309. 'fileuploadprocessstart',
  310. 'fileuploadprocess',
  311. 'fileuploadprocessdone',
  312. 'fileuploadprocessfail',
  313. 'fileuploadprocessalways',
  314. 'fileuploadprocessstop'
  315. ].join(' '), function (e, data) {
  316. if ($scope.$emit(e.type, data).defaultPrevented) {
  317. e.preventDefault();
  318. }
  319. }).on('remove', function () {
  320. // Remove upload methods from the scope,
  321. // when the widget is removed:
  322. var method;
  323. for (method in uploadMethods) {
  324. if (uploadMethods.hasOwnProperty(method)) {
  325. delete $scope[method];
  326. }
  327. }
  328. });
  329. // Observe option changes:
  330. $scope.$watch(
  331. $attrs.fileUpload,
  332. function (newOptions) {
  333. if (newOptions) {
  334. $element.fileupload('option', newOptions);
  335. }
  336. }
  337. );
  338. }
  339. ])
  340. // Provide File Upload progress feedback:
  341. .controller('FileUploadProgressController', [
  342. '$scope', '$attrs', '$parse',
  343. function ($scope, $attrs, $parse) {
  344. var fn = $parse($attrs.fileUploadProgress),
  345. update = function () {
  346. var progress = fn($scope);
  347. if (!progress || !progress.total) {
  348. return;
  349. }
  350. $scope.num = Math.floor(
  351. progress.loaded / progress.total * 100
  352. );
  353. };
  354. update();
  355. $scope.$watch(
  356. $attrs.fileUploadProgress + '.loaded',
  357. function (newValue, oldValue) {
  358. if (newValue !== oldValue) {
  359. update();
  360. }
  361. }
  362. );
  363. }
  364. ])
  365. // Display File Upload previews:
  366. .controller('FileUploadPreviewController', [
  367. '$scope', '$element', '$attrs',
  368. function ($scope, $element, $attrs) {
  369. $scope.$watch(
  370. $attrs.fileUploadPreview + '.preview',
  371. function (preview) {
  372. if (preview) {
  373. $element.empty().append(preview);
  374. }
  375. }
  376. );
  377. }
  378. ])
  379. .directive('fileUpload', function () {
  380. return {
  381. controller: 'FileUploadController',
  382. scope: true
  383. };
  384. })
  385. .directive('fileUploadProgress', function () {
  386. return {
  387. controller: 'FileUploadProgressController',
  388. scope: true
  389. };
  390. })
  391. .directive('fileUploadPreview', function () {
  392. return {
  393. controller: 'FileUploadPreviewController'
  394. };
  395. })
  396. // Enhance the HTML5 download attribute to
  397. // allow drag&drop of files to the desktop:
  398. .directive('download', function () {
  399. return function (scope, elm) {
  400. elm.on('dragstart', function (e) {
  401. try {
  402. e.originalEvent.dataTransfer.setData(
  403. 'DownloadURL',
  404. [
  405. 'application/octet-stream',
  406. elm.prop('download'),
  407. elm.prop('href')
  408. ].join(':')
  409. );
  410. } catch (ignore) {}
  411. });
  412. };
  413. });
  414. }));