jquery.fileupload-ui.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714
  1. /*
  2. * jQuery File Upload User Interface Plugin
  3. * https://github.com/blueimp/jQuery-File-Upload
  4. *
  5. * Copyright 2010, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* jshint nomen:false */
  12. /* global define, require, window */
  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. 'blueimp-tmpl',
  20. './jquery.fileupload-image',
  21. './jquery.fileupload-audio',
  22. './jquery.fileupload-video',
  23. './jquery.fileupload-validate'
  24. ], factory);
  25. } else if (typeof exports === 'object') {
  26. // Node/CommonJS:
  27. factory(
  28. require('jquery'),
  29. require('blueimp-tmpl'),
  30. require('./jquery.fileupload-image'),
  31. require('./jquery.fileupload-audio'),
  32. require('./jquery.fileupload-video'),
  33. require('./jquery.fileupload-validate')
  34. );
  35. } else {
  36. // Browser globals:
  37. factory(
  38. window.jQuery,
  39. window.tmpl
  40. );
  41. }
  42. }(function ($, tmpl) {
  43. 'use strict';
  44. $.blueimp.fileupload.prototype._specialOptions.push(
  45. 'filesContainer',
  46. 'uploadTemplateId',
  47. 'downloadTemplateId'
  48. );
  49. // The UI version extends the file upload widget
  50. // and adds complete user interface interaction:
  51. $.widget('blueimp.fileupload', $.blueimp.fileupload, {
  52. options: {
  53. // By default, files added to the widget are uploaded as soon
  54. // as the user clicks on the start buttons. To enable automatic
  55. // uploads, set the following option to true:
  56. autoUpload: false,
  57. // The ID of the upload template:
  58. uploadTemplateId: 'template-upload',
  59. // The ID of the download template:
  60. downloadTemplateId: 'template-download',
  61. // The container for the list of files. If undefined, it is set to
  62. // an element with class "files" inside of the widget element:
  63. filesContainer: undefined,
  64. // By default, files are appended to the files container.
  65. // Set the following option to true, to prepend files instead:
  66. prependFiles: false,
  67. // The expected data type of the upload response, sets the dataType
  68. // option of the $.ajax upload requests:
  69. dataType: 'json',
  70. // Error and info messages:
  71. messages: {
  72. unknownError: 'Unknown error'
  73. },
  74. // Function returning the current number of files,
  75. // used by the maxNumberOfFiles validation:
  76. getNumberOfFiles: function () {
  77. return this.filesContainer.children()
  78. .not('.processing').length;
  79. },
  80. // Callback to retrieve the list of files from the server response:
  81. getFilesFromResponse: function (data) {
  82. if (data.result && $.isArray(data.result.files)) {
  83. return data.result.files;
  84. }
  85. return [];
  86. },
  87. // The add callback is invoked as soon as files are added to the fileupload
  88. // widget (via file input selection, drag & drop or add API call).
  89. // See the basic file upload widget for more information:
  90. add: function (e, data) {
  91. if (e.isDefaultPrevented()) {
  92. return false;
  93. }
  94. var $this = $(this),
  95. that = $this.data('blueimp-fileupload') ||
  96. $this.data('fileupload'),
  97. options = that.options;
  98. data.context = that._renderUpload(data.files)
  99. .data('data', data)
  100. .addClass('processing');
  101. options.filesContainer[
  102. options.prependFiles ? 'prepend' : 'append'
  103. ](data.context);
  104. that._forceReflow(data.context);
  105. that._transition(data.context);
  106. data.process(function () {
  107. return $this.fileupload('process', data);
  108. }).always(function () {
  109. data.context.each(function (index) {
  110. $(this).find('.size').text(
  111. that._formatFileSize(data.files[index].size)
  112. );
  113. }).removeClass('processing');
  114. that._renderPreviews(data);
  115. }).done(function () {
  116. data.context.find('.start').prop('disabled', false);
  117. if ((that._trigger('added', e, data) !== false) &&
  118. (options.autoUpload || data.autoUpload) &&
  119. data.autoUpload !== false) {
  120. data.submit();
  121. }
  122. }).fail(function () {
  123. if (data.files.error) {
  124. data.context.each(function (index) {
  125. var error = data.files[index].error;
  126. if (error) {
  127. $(this).find('.error').text(error);
  128. }
  129. });
  130. }
  131. });
  132. },
  133. // Callback for the start of each file upload request:
  134. send: function (e, data) {
  135. if (e.isDefaultPrevented()) {
  136. return false;
  137. }
  138. var that = $(this).data('blueimp-fileupload') ||
  139. $(this).data('fileupload');
  140. if (data.context && data.dataType &&
  141. data.dataType.substr(0, 6) === 'iframe') {
  142. // Iframe Transport does not support progress events.
  143. // In lack of an indeterminate progress bar, we set
  144. // the progress to 100%, showing the full animated bar:
  145. data.context
  146. .find('.progress').addClass(
  147. !$.support.transition && 'progress-animated'
  148. )
  149. .attr('aria-valuenow', 100)
  150. .children().first().css(
  151. 'width',
  152. '100%'
  153. );
  154. }
  155. return that._trigger('sent', e, data);
  156. },
  157. // Callback for successful uploads:
  158. done: function (e, data) {
  159. if (e.isDefaultPrevented()) {
  160. return false;
  161. }
  162. var that = $(this).data('blueimp-fileupload') ||
  163. $(this).data('fileupload'),
  164. getFilesFromResponse = data.getFilesFromResponse ||
  165. that.options.getFilesFromResponse,
  166. files = getFilesFromResponse(data),
  167. template,
  168. deferred;
  169. if (data.context) {
  170. data.context.each(function (index) {
  171. var file = files[index] ||
  172. {error: 'Empty file upload result'};
  173. deferred = that._addFinishedDeferreds();
  174. that._transition($(this)).done(
  175. function () {
  176. var node = $(this);
  177. template = that._renderDownload([file])
  178. .replaceAll(node);
  179. that._forceReflow(template);
  180. that._transition(template).done(
  181. function () {
  182. data.context = $(this);
  183. that._trigger('completed', e, data);
  184. that._trigger('finished', e, data);
  185. deferred.resolve();
  186. }
  187. );
  188. }
  189. );
  190. });
  191. } else {
  192. template = that._renderDownload(files)[
  193. that.options.prependFiles ? 'prependTo' : 'appendTo'
  194. ](that.options.filesContainer);
  195. that._forceReflow(template);
  196. deferred = that._addFinishedDeferreds();
  197. that._transition(template).done(
  198. function () {
  199. data.context = $(this);
  200. that._trigger('completed', e, data);
  201. that._trigger('finished', e, data);
  202. deferred.resolve();
  203. }
  204. );
  205. }
  206. },
  207. // Callback for failed (abort or error) uploads:
  208. fail: function (e, data) {
  209. if (e.isDefaultPrevented()) {
  210. return false;
  211. }
  212. var that = $(this).data('blueimp-fileupload') ||
  213. $(this).data('fileupload'),
  214. template,
  215. deferred;
  216. if (data.context) {
  217. data.context.each(function (index) {
  218. if (data.errorThrown !== 'abort') {
  219. var file = data.files[index];
  220. file.error = file.error || data.errorThrown ||
  221. data.i18n('unknownError');
  222. deferred = that._addFinishedDeferreds();
  223. that._transition($(this)).done(
  224. function () {
  225. var node = $(this);
  226. template = that._renderDownload([file])
  227. .replaceAll(node);
  228. that._forceReflow(template);
  229. that._transition(template).done(
  230. function () {
  231. data.context = $(this);
  232. that._trigger('failed', e, data);
  233. that._trigger('finished', e, data);
  234. deferred.resolve();
  235. }
  236. );
  237. }
  238. );
  239. } else {
  240. deferred = that._addFinishedDeferreds();
  241. that._transition($(this)).done(
  242. function () {
  243. $(this).remove();
  244. that._trigger('failed', e, data);
  245. that._trigger('finished', e, data);
  246. deferred.resolve();
  247. }
  248. );
  249. }
  250. });
  251. } else if (data.errorThrown !== 'abort') {
  252. data.context = that._renderUpload(data.files)[
  253. that.options.prependFiles ? 'prependTo' : 'appendTo'
  254. ](that.options.filesContainer)
  255. .data('data', data);
  256. that._forceReflow(data.context);
  257. deferred = that._addFinishedDeferreds();
  258. that._transition(data.context).done(
  259. function () {
  260. data.context = $(this);
  261. that._trigger('failed', e, data);
  262. that._trigger('finished', e, data);
  263. deferred.resolve();
  264. }
  265. );
  266. } else {
  267. that._trigger('failed', e, data);
  268. that._trigger('finished', e, data);
  269. that._addFinishedDeferreds().resolve();
  270. }
  271. },
  272. // Callback for upload progress events:
  273. progress: function (e, data) {
  274. if (e.isDefaultPrevented()) {
  275. return false;
  276. }
  277. var progress = Math.floor(data.loaded / data.total * 100);
  278. if (data.context) {
  279. data.context.each(function () {
  280. $(this).find('.progress')
  281. .attr('aria-valuenow', progress)
  282. .children().first().css(
  283. 'width',
  284. progress + '%'
  285. );
  286. });
  287. }
  288. },
  289. // Callback for global upload progress events:
  290. progressall: function (e, data) {
  291. if (e.isDefaultPrevented()) {
  292. return false;
  293. }
  294. var $this = $(this),
  295. progress = Math.floor(data.loaded / data.total * 100),
  296. globalProgressNode = $this.find('.fileupload-progress'),
  297. extendedProgressNode = globalProgressNode
  298. .find('.progress-extended');
  299. if (extendedProgressNode.length) {
  300. extendedProgressNode.html(
  301. ($this.data('blueimp-fileupload') || $this.data('fileupload'))
  302. ._renderExtendedProgress(data)
  303. );
  304. }
  305. globalProgressNode
  306. .find('.progress')
  307. .attr('aria-valuenow', progress)
  308. .children().first().css(
  309. 'width',
  310. progress + '%'
  311. );
  312. },
  313. // Callback for uploads start, equivalent to the global ajaxStart event:
  314. start: function (e) {
  315. if (e.isDefaultPrevented()) {
  316. return false;
  317. }
  318. var that = $(this).data('blueimp-fileupload') ||
  319. $(this).data('fileupload');
  320. that._resetFinishedDeferreds();
  321. that._transition($(this).find('.fileupload-progress')).done(
  322. function () {
  323. that._trigger('started', e);
  324. }
  325. );
  326. },
  327. // Callback for uploads stop, equivalent to the global ajaxStop event:
  328. stop: function (e) {
  329. if (e.isDefaultPrevented()) {
  330. return false;
  331. }
  332. var that = $(this).data('blueimp-fileupload') ||
  333. $(this).data('fileupload'),
  334. deferred = that._addFinishedDeferreds();
  335. $.when.apply($, that._getFinishedDeferreds())
  336. .done(function () {
  337. that._trigger('stopped', e);
  338. });
  339. that._transition($(this).find('.fileupload-progress')).done(
  340. function () {
  341. $(this).find('.progress')
  342. .attr('aria-valuenow', '0')
  343. .children().first().css('width', '0%');
  344. $(this).find('.progress-extended').html(' ');
  345. deferred.resolve();
  346. }
  347. );
  348. },
  349. processstart: function (e) {
  350. if (e.isDefaultPrevented()) {
  351. return false;
  352. }
  353. $(this).addClass('fileupload-processing');
  354. },
  355. processstop: function (e) {
  356. if (e.isDefaultPrevented()) {
  357. return false;
  358. }
  359. $(this).removeClass('fileupload-processing');
  360. },
  361. // Callback for file deletion:
  362. destroy: function (e, data) {
  363. if (e.isDefaultPrevented()) {
  364. return false;
  365. }
  366. var that = $(this).data('blueimp-fileupload') ||
  367. $(this).data('fileupload'),
  368. removeNode = function () {
  369. that._transition(data.context).done(
  370. function () {
  371. $(this).remove();
  372. that._trigger('destroyed', e, data);
  373. }
  374. );
  375. };
  376. if (data.url) {
  377. data.dataType = data.dataType || that.options.dataType;
  378. $.ajax(data).done(removeNode).fail(function () {
  379. that._trigger('destroyfailed', e, data);
  380. });
  381. } else {
  382. removeNode();
  383. }
  384. }
  385. },
  386. _resetFinishedDeferreds: function () {
  387. this._finishedUploads = [];
  388. },
  389. _addFinishedDeferreds: function (deferred) {
  390. if (!deferred) {
  391. deferred = $.Deferred();
  392. }
  393. this._finishedUploads.push(deferred);
  394. return deferred;
  395. },
  396. _getFinishedDeferreds: function () {
  397. return this._finishedUploads;
  398. },
  399. // Link handler, that allows to download files
  400. // by drag & drop of the links to the desktop:
  401. _enableDragToDesktop: function () {
  402. var link = $(this),
  403. url = link.prop('href'),
  404. name = link.prop('download'),
  405. type = 'application/octet-stream';
  406. link.bind('dragstart', function (e) {
  407. try {
  408. e.originalEvent.dataTransfer.setData(
  409. 'DownloadURL',
  410. [type, name, url].join(':')
  411. );
  412. } catch (ignore) {}
  413. });
  414. },
  415. _formatFileSize: function (bytes) {
  416. if (typeof bytes !== 'number') {
  417. return '';
  418. }
  419. if (bytes >= 1000000000) {
  420. return (bytes / 1000000000).toFixed(2) + ' GB';
  421. }
  422. if (bytes >= 1000000) {
  423. return (bytes / 1000000).toFixed(2) + ' MB';
  424. }
  425. return (bytes / 1000).toFixed(2) + ' KB';
  426. },
  427. _formatBitrate: function (bits) {
  428. if (typeof bits !== 'number') {
  429. return '';
  430. }
  431. if (bits >= 1000000000) {
  432. return (bits / 1000000000).toFixed(2) + ' Gbit/s';
  433. }
  434. if (bits >= 1000000) {
  435. return (bits / 1000000).toFixed(2) + ' Mbit/s';
  436. }
  437. if (bits >= 1000) {
  438. return (bits / 1000).toFixed(2) + ' kbit/s';
  439. }
  440. return bits.toFixed(2) + ' bit/s';
  441. },
  442. _formatTime: function (seconds) {
  443. var date = new Date(seconds * 1000),
  444. days = Math.floor(seconds / 86400);
  445. days = days ? days + 'd ' : '';
  446. return days +
  447. ('0' + date.getUTCHours()).slice(-2) + ':' +
  448. ('0' + date.getUTCMinutes()).slice(-2) + ':' +
  449. ('0' + date.getUTCSeconds()).slice(-2);
  450. },
  451. _formatPercentage: function (floatValue) {
  452. return (floatValue * 100).toFixed(2) + ' %';
  453. },
  454. _renderExtendedProgress: function (data) {
  455. return this._formatBitrate(data.bitrate) + ' | ' +
  456. this._formatTime(
  457. (data.total - data.loaded) * 8 / data.bitrate
  458. ) + ' | ' +
  459. this._formatPercentage(
  460. data.loaded / data.total
  461. ) + ' | ' +
  462. this._formatFileSize(data.loaded) + ' / ' +
  463. this._formatFileSize(data.total);
  464. },
  465. _renderTemplate: function (func, files) {
  466. if (!func) {
  467. return $();
  468. }
  469. var result = func({
  470. files: files,
  471. formatFileSize: this._formatFileSize,
  472. options: this.options
  473. });
  474. if (result instanceof $) {
  475. return result;
  476. }
  477. return $(this.options.templatesContainer).html(result).children();
  478. },
  479. _renderPreviews: function (data) {
  480. data.context.find('.preview').each(function (index, elm) {
  481. $(elm).append(data.files[index].preview);
  482. });
  483. },
  484. _renderUpload: function (files) {
  485. return this._renderTemplate(
  486. this.options.uploadTemplate,
  487. files
  488. );
  489. },
  490. _renderDownload: function (files) {
  491. return this._renderTemplate(
  492. this.options.downloadTemplate,
  493. files
  494. ).find('a[download]').each(this._enableDragToDesktop).end();
  495. },
  496. _startHandler: function (e) {
  497. e.preventDefault();
  498. var button = $(e.currentTarget),
  499. template = button.closest('.template-upload'),
  500. data = template.data('data');
  501. button.prop('disabled', true);
  502. if (data && data.submit) {
  503. data.submit();
  504. }
  505. },
  506. _cancelHandler: function (e) {
  507. e.preventDefault();
  508. var template = $(e.currentTarget)
  509. .closest('.template-upload,.template-download'),
  510. data = template.data('data') || {};
  511. data.context = data.context || template;
  512. if (data.abort) {
  513. data.abort();
  514. } else {
  515. data.errorThrown = 'abort';
  516. this._trigger('fail', e, data);
  517. }
  518. },
  519. _deleteHandler: function (e) {
  520. e.preventDefault();
  521. var button = $(e.currentTarget);
  522. this._trigger('destroy', e, $.extend({
  523. context: button.closest('.template-download'),
  524. type: 'DELETE'
  525. }, button.data()));
  526. },
  527. _forceReflow: function (node) {
  528. return $.support.transition && node.length &&
  529. node[0].offsetWidth;
  530. },
  531. _transition: function (node) {
  532. var dfd = $.Deferred();
  533. if ($.support.transition && node.hasClass('fade') && node.is(':visible')) {
  534. node.bind(
  535. $.support.transition.end,
  536. function (e) {
  537. // Make sure we don't respond to other transitions events
  538. // in the container element, e.g. from button elements:
  539. if (e.target === node[0]) {
  540. node.unbind($.support.transition.end);
  541. dfd.resolveWith(node);
  542. }
  543. }
  544. ).toggleClass('in');
  545. } else {
  546. node.toggleClass('in');
  547. dfd.resolveWith(node);
  548. }
  549. return dfd;
  550. },
  551. _initButtonBarEventHandlers: function () {
  552. var fileUploadButtonBar = this.element.find('.fileupload-buttonbar'),
  553. filesList = this.options.filesContainer;
  554. this._on(fileUploadButtonBar.find('.start'), {
  555. click: function (e) {
  556. e.preventDefault();
  557. filesList.find('.start').click();
  558. }
  559. });
  560. this._on(fileUploadButtonBar.find('.cancel'), {
  561. click: function (e) {
  562. e.preventDefault();
  563. filesList.find('.cancel').click();
  564. }
  565. });
  566. this._on(fileUploadButtonBar.find('.delete'), {
  567. click: function (e) {
  568. e.preventDefault();
  569. filesList.find('.toggle:checked')
  570. .closest('.template-download')
  571. .find('.delete').click();
  572. fileUploadButtonBar.find('.toggle')
  573. .prop('checked', false);
  574. }
  575. });
  576. this._on(fileUploadButtonBar.find('.toggle'), {
  577. change: function (e) {
  578. filesList.find('.toggle').prop(
  579. 'checked',
  580. $(e.currentTarget).is(':checked')
  581. );
  582. }
  583. });
  584. },
  585. _destroyButtonBarEventHandlers: function () {
  586. this._off(
  587. this.element.find('.fileupload-buttonbar')
  588. .find('.start, .cancel, .delete'),
  589. 'click'
  590. );
  591. this._off(
  592. this.element.find('.fileupload-buttonbar .toggle'),
  593. 'change.'
  594. );
  595. },
  596. _initEventHandlers: function () {
  597. this._super();
  598. this._on(this.options.filesContainer, {
  599. 'click .start': this._startHandler,
  600. 'click .cancel': this._cancelHandler,
  601. 'click .delete': this._deleteHandler
  602. });
  603. this._initButtonBarEventHandlers();
  604. },
  605. _destroyEventHandlers: function () {
  606. this._destroyButtonBarEventHandlers();
  607. this._off(this.options.filesContainer, 'click');
  608. this._super();
  609. },
  610. _enableFileInputButton: function () {
  611. this.element.find('.fileinput-button input')
  612. .prop('disabled', false)
  613. .parent().removeClass('disabled');
  614. },
  615. _disableFileInputButton: function () {
  616. this.element.find('.fileinput-button input')
  617. .prop('disabled', true)
  618. .parent().addClass('disabled');
  619. },
  620. _initTemplates: function () {
  621. var options = this.options;
  622. options.templatesContainer = this.document[0].createElement(
  623. options.filesContainer.prop('nodeName')
  624. );
  625. if (tmpl) {
  626. if (options.uploadTemplateId) {
  627. options.uploadTemplate = tmpl(options.uploadTemplateId);
  628. }
  629. if (options.downloadTemplateId) {
  630. options.downloadTemplate = tmpl(options.downloadTemplateId);
  631. }
  632. }
  633. },
  634. _initFilesContainer: function () {
  635. var options = this.options;
  636. if (options.filesContainer === undefined) {
  637. options.filesContainer = this.element.find('.files');
  638. } else if (!(options.filesContainer instanceof $)) {
  639. options.filesContainer = $(options.filesContainer);
  640. }
  641. },
  642. _initSpecialOptions: function () {
  643. this._super();
  644. this._initFilesContainer();
  645. this._initTemplates();
  646. },
  647. _create: function () {
  648. this._super();
  649. this._resetFinishedDeferreds();
  650. if (!$.support.fileInput) {
  651. this._disableFileInputButton();
  652. }
  653. },
  654. enable: function () {
  655. var wasDisabled = false;
  656. if (this.options.disabled) {
  657. wasDisabled = true;
  658. }
  659. this._super();
  660. if (wasDisabled) {
  661. this.element.find('input, button').prop('disabled', false);
  662. this._enableFileInputButton();
  663. }
  664. },
  665. disable: function () {
  666. if (!this.options.disabled) {
  667. this.element.find('input, button').prop('disabled', true);
  668. this._disableFileInputButton();
  669. }
  670. this._super();
  671. }
  672. });
  673. }));