fileinput.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. /*!
  2. * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
  3. * @version 2.1.0
  4. *
  5. * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced
  6. * features including the FileReader API. This plugin is inspired by the blog article at
  7. * http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/
  8. * and Jasny's File Input plugin http://jasny.github.io/bootstrap/javascript/#fileinput
  9. *
  10. * The plugin drastically enhances the file input to preview multiple files on the client before
  11. * upload. In addition it provides the ability to preview content of images and text files.
  12. *
  13. * Author: Kartik Visweswaran
  14. * Copyright: 2013, Kartik Visweswaran, Krajee.com
  15. * For more JQuery plugins visit http://plugins.krajee.com
  16. * For more Yii related demos visit http://demos.krajee.com
  17. */
  18. (function ($) {
  19. var MAIN_TEMPLATE_1 = '{preview}\n' +
  20. '<div class="input-group {class}">\n' +
  21. ' {caption}\n' +
  22. ' <div class="input-group-btn">\n' +
  23. ' {remove}\n' +
  24. ' {upload}\n' +
  25. ' {browse}\n' +
  26. ' </div>\n' +
  27. '</div>',
  28. MAIN_TEMPLATE_2 = '{preview}\n{remove}\n{upload}\n{browse}\n',
  29. PREVIEW_TEMPLATE = '<div class="file-preview {class}">\n' +
  30. ' <div class="file-preview-status text-center text-success"></div>\n' +
  31. ' <div class="close fileinput-remove text-right">&times;</div>\n' +
  32. ' <div class="file-preview-thumbnails"></div>\n' +
  33. ' <div class="clearfix"></div>' +
  34. '</div>',
  35. CAPTION_TEMPLATE = '<div tabindex="-1" class="form-control file-caption {class}">\n' +
  36. ' <span class="glyphicon glyphicon-file kv-caption-icon"></span><div class="file-caption-name"></div>\n' +
  37. '</div>',
  38. MODAL_TEMPLATE = '<div id="{id}" class="modal fade">\n' +
  39. ' <div class="modal-dialog modal-lg">\n' +
  40. ' <div class="modal-content">\n' +
  41. ' <div class="modal-header">\n' +
  42. ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n' +
  43. ' <h3 class="modal-title">Detailed Preview <small>{title}</small></h3>\n' +
  44. ' </div>\n' +
  45. ' <div class="modal-body">\n' +
  46. ' <textarea class="form-control" style="font-family:Monaco,Consolas,monospace; height: {height}px;" readonly>{body}</textarea>\n' +
  47. ' </div>\n' +
  48. ' </div>\n' +
  49. ' </div>\n' +
  50. '</div>\n',
  51. IMAGE_TEMPLATE = '<div class="file-preview-frame" id="{previewId}">\n' +
  52. ' {content}\n' +
  53. '</div>\n',
  54. TEXT_TEMPLATE = '<div class="file-preview-frame" id="{previewId}">\n' +
  55. ' <div class="file-preview-text" title="{caption}">\n' +
  56. ' {strText}\n' +
  57. ' </div>\n' +
  58. '</div>\n',
  59. OTHER_TEMPLATE = '<div class="file-preview-frame" id="{previewId}">\n' +
  60. ' <div class="file-preview-other">\n' +
  61. ' <h2><i class="glyphicon glyphicon-file"></i></h2>\n' +
  62. ' {caption}\n' +
  63. ' </div>\n' +
  64. '</div>',
  65. isEmpty = function (value, trim) {
  66. return value === null || value === undefined || value == []
  67. || value === '' || trim && $.trim(value) === '';
  68. },
  69. isArray = Array.isArray || function (a) {
  70. return Object.prototype.toString.call(a) === '[object Array]';
  71. },
  72. getValue = function (options, param, value) {
  73. return (isEmpty(options) || isEmpty(options[param])) ? value : options[param];
  74. },
  75. getElement = function (options, param, value) {
  76. return (isEmpty(options) || isEmpty(options[param])) ? value : $(options[param]);
  77. },
  78. isImageFile = function (type, name) {
  79. return (typeof type !== "undefined") ? type.match('image.*') : name.match(/\.(gif|png|jpe?g)$/i);
  80. },
  81. isTextFile = function (type, name) {
  82. return (typeof type !== "undefined") ? type.match('text.*') : name.match(/\.(txt|md|csv|htm|html|php|ini)$/i);
  83. },
  84. uniqId = function () {
  85. return Math.round(new Date().getTime() + (Math.random() * 100));
  86. },
  87. hasFileAPISupport = function () {
  88. return window.File && window.FileReader && window.FileList && window.Blob;
  89. },
  90. vUrl = window.URL || window.webkitURL;
  91. var FileInput = function (element, options) {
  92. this.$element = $(element);
  93. if (hasFileAPISupport) {
  94. this.init(options);
  95. this.listen();
  96. } else {
  97. this.$element.removeClass('file-loading');
  98. }
  99. };
  100. FileInput.prototype = {
  101. constructor: FileInput,
  102. init: function (options) {
  103. var self = this;
  104. self.reader = null;
  105. self.showCaption = options.showCaption;
  106. self.showPreview = options.showPreview;
  107. self.maxFileSize = options.maxFileSize;
  108. self.maxFilesCount = options.maxFilesCount;
  109. self.msgSizeTooLarge = options.msgSizeTooLarge;
  110. self.msgFilesTooMany = options.msgFilesTooMany;
  111. self.msgFileNotFound = options.msgFileNotFound;
  112. self.msgFileNotReadable = options.msgFileNotReadable;
  113. self.msgFilePreviewAborted = options.msgFilePreviewAborted;
  114. self.msgFilePreviewError = options.msgFilePreviewError;
  115. self.msgErrorClass = options.msgErrorClass;
  116. self.initialDelimiter = options.initialDelimiter;
  117. self.initialPreview = options.initialPreview;
  118. self.initialCaption = options.initialCaption;
  119. self.initialPreviewCount = options.initialPreviewCount;
  120. self.initialPreviewContent = options.initialPreviewContent;
  121. self.overwriteInitial = options.overwriteInitial;
  122. self.showRemove = options.showRemove;
  123. self.showUpload = options.showUpload;
  124. self.captionClass = options.captionClass;
  125. self.previewClass = options.previewClass;
  126. self.mainClass = options.mainClass;
  127. if (isEmpty(options.mainTemplate)) {
  128. self.mainTemplate = self.showCaption ? MAIN_TEMPLATE_1 : MAIN_TEMPLATE_2;
  129. } else {
  130. self.mainTemplate = options.mainTemplate;
  131. }
  132. self.previewTemplate = (self.showPreview) ? options.previewTemplate : '';
  133. self.previewGenericTemplate = options.previewGenericTemplate;
  134. self.previewImageTemplate = options.previewImageTemplate;
  135. self.previewTextTemplate = options.previewTextTemplate;
  136. self.previewOtherTemplate = options.previewOtherTemplate;
  137. self.captionTemplate = options.captionTemplate;
  138. self.browseLabel = options.browseLabel;
  139. self.browseIcon = options.browseIcon;
  140. self.browseClass = options.browseClass;
  141. self.removeLabel = options.removeLabel;
  142. self.removeIcon = options.removeIcon;
  143. self.removeClass = options.removeClass;
  144. self.uploadLabel = options.uploadLabel;
  145. self.uploadIcon = options.uploadIcon;
  146. self.uploadClass = options.uploadClass;
  147. self.uploadUrl = options.uploadUrl;
  148. self.msgLoading = options.msgLoading;
  149. self.msgProgress = options.msgProgress;
  150. self.msgSelected = options.msgSelected;
  151. self.previewFileType = options.previewFileType;
  152. self.wrapTextLength = options.wrapTextLength;
  153. self.wrapIndicator = options.wrapIndicator;
  154. self.isError = false;
  155. self.isDisabled = self.$element.attr('disabled') || self.$element.attr('readonly');
  156. if (isEmpty(self.$element.attr('id'))) {
  157. self.$element.attr('id', uniqId());
  158. }
  159. if (typeof self.$container == 'undefined') {
  160. self.$container = self.createContainer();
  161. } else {
  162. self.refreshContainer();
  163. }
  164. self.$captionContainer = getElement(options, 'elCaptionContainer', self.$container.find('.file-caption'));
  165. self.$caption = getElement(options, 'elCaptionText', self.$container.find('.file-caption-name'));
  166. self.$previewContainer = getElement(options, 'elPreviewContainer', self.$container.find('.file-preview'));
  167. self.$preview = getElement(options, 'elPreviewImage', self.$container.find('.file-preview-thumbnails'));
  168. self.$previewStatus = getElement(options, 'elPreviewStatus', self.$container.find('.file-preview-status'));
  169. self.initPreview();
  170. self.original = {
  171. preview: self.$preview.html(),
  172. caption: self.$caption.html()
  173. };
  174. self.options = options;
  175. self.$element.removeClass('file-loading');
  176. },
  177. listen: function () {
  178. var self = this;
  179. self.$element.on('change', $.proxy(self.change, self));
  180. self.$element.on('focus', function(ev) {
  181. ev.preventDefault();
  182. self.$captionContainer.focus();
  183. });
  184. $(self.$element[0].form).on('reset', $.proxy(self.reset, self));
  185. self.$container.on('click', '.fileinput-remove:not([disabled])', $.proxy(self.clear, self));
  186. },
  187. refresh: function (options) {
  188. var self = this, params = (arguments.length) ? $.extend(self.options, options) : self.options;
  189. self.init(params);
  190. },
  191. initPreview: function () {
  192. var self = this, html = '',
  193. content = self.initialPreview,
  194. len = isArray(content) ? content.length : (content.length > 0 ? content.split(self.initialDelimiter).length : 0),
  195. cap = self.initialCaption.length, previewId = "preview-" + uniqId(),
  196. caption = (cap > 0) ? self.initialCaption : self.msgSelected.replace("{n}", len);
  197. if (isArray(content) && len > 0) {
  198. for (var i = 0; i < len; i++) {
  199. previewId += '-' + i;
  200. html += self.previewGenericTemplate.replace("{previewId}", previewId).replace("{content}", content[i]);
  201. }
  202. if (len > 1 && cap == 0) {
  203. caption = self.msgSelected.replace("{n}", len);
  204. }
  205. } else if (len > 0) {
  206. var fileList = content.split(self.initialDelimiter);
  207. for (var i = 0; i < len; i++) {
  208. previewId += '-' + i;
  209. html += self.previewGenericTemplate.replace("{previewId}", previewId).replace("{content}", fileList[i]);
  210. }
  211. if (len > 1 && cap == 0) {
  212. caption = self.msgSelected.replace("{n}", len);
  213. }
  214. } else if (cap > 0) {
  215. self.$caption.html(caption);
  216. self.$captionContainer.attr('title', caption);
  217. return;
  218. } else {
  219. return;
  220. }
  221. self.initialPreviewCount = len;
  222. self.initialPreviewContent = html;
  223. self.$preview.html(html);
  224. self.$caption.html(caption);
  225. self.$captionContainer.attr('title', caption);
  226. self.$container.removeClass('file-input-new');
  227. },
  228. clear: function (e) {
  229. var self = this;
  230. if (e) {
  231. e.preventDefault();
  232. }
  233. if (self.reader instanceof FileReader) {
  234. self.reader.abort();
  235. }
  236. self.$element.val('');
  237. self.resetErrors(true);
  238. if (e !== false) {
  239. self.$element.trigger('change');
  240. self.$element.trigger('fileclear');
  241. }
  242. if (!self.overwriteInitial && !isEmpty(self.initialPreviewContent)) {
  243. self.$preview.html(self.original.preview);
  244. self.$caption.html(self.original.caption);
  245. self.$container.removeClass('file-input-new');
  246. } else {
  247. self.$preview.html('');
  248. var cap = (!self.overwriteInitial && self.initialCaption.length > 0) ?
  249. self.original.caption : '';
  250. self.$caption.html(cap);
  251. self.$captionContainer.attr('title', '');
  252. self.$container.removeClass('file-input-new').addClass('file-input-new');
  253. }
  254. self.hideFileIcon();
  255. self.$element.trigger('filecleared');
  256. self.$captionContainer.focus();
  257. },
  258. reset: function (e) {
  259. var self = this;
  260. self.clear(false);
  261. self.$preview.html(self.original.preview);
  262. self.$caption.html(self.original.caption);
  263. self.$container.find('.fileinput-filename').text('');
  264. self.$element.trigger('filereset');
  265. if (self.initialPreview.length > 0) {
  266. self.$container.removeClass('file-input-new');
  267. }
  268. },
  269. disable: function (e) {
  270. var self = this;
  271. self.isDisabled = true;
  272. self.$element.attr('disabled', 'disabled');
  273. self.$container.find(".kv-fileinput-caption").addClass("file-caption-disabled");
  274. self.$container.find(".btn-file, .fileinput-remove, .kv-fileinput-upload").attr("disabled", true);
  275. },
  276. enable: function (e) {
  277. var self = this;
  278. self.isDisabled = false;
  279. self.$element.removeAttr('disabled');
  280. self.$container.find(".kv-fileinput-caption").removeClass("file-caption-disabled");
  281. self.$container.find(".btn-file, .fileinput-remove, .kv-fileinput-upload").removeAttr("disabled");
  282. },
  283. hideFileIcon: function() {
  284. if (this.overwriteInitial) {
  285. this.$captionContainer.find('.kv-caption-icon').hide();
  286. }
  287. },
  288. showFileIcon: function() {
  289. this.$captionContainer.find('.kv-caption-icon').show();
  290. },
  291. resetErrors: function (fade) {
  292. var self = this, $error = self.$previewContainer.find('.kv-fileinput-error');
  293. if (fade) {
  294. $error.fadeOut('slow');
  295. } else {
  296. $error.remove();
  297. }
  298. },
  299. showError: function (msg, file, previewId) {
  300. var self = this, $error = self.$previewContainer.find('.kv-fileinput-error');
  301. if (isEmpty($error.attr('class'))) {
  302. self.$previewContainer.append(
  303. '<div class="kv-fileinput-error ' + self.msgErrorClass + '">' + msg + '</div>'
  304. );
  305. } else {
  306. $error.html(msg);
  307. }
  308. $error.hide();
  309. $error.fadeIn(800);
  310. self.$element.trigger('fileerror', [file, previewId]);
  311. self.$element.val('');
  312. return true;
  313. },
  314. errorHandler: function (evt, caption) {
  315. var self = this;
  316. switch (evt.target.error.code) {
  317. case evt.target.error.NOT_FOUND_ERR:
  318. self.addError(self.msgFileNotFound.replace('{name}', caption));
  319. break;
  320. case evt.target.error.NOT_READABLE_ERR:
  321. self.addError(self.msgFileNotReadable.replace('{name}', caption));
  322. break;
  323. case evt.target.error.ABORT_ERR:
  324. self.addError(self.msgFilePreviewAborted.replace('{name}', caption));
  325. break;
  326. default:
  327. self.addError(self.msgFilePreviewError.replace('{name}', caption));
  328. }
  329. },
  330. loadImage: function (file, caption) {
  331. var self = this, $img = $(document.createElement("img"));
  332. $img.attr({
  333. src: vUrl.createObjectURL(file),
  334. class: 'file-preview-image',
  335. title: caption,
  336. alt: caption,
  337. onload: function (e) {
  338. vUrl.revokeObjectURL($img.src);
  339. }
  340. });
  341. // autosize if image width exceeds preview width
  342. if ($img.width() >= self.$preview.width()) {
  343. $img.attr({width: "100%", height: "auto"});
  344. }
  345. var $imgContent = $(document.createElement("div")).append($img);
  346. return $imgContent.html();
  347. },
  348. readFiles: function (files) {
  349. this.reader = new FileReader();
  350. var self = this, $el = self.$element, $preview = self.$preview, reader = self.reader,
  351. $container = self.$previewContainer, $status = self.$previewStatus, msgLoading = self.msgLoading,
  352. msgProgress = self.msgProgress, msgSelected = self.msgSelected, fileType = self.previewFileType,
  353. wrapLen = parseInt(self.wrapTextLength), wrapInd = self.wrapIndicator,
  354. previewId = "preview-" + uniqId();
  355. function readFile(i) {
  356. if (i >= files.length) {
  357. $container.removeClass('loading');
  358. $status.html('');
  359. return;
  360. }
  361. previewId += "-" + i;
  362. var file = files[i], caption = file.name, isImg = isImageFile(file.type, file.name),
  363. isTxt = isTextFile(file.type, file.name), fileSize = (file.size ? file.size : 0) / 1000;
  364. fileSize = fileSize.toFixed(2);
  365. if (self.maxFileSize > 0 && fileSize > self.maxFileSize) {
  366. var msg = self.msgSizeTooLarge.replace('{name}', caption).replace('{size}', fileSize).replace('{maxSize}', self.maxFileSize);
  367. self.isError = self.showError(msg, file, previewId);
  368. return;
  369. }
  370. if ($preview.length > 0 && (fileType == "any" ? (isImg || isTxt) : (fileType == "text" ? isTxt : isImg)) && typeof FileReader !== "undefined") {
  371. $status.html(msgLoading);
  372. $container.addClass('loading');
  373. reader.onerror = function (evt) {
  374. self.errorHandler(evt, caption);
  375. };
  376. reader.onload = function (theFile) {
  377. var content = '', modal = '';
  378. if (isTxt) {
  379. var strText = theFile.target.result;
  380. if (strText.length > wrapLen) {
  381. var id = uniqId(), height = window.innerHeight * .75,
  382. modal = MODAL_TEMPLATE.replace("{id}", id).replace("{title}", caption).replace("{body}", strText).replace("{height}", height);
  383. wrapInd = wrapInd.replace("{title}", caption).replace("{dialog}", "$('#" + id + "').modal('show')");
  384. strText = strText.substring(0, (wrapLen - 1)) + wrapInd;
  385. }
  386. content = self.previewTextTemplate.replace("{previewId}", previewId).replace("{caption}", caption).replace("{strText}", strText) + modal;
  387. } else {
  388. content = self.previewImageTemplate.replace("{previewId}", previewId).replace("{content}", self.loadImage(file, caption));
  389. }
  390. $preview.append("\n" + content);
  391. };
  392. reader.onloadend = function (e) {
  393. setTimeout(readFile(i + 1), 1000);
  394. $el.trigger('fileloaded', [file, previewId]);
  395. };
  396. reader.onprogress = function (data) {
  397. if (data.lengthComputable) {
  398. var progress = parseInt(((data.loaded / data.total) * 100), 10);
  399. var msg = msgProgress.replace('{percent}', progress).replace('{file}', file.name);
  400. $status.html(msg);
  401. }
  402. };
  403. if (isTxt) {
  404. reader.readAsText(file);
  405. } else {
  406. reader.readAsBinaryString(file);
  407. }
  408. } else {
  409. $preview.append("\n" + self.previewOtherTemplate.replace("{previewId}", previewId).replace("{caption}", caption));
  410. $el.trigger('fileloaded', [file, previewId]);
  411. setTimeout(readFile(i + 1), 1000);
  412. }
  413. }
  414. readFile(0);
  415. },
  416. change: function (e) {
  417. var self = this, $el = self.$element, label = $el.val().replace(/\\/g, '/').replace(/.*\//, ''),
  418. total = 0, $preview = self.$preview, files = $el.get(0).files, msgSelected = self.msgSelected,
  419. numFiles = !isEmpty(files) ? (files.length + self.initialPreviewCount) : 1, tfiles;
  420. self.hideFileIcon();
  421. if (e.target.files === undefined) {
  422. tfiles = e.target && e.target.value ? [
  423. {name: e.target.value.replace(/^.+\\/, '')}
  424. ] : [];
  425. } else {
  426. tfiles = e.target.files;
  427. }
  428. if (tfiles.length === 0) {
  429. return;
  430. }
  431. self.resetErrors();
  432. $preview.html('');
  433. if (!self.overwriteInitial) {
  434. $preview.html(self.initialPreviewContent);
  435. }
  436. var total = tfiles.length;
  437. if (self.maxFilesCount > 0 && total > self.maxFilesCount) {
  438. var msg = self.msgFilesTooMany.replace('{m}', self.maxFilesCount).replace('{n}', total);
  439. self.isError = self.showError(msg, null, null);
  440. self.$container.removeClass('file-input-new');
  441. return;
  442. }
  443. self.showFileIcon();
  444. self.readFiles(files);
  445. self.reader = null;
  446. var log = numFiles > 1 ? msgSelected.replace('{n}', numFiles) : label;
  447. if (self.isError) {
  448. log = numFiles > 1 ? msgSelected.replace('{n}', numFiles - 1) : '&nbsp;';
  449. }
  450. self.$caption.html(log);
  451. self.$captionContainer.attr('title', log);
  452. self.$container.removeClass('file-input-new');
  453. $el.trigger('fileselect', [numFiles, label]);
  454. },
  455. initBrowse: function($container) {
  456. var self = this;
  457. self.$btnFile = $container.find('.btn-file');
  458. self.$btnFile.append(self.$element);
  459. },
  460. createContainer: function () {
  461. var self = this;
  462. var $container = $(document.createElement("span")).attr({"class": 'file-input file-input-new'}).html(self.renderMain());
  463. self.$element.before($container);
  464. self.initBrowse($container);
  465. return $container;
  466. },
  467. refreshContainer: function () {
  468. var self = this, $container = self.$container;
  469. $container.before(self.$element);
  470. $container.html(self.renderMain());
  471. self.initBrowse($container);
  472. },
  473. renderMain: function () {
  474. var self = this;
  475. var preview = self.previewTemplate.replace('{class}', self.previewClass);
  476. var css = self.isDisabled ? self.captionClass + ' file-caption-disabled' : self.captionClass;
  477. var caption = self.captionTemplate.replace('{class}', css + ' kv-fileinput-caption');
  478. return self.mainTemplate.replace('{class}', self.mainClass).
  479. replace('{preview}', preview).
  480. replace('{caption}', caption).
  481. replace('{upload}', self.renderUpload()).
  482. replace('{remove}', self.renderRemove()).
  483. replace('{browse}', self.renderBrowse());
  484. },
  485. renderBrowse: function () {
  486. var self = this, css = self.browseClass + ' btn-file', status = '';
  487. if (self.isDisabled) {
  488. status = ' disabled ';
  489. }
  490. return '<div class="' + css + '"' + status + '> ' + self.browseIcon + self.browseLabel + ' </div>';
  491. },
  492. renderRemove: function () {
  493. var self = this, css = self.removeClass + ' fileinput-remove fileinput-remove-button', status = '';
  494. if (!self.showRemove) {
  495. return '';
  496. }
  497. if (self.isDisabled) {
  498. status = ' disabled ';
  499. }
  500. return '<button type="button" class="' + css + '"' + status + '>' + self.removeIcon + self.removeLabel + '</button>';
  501. },
  502. renderUpload: function () {
  503. var self = this, css = self.uploadClass + ' kv-fileinput-upload', content = '', status = '';
  504. if (!self.showUpload) {
  505. return '';
  506. }
  507. if (self.isDisabled) {
  508. status = ' disabled ';
  509. }
  510. if (isEmpty(self.uploadUrl)) {
  511. content = '<button type="submit" class="' + css + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</button>';
  512. } else {
  513. content = '<a href="' + self.uploadUrl + '" class="' + self.uploadClass + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</a>';
  514. }
  515. return content;
  516. }
  517. }
  518. $.fn.fileinput = function (options) {
  519. return this.each(function () {
  520. var $this = $(this), data = $this.data('fileinput')
  521. if (!data) {
  522. $this.data('fileinput', (data = new FileInput(this, options)))
  523. }
  524. if (typeof options == 'string') {
  525. data[options]()
  526. }
  527. })
  528. };
  529. //FileInput plugin definition
  530. $.fn.fileinput = function (option) {
  531. var args = Array.apply(null, arguments);
  532. args.shift();
  533. return this.each(function () {
  534. var $this = $(this),
  535. data = $this.data('fileinput'),
  536. options = typeof option === 'object' && option;
  537. if (!data) {
  538. $this.data('fileinput', (data = new FileInput(this, $.extend({}, $.fn.fileinput.defaults, options, $(this).data()))));
  539. }
  540. if (typeof option === 'string') {
  541. data[option].apply(data, args);
  542. }
  543. });
  544. };
  545. $.fn.fileinput.defaults = {
  546. showCaption: true,
  547. showPreview: true,
  548. showRemove: true,
  549. showUpload: true,
  550. captionClass: '',
  551. previewClass: '',
  552. mainClass: '',
  553. mainTemplate: null,
  554. initialDelimiter: '*$$*',
  555. initialPreview: '',
  556. initialCaption: '',
  557. initialPreviewCount: 0,
  558. initialPreviewContent: '',
  559. overwriteInitial: true,
  560. previewTemplate: PREVIEW_TEMPLATE,
  561. previewGenericTemplate: IMAGE_TEMPLATE,
  562. previewImageTemplate: IMAGE_TEMPLATE,
  563. previewTextTemplate: TEXT_TEMPLATE,
  564. previewOtherTemplate: OTHER_TEMPLATE,
  565. captionTemplate: CAPTION_TEMPLATE,
  566. browseLabel: 'Browse &hellip;',
  567. browseIcon: '<i class="glyphicon glyphicon-folder-open"></i> &nbsp;',
  568. browseClass: 'btn btn-primary',
  569. removeLabel: 'Remove',
  570. removeIcon: '<i class="glyphicon glyphicon-ban-circle"></i> ',
  571. removeClass: 'btn btn-default',
  572. uploadLabel: 'Upload',
  573. uploadIcon: '<i class="glyphicon glyphicon-upload"></i> ',
  574. uploadClass: 'btn btn-default',
  575. uploadUrl: null,
  576. maxFileSize: 0,
  577. maxFilesCount: 0,
  578. msgSizeTooLarge: 'File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. Please retry your upload!',
  579. msgFilesTooMany: 'Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>. Please retry your upload!',
  580. msgFileNotFound: 'File "{name}" not found!',
  581. msgFileNotReadable: 'File "{name}" is not readable.',
  582. msgFilePreviewAborted: 'File preview aborted for "{name}".',
  583. msgFilePreviewError: 'An error occurred while reading the file "{name}".',
  584. msgErrorClass: 'file-error-message',
  585. msgLoading: 'Loading &hellip;',
  586. msgProgress: 'Loaded {percent}% of {file}',
  587. msgSelected: '{n} files selected',
  588. previewFileType: 'image',
  589. wrapTextLength: 250,
  590. wrapIndicator: ' <span class="wrap-indicator" title="{title}" onclick="{dialog}">[&hellip;]</span>',
  591. elCaptionContainer: null,
  592. elCaptionText: null,
  593. elPreviewContainer: null,
  594. elPreviewImage: null,
  595. elPreviewStatus: null
  596. };
  597. /**
  598. * Convert automatically file inputs with class 'file'
  599. * into a bootstrap fileinput control.
  600. */
  601. $(document).ready(function () {
  602. var $input = $('input.file[type=file]'), count = $input.attr('type') != null ? $input.length : 0;
  603. if (count > 0) {
  604. $input.fileinput();
  605. }
  606. });
  607. })(window.jQuery);