/*! * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 * @version 4.3.1 * * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced features including the FileReader API. * * The plugin drastically enhances the HTML file input to preview multiple files on the client before upload. In * addition it provides the ability to preview content of images, text, videos, audio, html, flash and other objects. * It also offers the ability to upload and delete files using AJAX, and add files in batches (i.e. preview, append, * or remove before upload). * * Author: Kartik Visweswaran * Copyright: 2015, Kartik Visweswaran, Krajee.com * For more JQuery plugins visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com */ (function (factory) { "use strict"; if (typeof define === 'function' && define.amd) { // jshint ignore:line // AMD. Register as an anonymous module. define(['jquery'], factory); // jshint ignore:line } else { // noinspection JSUnresolvedVariable if (typeof module === 'object' && module.exports) { // jshint ignore:line // Node/CommonJS // noinspection JSUnresolvedVariable module.exports = factory(require('jquery')); // jshint ignore:line } else { // Browser globals factory(window.jQuery); } } }(function ($) { "use strict"; $.fn.fileinputLocales = {}; var NAMESPACE, objUrl, compare, isIE, isEdge, handler, previewCache, getNum, hasFileAPISupport, hasDragDropSupport, hasFileUploadSupport, addCss, STYLE_SETTING, OBJECT_PARAMS, DEFAULT_PREVIEW, defaultFileActionSettings, tMain1, tMain2, tPreview, tIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse, tModal, tProgress, tFooter, tActions, tActionDelete, tActionUpload, tZoom, tGeneric, tHtml, tImage, tText, tVideo, tAudio, tFlash, tObject, tOther, defaultLayoutTemplates, defaultPreviewTemplates, defaultPreviewTypes, defaultPreviewSettings, FileInput, defaultFileTypeSettings, isEmpty, isArray, isSet, getElement, uniqId, htmlEncode, replaceTags, cleanMemory; NAMESPACE = '.fileinput'; //noinspection JSUnresolvedVariable objUrl = window.URL || window.webkitURL; compare = function (input, str, exact) { return input !== undefined && (exact ? input === str : input.match(str)); }; isIE = function (ver) { // check for IE versions < 11 if (navigator.appName !== 'Microsoft Internet Explorer') { return false; } if (ver === 10) { return new RegExp('msie\\s' + ver, 'i').test(navigator.userAgent); } var div = document.createElement("div"), status; div.innerHTML = ""; status = div.getElementsByTagName("i").length; document.body.appendChild(div); div.parentNode.removeChild(div); return status; }; isEdge = function () { return new RegExp('Edge\/[0-9]+', 'i').test(navigator.userAgent); }; handler = function ($el, event, callback, skipNS) { var ev = skipNS ? event : event.split(' ').join(NAMESPACE + ' ') + NAMESPACE; $el.off(ev).on(ev, callback); }; previewCache = { data: {}, init: function (obj) { var content = obj.initialPreview, id = obj.id; if (content.length > 0 && !isArray(content)) { content = content.split(obj.initialPreviewDelimiter); } previewCache.data[id] = { content: content, config: obj.initialPreviewConfig, tags: obj.initialPreviewThumbTags, delimiter: obj.initialPreviewDelimiter, template: obj.previewGenericTemplate, msg: function (n) { return obj._getMsgSelected(n); }, initId: obj.previewInitId, footer: obj._getLayoutTemplate('footer').replace(/\{progress}/g, obj._renderThumbProgress()), isDelete: obj.initialPreviewShowDelete, caption: obj.initialCaption, actions: function (showUpload, showDelete, disabled, url, key) { return obj._renderFileActions(showUpload, showDelete, disabled, url, key); } }; }, fetch: function (id) { return previewCache.data[id].content.filter(function (n) { return n !== null; }); }, count: function (id, all) { return !!previewCache.data[id] && !!previewCache.data[id].content ? (all ? previewCache.data[id].content.length : previewCache.fetch(id).length) : 0; }, get: function (id, i, isDisabled) { var ind = 'init_' + i, data = previewCache.data[id], config = data.config[i], previewId = data.initId + '-' + ind, out, $tmp, frameClass = ' file-preview-initial'; /** @namespace config.frameClass */ /** @namespace config.frameAttr */ isDisabled = isDisabled === undefined ? true : isDisabled; if (data.content[i] === null) { return ''; } if (!isEmpty(config) && !isEmpty(config.frameClass)) { frameClass += ' ' + config.frameClass; } out = data.template .replace(/\{previewId}/g, previewId) .replace(/\{frameClass}/g, frameClass) .replace(/\{fileindex}/g, ind) .replace(/\{content}/g, data.content[i]) .replace(/\{footer}/g, previewCache.footer(id, i, isDisabled)); if (data.tags.length && data.tags[i]) { out = replaceTags(out, data.tags[i]); } if (!isEmpty(config) && !isEmpty(config.frameAttr)) { $tmp = $(document.createElement('div')).html(out); $tmp.find('.file-preview-initial').attr(config.frameAttr); out = $tmp.html(); $tmp.remove(); } return out; }, add: function (id, content, config, tags, append) { var data = $.extend(true, {}, previewCache.data[id]), index; if (!isArray(content)) { content = content.split(data.delimiter); } if (append) { index = data.content.push(content) - 1; data.config[index] = config; data.tags[index] = tags; } else { index = content.length; data.content = content; data.config = config; data.tags = tags; } previewCache.data[id] = data; return index; }, set: function (id, content, config, tags, append) { var data = $.extend(true, {}, previewCache.data[id]), i, chk; if (!content || !content.length) { return; } if (!isArray(content)) { content = content.split(data.delimiter); } chk = content.filter(function (n) { return n !== null; }); if (!chk.length) { return; } if (data.content === undefined) { data.content = []; } if (data.config === undefined) { data.config = []; } if (data.tags === undefined) { data.tags = []; } if (append) { for (i = 0; i < content.length; i++) { if (content[i]) { data.content.push(content[i]); } } for (i = 0; i < config.length; i++) { if (config[i]) { data.config.push(config[i]); } } for (i = 0; i < tags.length; i++) { if (tags[i]) { data.tags.push(tags[i]); } } } else { data.content = content; data.config = config; data.tags = tags; } previewCache.data[id] = data; }, unset: function (id, index) { var chk = previewCache.count(id); if (!chk) { return; } if (chk === 1) { previewCache.data[id].content = []; previewCache.data[id].config = []; return; } previewCache.data[id].content[index] = null; previewCache.data[id].config[index] = null; }, out: function (id) { var html = '', data = previewCache.data[id], caption, len = previewCache.count(id, true); if (len === 0) { return {content: '', caption: ''}; } for (var i = 0; i < len; i++) { html += previewCache.get(id, i); } caption = data.msg(previewCache.count(id)); return {content: html, caption: caption}; }, footer: function (id, i, isDisabled) { var data = previewCache.data[id]; isDisabled = isDisabled === undefined ? true : isDisabled; if (data.config.length === 0 || isEmpty(data.config[i])) { return ''; } var config = data.config[i], caption = isSet('caption', config) ? config.caption : '', width = isSet('width', config) ? config.width : 'auto', url = isSet('url', config) ? config.url : false, key = isSet('key', config) ? config.key : null, disabled = (url === false) && isDisabled, actions = data.isDelete ? data.actions(false, true, disabled, url, key) : '', footer = data.footer.replace(/\{actions}/g, actions); return footer.replace(/\{caption}/g, caption) .replace(/\{width}/g, width) .replace(/\{indicator}/g, '') .replace(/\{indicatorTitle}/g, ''); } }; getNum = function (num, def) { def = def || 0; if (typeof num === "number") { return num; } if (typeof num === "string") { num = parseFloat(num); } return isNaN(num) ? def : num; }; hasFileAPISupport = function () { return !!(window.File && window.FileReader); }; hasDragDropSupport = function () { var div = document.createElement('div'); /** @namespace div.draggable */ /** @namespace div.ondragstart */ /** @namespace div.ondrop */ return !isIE(9) && !isEdge() && // Fix for MS Edge drag & drop support bug (div.draggable !== undefined || (div.ondragstart !== undefined && div.ondrop !== undefined)); }; hasFileUploadSupport = function () { return hasFileAPISupport() && window.FormData; }; addCss = function ($el, css) { $el.removeClass(css).addClass(css); }; STYLE_SETTING = 'style="width:{width};height:{height};"'; OBJECT_PARAMS = ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n'; DEFAULT_PREVIEW = '
\n' + ' {previewFileIcon}\n' + '
'; defaultFileActionSettings = { removeIcon: '', removeClass: 'btn btn-xs btn-default', removeTitle: 'Remove file', uploadIcon: '', uploadClass: 'btn btn-xs btn-default', uploadTitle: 'Upload file', indicatorNew: '', indicatorSuccess: '', indicatorError: '', indicatorLoading: '', indicatorNewTitle: 'Not uploaded yet', indicatorSuccessTitle: 'Uploaded', indicatorErrorTitle: 'Upload Error', indicatorLoadingTitle: 'Uploading ...' }; tMain1 = '{preview}\n' + '
\n' + '
\n' + ' {caption}\n' + '
\n' + ' {remove}\n' + ' {cancel}\n' + ' {upload}\n' + ' {browse}\n' + '
\n' + '
'; tMain2 = '{preview}\n
\n{remove}\n{cancel}\n{upload}\n{browse}\n'; tPreview = '
\n' + ' {close}' + '
\n' + '
\n' + '
\n' + '
' + '
\n' + '
\n' + '
\n' + '
'; tClose = '
×
\n'; tIcon = ''; tCaption = '
\n' + '
\n' + '
\n'; //noinspection HtmlUnknownAttribute tBtnDefault = ''; tBtnLink = '{icon}{label}'; tBtnBrowse = '
{icon}{label}
'; tModal = ''; tProgress = '
\n' + '
\n' + ' {percent}%\n' + '
\n' + '
'; tFooter = ''; tActions = '
\n' + ' \n' + '
{indicator}
\n' + '
\n' + '
'; tActionDelete = '\n'; tActionUpload = '\n'; tZoom = '\n'; tGeneric = '
\n' + ' {content}\n' + ' {footer}\n' + '
\n'; tHtml = '
\n' + ' \n' + ' ' + DEFAULT_PREVIEW + '\n' + ' \n' + ' {footer}\n' + '
'; tImage = '
\n' + ' {caption}\n' + ' {footer}\n' + '
\n'; tText = '
\n' + '
{data}
\n' + ' {zoom}\n' + ' {footer}\n' + '
'; tVideo = '
\n' + ' \n' + ' {footer}\n' + '
\n'; tAudio = '
\n' + ' \n' + ' {footer}\n' + '
'; tFlash = '
\n' + ' \n' + OBJECT_PARAMS + ' ' + DEFAULT_PREVIEW + '\n' + ' \n' + ' {footer}\n' + '
\n'; tObject = '
\n' + ' \n' + ' \n' + OBJECT_PARAMS + ' ' + DEFAULT_PREVIEW + '\n' + ' \n' + ' {footer}\n' + '
'; tOther = '
\n' + '
\n' + ' ' + DEFAULT_PREVIEW + '\n' + '
\n' + ' \n' + '
'; defaultLayoutTemplates = { main1: tMain1, main2: tMain2, preview: tPreview, close: tClose, zoom: tZoom, icon: tIcon, caption: tCaption, modal: tModal, progress: tProgress, footer: tFooter, actions: tActions, actionDelete: tActionDelete, actionUpload: tActionUpload, btnDefault: tBtnDefault, btnLink: tBtnLink, btnBrowse: tBtnBrowse }; defaultPreviewTemplates = { generic: tGeneric, html: tHtml, image: tImage, text: tText, video: tVideo, audio: tAudio, flash: tFlash, object: tObject, other: tOther }; defaultPreviewTypes = ['image', 'html', 'text', 'video', 'audio', 'flash', 'object']; defaultPreviewSettings = { image: {width: "auto", height: "160px"}, html: {width: "213px", height: "160px"}, text: {width: "160px", height: "136px"}, video: {width: "213px", height: "160px"}, audio: {width: "213px", height: "80px"}, flash: {width: "213px", height: "160px"}, object: {width: "160px", height: "160px"}, other: {width: "160px", height: "160px"} }; defaultFileTypeSettings = { image: function (vType, vName) { return compare(vType, 'image.*') || compare(vName, /\.(gif|png|jpe?g)$/i); }, html: function (vType, vName) { return compare(vType, 'text/html') || compare(vName, /\.(htm|html)$/i); }, text: function (vType, vName) { return compare(vType, 'text.*') || compare(vType, /\.(xml|javascript)$/i) || compare(vName, /\.(txt|md|csv|nfo|ini|json|php|js|css)$/i); }, video: function (vType, vName) { return compare(vType, 'video.*') && (compare(vType, /(ogg|mp4|mp?g|webm|3gp)$/i) || compare(vName, /\.(og?|mp4|webm|mp?g|3gp)$/i)); }, audio: function (vType, vName) { return compare(vType, 'audio.*') && (compare(vType, /(ogg|mp3|mp?g|wav)$/i) || compare(vName, /\.(og?|mp3|mp?g|wav)$/i)); }, flash: function (vType, vName) { return compare(vType, 'application/x-shockwave-flash', true) || compare(vName, /\.(swf)$/i); }, object: function (vType, vName) { return compare(vType, 'application/pdf', true) || compare(vName, /\.(pdf)$/i); }, other: function () { return true; } }; isEmpty = function (value, trim) { return value === undefined || value === null || value.length === 0 || (trim && $.trim(value) === ''); }; isArray = function (a) { return Array.isArray(a) || Object.prototype.toString.call(a) === '[object Array]'; }; isSet = function (needle, haystack) { return (typeof haystack === 'object' && needle in haystack); }; getElement = function (options, param, value) { return (isEmpty(options) || isEmpty(options[param])) ? value : $(options[param]); }; uniqId = function () { return Math.round(new Date().getTime() + (Math.random() * 100)); }; htmlEncode = function (str) { return str.replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); }; replaceTags = function (str, tags) { var out = str; if (!tags) { return out; } $.each(tags, function (key, value) { if (typeof value === "function") { value = value(); } out = out.split(key).join(value); }); return out; }; cleanMemory = function ($thumb) { var data = $thumb.is('img') ? $thumb.attr('src') : $thumb.find('source').attr('src'); /** @namespace objUrl.revokeObjectURL */ objUrl.revokeObjectURL(data); }; FileInput = function (element, options) { var self = this; self.$element = $(element); if (!self._validate()) { return; } self.isPreviewable = hasFileAPISupport(); self.isIE9 = isIE(9); self.isIE10 = isIE(10); if (self.isPreviewable || self.isIE9) { self._init(options); self._listen(); } else { self.$element.removeClass('file-loading'); } }; FileInput.prototype = { constructor: FileInput, _init: function (options) { var self = this, $el = self.$element, t; $.each(options, function (key, value) { switch (key) { case 'minFileCount': case 'maxFileCount': case 'maxFileSize': self[key] = getNum(value); break; default: self[key] = value; break; } }); self.fileInputCleared = false; self.fileBatchCompleted = true; if (!self.isPreviewable) { self.showPreview = false; } self.uploadFileAttr = !isEmpty($el.attr('name')) ? $el.attr('name') : 'file_data'; self.reader = null; self.formdata = {}; self.clearStack(); self.uploadCount = 0; self.uploadStatus = {}; self.uploadLog = []; self.uploadAsyncCount = 0; self.loadedImages = []; self.totalImagesCount = 0; self.ajaxRequests = []; self.isError = false; self.ajaxAborted = false; self.cancelling = false; t = self._getLayoutTemplate('progress'); self.progressTemplate = t.replace('{class}', self.progressClass); self.progressCompleteTemplate = t.replace('{class}', self.progressCompleteClass); self.progressErrorTemplate = t.replace('{class}', self.progressErrorClass); self.dropZoneEnabled = hasDragDropSupport() && self.dropZoneEnabled; self.isDisabled = self.$element.attr('disabled') || self.$element.attr('readonly'); self.isUploadable = hasFileUploadSupport() && !isEmpty(self.uploadUrl); self.slug = typeof options.slugCallback === "function" ? options.slugCallback : self._slugDefault; self.mainTemplate = self.showCaption ? self._getLayoutTemplate('main1') : self._getLayoutTemplate('main2'); self.captionTemplate = self._getLayoutTemplate('caption'); self.previewGenericTemplate = self._getPreviewTemplate('generic'); if (self.resizeImage && (self.maxImageWidth || self.maxImageHeight)) { self.imageCanvas = document.createElement('canvas'); self.imageCanvasContext = self.imageCanvas.getContext('2d'); } if (isEmpty(self.$element.attr('id'))) { self.$element.attr('id', uniqId()); } if (self.$container === undefined) { self.$container = self._createContainer(); } else { self._refreshContainer(); } self.$dropZone = self.$container.find('.file-drop-zone'); self.$progress = self.$container.find('.kv-upload-progress'); self.$btnUpload = self.$container.find('.fileinput-upload'); self.$captionContainer = getElement(options, 'elCaptionContainer', self.$container.find('.file-caption')); self.$caption = getElement(options, 'elCaptionText', self.$container.find('.file-caption-name')); self.$previewContainer = getElement(options, 'elPreviewContainer', self.$container.find('.file-preview')); self.$preview = getElement(options, 'elPreviewImage', self.$container.find('.file-preview-thumbnails')); self.$previewStatus = getElement(options, 'elPreviewStatus', self.$container.find('.file-preview-status')); self.$errorContainer = getElement(options, 'elErrorContainer', self.$previewContainer.find('.kv-fileinput-error')); if (!isEmpty(self.msgErrorClass)) { addCss(self.$errorContainer, self.msgErrorClass); } self.$errorContainer.hide(); self.fileActionSettings = $.extend(true, defaultFileActionSettings, options.fileActionSettings); self.previewInitId = "preview-" + uniqId(); self.id = self.$element.attr('id'); previewCache.init(self); self._initPreview(true); self._initPreviewDeletes(); self.options = options; self._setFileDropZoneTitle(); self.$element.removeClass('file-loading'); if (self.$element.attr('disabled')) { self.disable(); } }, _validate: function () { var self = this, $exception; if (self.$element.attr('type') === 'file') { return true; } $exception = '
' + '

Invalid Input Type

' + 'You must set an input type = file for bootstrap-fileinput plugin to initialize.' + '
'; self.$element.after($exception); return false; }, _errorsExist: function () { var self = this, $err; if (self.$errorContainer.find('li').length) { return true; } $err = $(document.createElement('div')).html(self.$errorContainer.html()); $err.find('span.kv-error-close').remove(); $err.find('ul').remove(); return $.trim($err.text()).length ? true : false; }, _errorHandler: function (evt, caption) { var self = this, err = evt.target.error; /** @namespace err.NOT_FOUND_ERR */ /** @namespace err.SECURITY_ERR */ /** @namespace err.NOT_READABLE_ERR */ if (err.code === err.NOT_FOUND_ERR) { self._showError(self.msgFileNotFound.replace('{name}', caption)); } else if (err.code === err.SECURITY_ERR) { self._showError(self.msgFileSecured.replace('{name}', caption)); } else if (err.code === err.NOT_READABLE_ERR) { self._showError(self.msgFileNotReadable.replace('{name}', caption)); } else if (err.code === err.ABORT_ERR) { self._showError(self.msgFilePreviewAborted.replace('{name}', caption)); } else { self._showError(self.msgFilePreviewError.replace('{name}', caption)); } }, _addError: function (msg) { var self = this, $error = self.$errorContainer; if (msg && $error.length) { $error.html(self.errorCloseButton + msg); handler($error.find('.kv-error-close'), 'click', function () { $error.fadeOut('slow'); }); } }, _resetErrors: function (fade) { var self = this, $error = self.$errorContainer; self.isError = false; self.$container.removeClass('has-error'); $error.html(''); if (fade) { $error.fadeOut('slow'); } else { $error.hide(); } }, _showFolderError: function (folders) { var self = this, $error = self.$errorContainer, msg; if (!folders) { return; } msg = self.msgFoldersNotAllowed.replace(/\{n}/g, folders); self._addError(msg); addCss(self.$container, 'has-error'); $error.fadeIn(800); self._raise('filefoldererror', [folders, msg]); }, _showUploadError: function (msg, params, event) { var self = this, $error = self.$errorContainer, ev = event || 'fileuploaderror', e = params && params.id ? '
  • ' + msg + '
  • ' : '
  • ' + msg + '
  • '; if ($error.find('ul').length === 0) { self._addError(''); } else { $error.find('ul').append(e); } $error.fadeIn(800); self._raise(ev, [params, msg]); self.$container.removeClass('file-input-new'); addCss(self.$container, 'has-error'); return true; }, _showError: function (msg, params, event) { var self = this, $error = self.$errorContainer, ev = event || 'fileerror'; params = params || {}; params.reader = self.reader; self._addError(msg); $error.fadeIn(800); self._raise(ev, [params, msg]); if (!self.isUploadable) { self._clearFileInput(); } self.$container.removeClass('file-input-new'); addCss(self.$container, 'has-error'); self.$btnUpload.attr('disabled', true); return true; }, _noFilesError: function (params) { var self = this, label = self.minFileCount > 1 ? self.filePlural : self.fileSingle, msg = self.msgFilesTooLess.replace('{n}', self.minFileCount).replace('{files}', label), $error = self.$errorContainer; self._addError(msg); self.isError = true; self._updateFileDetails(0); $error.fadeIn(800); self._raise('fileerror', [params, msg]); self._clearFileInput(); addCss(self.$container, 'has-error'); }, _parseError: function (jqXHR, errorThrown, fileName) { /** @namespace jqXHR.responseJSON */ var self = this, errMsg = $.trim(errorThrown + ''), dot = errMsg.slice(-1) === '.' ? '' : '.', text = jqXHR.responseJSON !== undefined && jqXHR.responseJSON.error !== undefined ? jqXHR.responseJSON.error : jqXHR.responseText; if (self.cancelling && self.msgUploadAborted) { errMsg = self.msgUploadAborted; } if (self.showAjaxErrorDetails && text) { text = $.trim(text.replace(/\n\s*\n/g, '\n')); text = text.length > 0 ? '
    ' + text + '
    ' : ''; errMsg += dot + text; } else { errMsg += dot; } self.cancelling = false; return fileName ? '' + fileName + ': ' + errMsg : errMsg; }, _parseFileType: function (file) { var self = this, isValid, vType, cat, i; for (i = 0; i < defaultPreviewTypes.length; i += 1) { cat = defaultPreviewTypes[i]; isValid = isSet(cat, self.fileTypeSettings) ? self.fileTypeSettings[cat] : defaultFileTypeSettings[cat]; vType = isValid(file.type, file.name) ? cat : ''; if (!isEmpty(vType)) { return vType; } } return 'other'; }, _parseFilePreviewIcon: function (content, fname) { var self = this, ext, icn = self.previewFileIcon; if (fname && fname.indexOf('.') > -1) { ext = fname.split('.').pop(); if (self.previewFileIconSettings && self.previewFileIconSettings[ext]) { icn = self.previewFileIconSettings[ext]; } if (self.previewFileExtSettings) { $.each(self.previewFileExtSettings, function (key, func) { if (self.previewFileIconSettings[key] && func(ext)) { icn = self.previewFileIconSettings[key]; } }); } } if (content.indexOf('{previewFileIcon}') > -1) { return content.replace(/\{previewFileIconClass}/g, self.previewFileIconClass).replace( /\{previewFileIcon}/g, icn); } return content; }, _raise: function (event, params) { var self = this, e = $.Event(event); if (params !== undefined) { self.$element.trigger(e, params); } else { self.$element.trigger(e); } if (e.isDefaultPrevented()) { return false; } if (!e.result) { return e.result; } switch (event) { // ignore these events case 'filebatchuploadcomplete': case 'filebatchuploadsuccess': case 'fileuploaded': case 'fileclear': case 'filecleared': case 'filereset': case 'fileerror': case 'filefoldererror': case 'fileuploaderror': case 'filebatchuploaderror': case 'filedeleteerror': case 'filecustomerror': case 'filesuccessremove': break; // receive data response via `filecustomerror` event` default: self.ajaxAborted = e.result; break; } return true; }, _listen: function () { var self = this, $el = self.$element, $form = $el.closest('form'), $cont = self.$container; handler($el, 'change', $.proxy(self._change, self)); handler(self.$btnFile, 'click', $.proxy(self._browse, self)); handler($form, 'reset', $.proxy(self.reset, self)); handler($cont.find('.fileinput-remove:not([disabled])'), 'click', $.proxy(self.clear, self)); handler($cont.find('.fileinput-cancel'), 'click', $.proxy(self.cancel, self)); self._initDragDrop(); if (!self.isUploadable) { handler($form, 'submit', $.proxy(self._submitForm, self)); } handler(self.$container.find('.fileinput-upload'), 'click', $.proxy(self._uploadClick, self)); }, _initDragDrop: function () { var self = this, $zone = self.$dropZone; if (self.isUploadable && self.dropZoneEnabled && self.showPreview) { handler($zone, 'dragenter dragover', $.proxy(self._zoneDragEnter, self)); handler($zone, 'dragleave', $.proxy(self._zoneDragLeave, self)); handler($zone, 'drop', $.proxy(self._zoneDrop, self)); handler($(document), 'dragenter dragover drop', self._zoneDragDropInit); } }, _zoneDragDropInit: function (e) { e.stopPropagation(); e.preventDefault(); }, _zoneDragEnter: function (e) { var self = this, hasFiles = $.inArray('Files', e.originalEvent.dataTransfer.types) > -1; self._zoneDragDropInit(e); if (self.isDisabled || !hasFiles) { e.originalEvent.dataTransfer.effectAllowed = 'none'; e.originalEvent.dataTransfer.dropEffect = 'none'; return; } addCss(self.$dropZone, 'file-highlighted'); }, _zoneDragLeave: function (e) { var self = this; self._zoneDragDropInit(e); if (self.isDisabled) { return; } self.$dropZone.removeClass('file-highlighted'); }, _zoneDrop: function (e) { var self = this; e.preventDefault(); /** @namespace e.originalEvent.dataTransfer */ if (self.isDisabled || isEmpty(e.originalEvent.dataTransfer.files)) { return; } self._change(e, 'dragdrop'); self.$dropZone.removeClass('file-highlighted'); }, _uploadClick: function (e) { var self = this, $btn = self.$container.find('.fileinput-upload'), $form, isEnabled = !$btn.hasClass('disabled') && isEmpty($btn.attr('disabled')); if (e && e.isDefaultPrevented()) { return; } if (!self.isUploadable) { if (isEnabled && $btn.attr('type') !== 'submit') { $form = $btn.closest('form'); // downgrade to normal form submit if possible if ($form.length) { $form.trigger('submit'); } e.preventDefault(); } return; } e.preventDefault(); if (isEnabled) { self.upload(); } }, _submitForm: function () { var self = this, $el = self.$element, files = $el.get(0).files; if (files && self.minFileCount > 0 && self._getFileCount(files.length) < self.minFileCount) { self._noFilesError({}); return false; } return !self._abort({}); }, _clearPreview: function () { var self = this, $thumbs = !self.showUploadedThumbs ? self.$preview.find('.file-preview-frame') : self.$preview.find('.file-preview-frame:not(.file-preview-success)'); $thumbs.remove(); if (!self.$preview.find('.file-preview-frame').length || !self.showPreview) { self._resetUpload(); } self._validateDefaultPreview(); }, _initPreview: function (isInit) { var self = this, cap = self.initialCaption || '', out; if (!previewCache.count(self.id)) { self._clearPreview(); if (isInit) { self._setCaption(cap); } else { self._initCaption(); } return; } out = previewCache.out(self.id); cap = isInit && self.initialCaption ? self.initialCaption : out.caption; self.$preview.html(out.content); self._setCaption(cap); if (!isEmpty(out.content)) { self.$container.removeClass('file-input-new'); } }, _initPreviewDeletes: function () { var self = this, deleteExtraData = self.deleteExtraData || {}, resetProgress = function () { var hasFiles = self.isUploadable ? previewCache.count(self.id) : self.$element.get(0).files.length; if (self.$preview.find('.kv-file-remove').length === 0 && !hasFiles) { self.reset(); self.initialCaption = ''; } }; self.$preview.find('.kv-file-remove').each(function () { var $el = $(this), vUrl = $el.data('url') || self.deleteUrl, vKey = $el.data('key'); if (isEmpty(vUrl) || vKey === undefined) { return; } var $frame = $el.closest('.file-preview-frame'), cache = previewCache.data[self.id], settings, params, index = $frame.data('fileindex'), config, extraData; index = parseInt(index.replace('init_', '')); config = isEmpty(cache.config) && isEmpty(cache.config[index]) ? null : cache.config[index]; extraData = isEmpty(config) || isEmpty(config.extra) ? deleteExtraData : config.extra; if (typeof extraData === "function") { extraData = extraData(); } params = {id: $el.attr('id'), key: vKey, extra: extraData}; settings = $.extend(true, {}, { url: vUrl, type: 'POST', dataType: 'json', data: $.extend(true, {}, {key: vKey}, extraData), beforeSend: function (jqXHR) { self.ajaxAborted = false; self._raise('filepredelete', [vKey, jqXHR, extraData]); if (self.ajaxAborted) { jqXHR.abort(); } else { addCss($frame, 'file-uploading'); addCss($el, 'disabled'); } }, success: function (data, textStatus, jqXHR) { var n, cap; if (isEmpty(data) || isEmpty(data.error)) { previewCache.unset(self.id, index); n = previewCache.count(self.id); cap = n > 0 ? self._getMsgSelected(n) : ''; self._raise('filedeleted', [vKey, jqXHR, extraData]); self._setCaption(cap); } else { params.jqXHR = jqXHR; params.response = data; self._showError(data.error, params, 'filedeleteerror'); $frame.removeClass('file-uploading'); $el.removeClass('disabled'); resetProgress(); return; } $frame.removeClass('file-uploading').addClass('file-deleted'); $frame.fadeOut('slow', function () { self._clearObjects($frame); $frame.remove(); resetProgress(); if (!n && self.getFileStack().length === 0) { self._setCaption(''); self.reset(); } }); }, error: function (jqXHR, textStatus, errorThrown) { var errMsg = self._parseError(jqXHR, errorThrown); params.jqXHR = jqXHR; params.response = {}; self._showError(errMsg, params, 'filedeleteerror'); $frame.removeClass('file-uploading'); resetProgress(); } }, self.ajaxDeleteSettings); handler($el, 'click', function () { if (!self._validateMinCount()) { return false; } $.ajax(settings); }); }); }, _clearObjects: function ($el) { $el.find('video audio').each(function () { this.pause(); $(this).remove(); }); $el.find('img object div').each(function () { $(this).remove(); }); }, _clearFileInput: function () { var self = this, $el = self.$element, $srcFrm, $tmpFrm, $tmpEl; if (isEmpty($el.val())) { return; } // Fix for IE ver < 11, that does not clear file inputs. Requires a sequence of steps to prevent IE // crashing but still allow clearing of the file input. if (self.isIE9 || self.isIE10) { $srcFrm = $el.closest('form'); $tmpFrm = $(document.createElement('form')); $tmpEl = $(document.createElement('div')); $el.before($tmpEl); if ($srcFrm.length) { $srcFrm.after($tmpFrm); } else { $tmpEl.after($tmpFrm); } $tmpFrm.append($el).trigger('reset'); $tmpEl.before($el).remove(); $tmpFrm.remove(); } else { // normal input clear behavior for other sane browsers $el.val(''); } self.fileInputCleared = true; }, _resetUpload: function () { var self = this; self.uploadCache = {content: [], config: [], tags: [], append: true}; self.uploadCount = 0; self.uploadStatus = {}; self.uploadLog = []; self.uploadAsyncCount = 0; self.loadedImages = []; self.totalImagesCount = 0; self.$btnUpload.removeAttr('disabled'); self._setProgress(0); addCss(self.$progress, 'hide'); self._resetErrors(false); self.ajaxAborted = false; self.ajaxRequests = []; self._resetCanvas(); }, _resetCanvas: function () { var self = this; if (self.canvas && self.imageCanvasContext) { self.imageCanvasContext.clearRect(0, 0, self.canvas.width, self.canvas.height); } }, _hasInitialPreview: function () { var self = this; return !self.overwriteInitial && previewCache.count(self.id); }, _resetPreview: function () { var self = this, out, cap; if (previewCache.count(self.id)) { out = previewCache.out(self.id); self.$preview.html(out.content); cap = self.initialCaption ? self.initialCaption : out.caption; self._setCaption(cap); } else { self._clearPreview(); self._initCaption(); } }, _clearDefaultPreview: function () { var self = this; self.$preview.find('.file-default-preview').remove(); }, _validateDefaultPreview: function () { var self = this; if (!self.showPreview || isEmpty(self.defaultPreviewContent)) { return; } self.$preview.html('
    ' + self.defaultPreviewContent + '
    '); self.$container.removeClass('file-input-new'); }, _resetPreviewThumbs: function (isAjax) { var self = this, out; if (isAjax) { self._clearPreview(); self.clearStack(); return; } if (self._hasInitialPreview()) { out = previewCache.out(self.id); self.$preview.html(out.content); self._setCaption(out.caption); self._initPreviewDeletes(); } else { self._clearPreview(); } }, _getLayoutTemplate: function (t) { var self = this, template = isSet(t, self.layoutTemplates) ? self.layoutTemplates[t] : defaultLayoutTemplates[t]; if (isEmpty(self.customLayoutTags)) { return template; } return replaceTags(template, self.customLayoutTags); }, _getPreviewTemplate: function (t) { var self = this, template = isSet(t, self.previewTemplates) ? self.previewTemplates[t] : defaultPreviewTemplates[t]; if (isEmpty(self.customPreviewTags)) { return template; } return replaceTags(template, self.customPreviewTags); }, _getOutData: function (jqXHR, responseData, filesData) { var self = this; jqXHR = jqXHR || {}; responseData = responseData || {}; filesData = filesData || self.filestack.slice(0) || {}; return { form: self.formdata, files: filesData, filenames: self.filenames, extra: self._getExtraData(), response: responseData, reader: self.reader, jqXHR: jqXHR }; }, _getMsgSelected: function (n) { var self = this, strFiles = n === 1 ? self.fileSingle : self.filePlural; return self.msgSelected.replace('{n}', n).replace('{files}', strFiles); }, _getThumbs: function (css) { css = css || ''; return this.$preview.find('.file-preview-frame:not(.file-preview-initial)' + css); }, _getExtraData: function (previewId, index) { var self = this, data = self.uploadExtraData; if (typeof self.uploadExtraData === "function") { data = self.uploadExtraData(previewId, index); } return data; }, _initXhr: function (xhrobj, previewId, fileCount) { var self = this; if (xhrobj.upload) { xhrobj.upload.addEventListener('progress', function (event) { var pct = 0, position = event.loaded || event.position, total = event.total; /** @namespace event.lengthComputable */ if (event.lengthComputable) { pct = Math.ceil(position / total * 100); } if (previewId) { self._setAsyncUploadStatus(previewId, pct, fileCount); } else { self._setProgress(Math.ceil(pct)); } }, false); } return xhrobj; }, _ajaxSubmit: function (fnBefore, fnSuccess, fnComplete, fnError, previewId, index) { var self = this, settings; self._raise('filepreajax', [previewId, index]); self._uploadExtra(previewId, index); settings = $.extend(true, {}, { xhr: function () { var xhrobj = $.ajaxSettings.xhr(); return self._initXhr(xhrobj, previewId, self.getFileStack().length); }, url: self.uploadUrl, type: 'POST', dataType: 'json', data: self.formdata, cache: false, processData: false, contentType: false, beforeSend: fnBefore, success: fnSuccess, complete: fnComplete, error: fnError }, self.ajaxSettings); self.ajaxRequests.push($.ajax(settings)); }, _initUploadSuccess: function (out, $thumb, allFiles) { var self = this, append, data, index, $newThumb, content, config, tags, i; if (!self.showPreview || typeof out !== 'object' || $.isEmptyObject(out)) { return; } if (out.initialPreview !== undefined && out.initialPreview.length > 0) { self.hasInitData = true; content = out.initialPreview || []; config = out.initialPreviewConfig || []; tags = out.initialPreviewThumbTags || []; append = out.append === undefined || out.append ? true : false; self.overwriteInitial = false; if ($thumb !== undefined) { if (!allFiles) { index = previewCache.add(self.id, content, config[0], tags[0], append); data = previewCache.get(self.id, index, false); $newThumb = $(data).hide(); $thumb.after($newThumb).fadeOut('slow', function () { $newThumb.fadeIn('slow').css('display:inline-block'); self._initPreviewDeletes(); self._clearFileInput(); $thumb.remove(); }); } else { i = $thumb.attr('data-fileindex'); self.uploadCache.content[i] = content[0]; self.uploadCache.config[i] = config[0]; self.uploadCache.tags[i] = tags[0]; self.uploadCache.append = append; } } else { previewCache.set(self.id, content, config, tags, append); self._initPreview(); self._initPreviewDeletes(); } } }, _initSuccessThumbs: function () { var self = this; if (!self.showPreview) { return; } self._getThumbs('.file-preview-success').each(function () { var $thumb = $(this), $remove = $thumb.find('.kv-file-remove'); $remove.removeAttr('disabled'); handler($remove, 'click', function () { var out = self._raise('filesuccessremove', [$thumb.attr('id'), $thumb.data('fileindex')]); cleanMemory($thumb); if (out === false) { return; } $thumb.fadeOut('slow', function () { $thumb.remove(); if (!self.$preview.find('.file-preview-frame').length) { self.reset(); } }); }); }); }, _checkAsyncComplete: function () { var self = this, previewId, i; for (i = 0; i < self.filestack.length; i++) { console.log(self.filestack); if (self.filestack[i]) { previewId = self.previewInitId + "-" + i; //console.log(previewId + ' ' + self.uploadLog); if ($.inArray(previewId, self.uploadLog) === -1) { return false; } } } return (self.uploadAsyncCount === self.uploadLog.length); }, _uploadExtra: function (previewId, index) { var self = this, data = self._getExtraData(previewId, index); if (data.length === 0) { return; } $.each(data, function (key, value) { self.formdata.append(key, value); }); }, _uploadSingle: function (i, files, allFiles) { var self = this, total = self.getFileStack().length, formdata = new FormData(), outData, previewId = self.previewInitId + "-" + i, $thumb, chkComplete, $btnUpload, $btnDelete, hasPostData = self.filestack.length > 0 || !$.isEmptyObject(self.uploadExtraData), fnBefore, fnSuccess, fnComplete, fnError, updateUploadLog, params = {id: previewId, index: i}; self.formdata = formdata; if (self.showPreview) { $thumb = $('#' + previewId + ':not(.file-preview-initial)'); $btnUpload = $thumb.find('.kv-file-upload'); $btnDelete = $thumb.find('.kv-file-remove'); $('#' + previewId).find('.file-thumb-progress').removeClass('hide'); } if (total === 0 || !hasPostData || ($btnUpload && $btnUpload.hasClass('disabled')) || self._abort(params)) { return; } updateUploadLog = function (i, previewId) { self.updateStack(i, undefined); self.uploadLog.push(previewId); if (self._checkAsyncComplete()) { self.fileBatchCompleted = true; } }; chkComplete = function () { if (!self.fileBatchCompleted) { return; } setTimeout(function () { if (self.showPreview) { previewCache.set( self.id, self.uploadCache.content, self.uploadCache.config, self.uploadCache.tags, self.uploadCache.append ); if (self.hasInitData) { self._initPreview(); self._initPreviewDeletes(); } } self.unlock(); self._clearFileInput(); self._raise('filebatchuploadcomplete', [self.filestack, self._getExtraData()]); self.uploadCount = 0; self.uploadStatus = {}; self.uploadLog = []; self._setProgress(100); }, 100); }; fnBefore = function (jqXHR) { outData = self._getOutData(jqXHR); self.fileBatchCompleted = false; if (self.showPreview) { if (!$thumb.hasClass('file-preview-success')) { self._setThumbStatus($thumb, 'Loading'); addCss($thumb, 'file-uploading'); } $btnUpload.attr('disabled', true); $btnDelete.attr('disabled', true); } if (!allFiles) { self.lock(); } self._raise('filepreupload', [outData, previewId, i]); $.extend(true, params, outData); if (self._abort(params)) { jqXHR.abort(); self._setProgressCancelled(); } }; fnSuccess = function (data, textStatus, jqXHR) { outData = self._getOutData(jqXHR, data); $.extend(true, params, outData); setTimeout(function () { if (isEmpty(data) || isEmpty(data.error)) { if (self.showPreview) { self._setThumbStatus($thumb, 'Success'); $btnUpload.hide(); self._initUploadSuccess(data, $thumb, allFiles); } self._raise('fileuploaded', [outData, previewId, i]); if (!allFiles) { self.updateStack(i, undefined); } else { updateUploadLog(i, previewId); } } else { self._showUploadError(data.error, params); self._setPreviewError($thumb, i); if (allFiles) { updateUploadLog(i, previewId); } } }, 100); }; fnComplete = function () { setTimeout(function () { if (self.showPreview) { $btnUpload.removeAttr('disabled'); $btnDelete.removeAttr('disabled'); $thumb.removeClass('file-uploading'); } if (!allFiles) { self.unlock(false); self._clearFileInput(); } else { chkComplete(); } self._initSuccessThumbs(); }, 100); }; fnError = function (jqXHR, textStatus, errorThrown) { var errMsg = self._parseError(jqXHR, errorThrown, (allFiles ? files[i].name : null)); setTimeout(function () { if (allFiles) { updateUploadLog(i, previewId); } self.uploadStatus[previewId] = 100; self._setPreviewError($thumb, i); $.extend(true, params, self._getOutData(jqXHR)); self._showUploadError(errMsg, params); }, 100); }; formdata.append(self.uploadFileAttr, files[i], self.filenames[i]); formdata.append('file_id', i); self._ajaxSubmit(fnBefore, fnSuccess, fnComplete, fnError, previewId, i); }, _uploadBatch: function () { var self = this, files = self.filestack, total = files.length, params = {}, fnBefore, fnSuccess, fnError, fnComplete, hasPostData = self.filestack.length > 0 || !$.isEmptyObject(self.uploadExtraData), setAllUploaded; self.formdata = new FormData(); if (total === 0 || !hasPostData || self._abort(params)) { return; } setAllUploaded = function () { $.each(files, function (key) { self.updateStack(key, undefined); }); self._clearFileInput(); }; fnBefore = function (jqXHR) { self.lock(); var outData = self._getOutData(jqXHR); if (self.showPreview) { self._getThumbs().each(function () { var $thumb = $(this), $btnUpload = $thumb.find('.kv-file-upload'), $btnDelete = $thumb.find('.kv-file-remove'); if (!$thumb.hasClass('file-preview-success')) { self._setThumbStatus($thumb, 'Loading'); addCss($thumb, 'file-uploading'); } $btnUpload.attr('disabled', true); $btnDelete.attr('disabled', true); }); } self._raise('filebatchpreupload', [outData]); if (self._abort(outData)) { jqXHR.abort(); self._setProgressCancelled(); } }; fnSuccess = function (data, textStatus, jqXHR) { /** @namespace data.errorkeys */ var outData = self._getOutData(jqXHR, data), $thumbs = self._getThumbs(), key = 0, keys = isEmpty(data) || isEmpty(data.errorkeys) ? [] : data.errorkeys; if (isEmpty(data) || isEmpty(data.error)) { self._raise('filebatchuploadsuccess', [outData]); setAllUploaded(); if (self.showPreview) { $thumbs.each(function () { var $thumb = $(this), $btnUpload = $thumb.find('.kv-file-upload'); $thumb.find('.kv-file-upload').hide(); self._setThumbStatus($thumb, 'Success'); $thumb.removeClass('file-uploading'); $btnUpload.removeAttr('disabled'); }); self._initUploadSuccess(data); } else { self.reset(); } } else { if (self.showPreview) { $thumbs.each(function () { var $thumb = $(this), $btnDelete = $thumb.find('.kv-file-remove'), $btnUpload = $thumb.find('.kv-file-upload'); $thumb.removeClass('file-uploading'); $btnUpload.removeAttr('disabled'); $btnDelete.removeAttr('disabled'); if (keys.length === 0) { self._setPreviewError($thumb); return; } if ($.inArray(key, keys) !== -1) { self._setPreviewError($thumb); } else { $thumb.find('.kv-file-upload').hide(); self._setThumbStatus($thumb, 'Success'); self.updateStack(key, undefined); } key++; }); self._initUploadSuccess(data); } self._showUploadError(data.error, outData, 'filebatchuploaderror'); } }; fnComplete = function () { self._setProgress(100); self.unlock(); self._initSuccessThumbs(); self._clearFileInput(); self._raise('filebatchuploadcomplete', [self.filestack, self._getExtraData()]); }; fnError = function (jqXHR, textStatus, errorThrown) { var outData = self._getOutData(jqXHR), errMsg = self._parseError(jqXHR, errorThrown); self._showUploadError(errMsg, outData, 'filebatchuploaderror'); self.uploadFileCount = total - 1; if (!self.showPreview) { return; } self._getThumbs().each(function () { var $thumb = $(this), key = $thumb.attr('data-fileindex'); $thumb.removeClass('file-uploading'); if (self.filestack[key] !== undefined) { self._setPreviewError($thumb); } }); self._getThumbs().removeClass('file-uploading'); self._getThumbs(' .kv-file-upload').removeAttr('disabled'); self._getThumbs(' .kv-file-delete').removeAttr('disabled'); }; $.each(files, function (key, data) { if (!isEmpty(files[key])) { self.formdata.append(self.uploadFileAttr, data, self.filenames[key]); } }); self._ajaxSubmit(fnBefore, fnSuccess, fnComplete, fnError); }, _uploadExtraOnly: function () { var self = this, params = {}, fnBefore, fnSuccess, fnComplete, fnError; self.formdata = new FormData(); if (self._abort(params)) { return; } fnBefore = function (jqXHR) { self.lock(); var outData = self._getOutData(jqXHR); self._raise('filebatchpreupload', [outData]); self._setProgress(50); params.data = outData; params.xhr = jqXHR; if (self._abort(params)) { jqXHR.abort(); self._setProgressCancelled(); } }; fnSuccess = function (data, textStatus, jqXHR) { var outData = self._getOutData(jqXHR, data); if (isEmpty(data) || isEmpty(data.error)) { self._raise('filebatchuploadsuccess', [outData]); self._clearFileInput(); self._initUploadSuccess(data); } else { self._showUploadError(data.error, outData, 'filebatchuploaderror'); } }; fnComplete = function () { self._setProgress(100); self.unlock(); self._clearFileInput(); self._raise('filebatchuploadcomplete', [self.filestack, self._getExtraData()]); }; fnError = function (jqXHR, textStatus, errorThrown) { var outData = self._getOutData(jqXHR), errMsg = self._parseError(jqXHR, errorThrown); params.data = outData; self._showUploadError(errMsg, outData, 'filebatchuploaderror'); }; self._ajaxSubmit(fnBefore, fnSuccess, fnComplete, fnError); }, _initFileActions: function () { var self = this; if (!self.showPreview) { return; } self.$preview.find('.kv-file-remove').each(function () { var $el = $(this), $frame = $el.closest('.file-preview-frame'), hasError, id = $frame.attr('id'), ind = $frame.attr('data-fileindex'), n, cap, status; handler($el, 'click', function () { status = self._raise('filepreremove', [id, ind]); if (status === false || !self._validateMinCount()) { return false; } hasError = $frame.hasClass('file-preview-error'); cleanMemory($frame); $frame.fadeOut('slow', function () { self.updateStack(ind, undefined); self._clearObjects($frame); $frame.remove(); if (id && hasError) { self.$errorContainer.find('li[data-file-id="' + id + '"]').fadeOut('fast', function () { $(this).remove(); if (!self._errorsExist()) { self._resetErrors(); } }); } var filestack = self.getFileStack(true), len = filestack.length, chk = previewCache.count( self.id), hasThumb = self.showPreview && self.$preview.find('.file-preview-frame').length; self._clearFileInput(); if (len === 0 && chk === 0 && !hasThumb) { self.reset(); } else { n = chk + len; cap = n > 1 ? self._getMsgSelected(n) : (filestack[0] ? self._getFileNames()[0] : ''); self._setCaption(cap); } self._raise('fileremoved', [id, ind]); }); }); }); self.$preview.find('.kv-file-upload').each(function () { var $el = $(this); handler($el, 'click', function () { var $frame = $el.closest('.file-preview-frame'), ind = $frame.attr('data-fileindex'); if (!$frame.hasClass('file-preview-error')) { self._uploadSingle(ind, self.filestack, false); } }); }); }, _hideFileIcon: function () { if (this.overwriteInitial) { this.$captionContainer.find('.kv-caption-icon').hide(); } }, _showFileIcon: function () { this.$captionContainer.find('.kv-caption-icon').show(); }, _previewDefault: function (file, previewId, isDisabled) { if (!this.showPreview) { return; } var self = this, frameClass = '', fname = file ? file.name : '', /** @namespace objUrl.createObjectURL */ data = objUrl.createObjectURL(file), ind = previewId.slice(previewId.lastIndexOf('-') + 1), config = self.previewSettings.other || defaultPreviewSettings.other, footer = self._renderFileFooter(file.name, config.width), previewOtherTemplate = self._parseFilePreviewIcon(self._getPreviewTemplate('other'), fname); if (isDisabled === true) { if (!self.isUploadable) { footer += '
    ' + self.fileActionSettings.indicatorError + '
    '; } } self._clearDefaultPreview(); self.$preview.append("\n" + previewOtherTemplate .replace(/\{previewId}/g, previewId) .replace(/\{frameClass}/g, frameClass) .replace(/\{fileindex}/g, ind) .replace(/\{caption}/g, self.slug(file.name)) .replace(/\{width}/g, config.width) .replace(/\{height}/g, config.height) .replace(/\{type}/g, file.type) .replace(/\{data}/g, data) .replace(/\{footer}/g, footer)); if (isDisabled === true && self.isUploadable) { self._setThumbStatus($('#' + previewId), 'Error'); } }, _previewFile: function (i, file, theFile, previewId, data) { if (!this.showPreview) { return; } var self = this, cat = self._parseFileType(file), fname = file ? file.name : '', caption = self.slug(fname), content, strText, types = self.allowedPreviewTypes, mimes = self.allowedPreviewMimeTypes, tmplt = self._getPreviewTemplate(cat), chkTypes = types && types.indexOf(cat) >= 0, id, config = isSet(cat, self.previewSettings) ? self.previewSettings[cat] : defaultPreviewSettings[cat], chkMimes = mimes && mimes.indexOf(file.type) !== -1, footer = self._renderFileFooter(caption, config.width), modal = '', ind = previewId.slice(previewId.lastIndexOf('-') + 1); if (chkTypes || chkMimes) { tmplt = self._parseFilePreviewIcon(tmplt, fname.split('.').pop()); if (cat === 'text') { strText = htmlEncode(theFile.target.result); id = 'text-' + uniqId(); content = tmplt.replace(/\{zoom}/g, self._getLayoutTemplate('zoom')); modal = self._getLayoutTemplate('modal').replace('{id}', id) .replace(/\{title}/g, caption) .replace(/\{body}/g, strText).replace(/\{heading}/g, self.msgZoomModalHeading); content = content.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption) .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height) .replace(/\{frameClass}/g, '').replace(/\{zoomInd}/g, self.zoomIndicator) .replace(/\{footer}/g, footer).replace(/\{fileindex}/g, ind) .replace(/\{type}/g, file.type).replace(/\{zoomTitle}/g, self.msgZoomTitle) .replace(/\{dialog}/g, "$('#" + id + "').modal('show')") .replace(/\{data}/g, strText) + modal; } else { content = tmplt.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption) .replace(/\{frameClass}/g, '').replace(/\{type}/g, file.type).replace(/\{fileindex}/g, ind) .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height) .replace(/\{footer}/g, footer).replace(/\{data}/g, data); } self._clearDefaultPreview(); self.$preview.append("\n" + content); self._validateImage(i, previewId, caption, file.type); } else { self._previewDefault(file, previewId); } }, _slugDefault: function (text) { return isEmpty(text) ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_'); }, _readFiles: function (files) { this.reader = new FileReader(); var self = this, $el = self.$element, $preview = self.$preview, reader = self.reader, $container = self.$previewContainer, $status = self.$previewStatus, msgLoading = self.msgLoading, msgProgress = self.msgProgress, previewInitId = self.previewInitId, numFiles = files.length, settings = self.fileTypeSettings, ctr = self.filestack.length, readFile, throwError = function (msg, file, previewId, index) { var p1 = $.extend(true, {}, self._getOutData({}, {}, files), {id: previewId, index: index}), p2 = {id: previewId, index: index, file: file, files: files}; self._previewDefault(file, previewId, true); if (self.isUploadable) { self.addToStack(undefined); } setTimeout(readFile(index + 1), 100); self._initFileActions(); if (self.removeFromPreviewOnError) { $('#' + previewId).remove(); } return self.isUploadable ? self._showUploadError(msg, p1) : self._showError(msg, p2); }; self.loadedImages = []; self.totalImagesCount = 0; $.each(files, function (key, file) { var func = self.fileTypeSettings.image || defaultFileTypeSettings.image; if (func && func(file.type)) { self.totalImagesCount++; } }); readFile = function (i) { if (isEmpty($el.attr('multiple'))) { numFiles = 1; } if (i >= numFiles) { if (self.isUploadable && self.filestack.length > 0) { self._raise('filebatchselected', [self.getFileStack()]); } else { self._raise('filebatchselected', [files]); } $container.removeClass('file-thumb-loading'); $status.html(''); return; } var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i], caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '', previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk, fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '), fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', '); if (!isEmpty(fileExt)) { fileExtExpr = new RegExp('\\.(' + fileExt.join('|') + ')$', 'i'); } fileSize = fileSize.toFixed(2); if (self.maxFileSize > 0 && fileSize > self.maxFileSize) { msg = self.msgSizeTooLarge.replace('{name}', caption) .replace('{size}', fileSize) .replace('{maxSize}', self.maxFileSize); self.isError = throwError(msg, file, previewId, i); return; } if (!isEmpty(fileTypes) && isArray(fileTypes)) { for (j = 0; j < fileTypes.length; j += 1) { typ = fileTypes[j]; checkFile = settings[typ]; chk = (checkFile !== undefined && checkFile(file.type, caption)); fileCount += isEmpty(chk) ? 0 : chk.length; } if (fileCount === 0) { msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes); self.isError = throwError(msg, file, previewId, i); return; } } if (fileCount === 0 && !isEmpty(fileExt) && isArray(fileExt) && !isEmpty(fileExtExpr)) { chk = compare(caption, fileExtExpr); fileCount += isEmpty(chk) ? 0 : chk.length; if (fileCount === 0) { msg = self.msgInvalidFileExtension.replace('{name}', caption).replace('{extensions}', strExt); self.isError = throwError(msg, file, previewId, i); return; } } if (!self.showPreview) { self.addToStack(file); setTimeout(readFile(i + 1), 100); self._raise('fileloaded', [file, previewId, i, reader]); return; } if ($preview.length > 0 && FileReader !== undefined) { $status.html(msgLoading.replace('{index}', i + 1).replace('{files}', numFiles)); $container.addClass('file-thumb-loading'); reader.onerror = function (evt) { self._errorHandler(evt, caption); }; reader.onload = function (theFile) { self._previewFile(i, file, theFile, previewId, previewData); self._initFileActions(); }; reader.onloadend = function () { msg = msgProgress .replace('{index}', i + 1).replace('{files}', numFiles) .replace('{percent}', 50).replace('{name}', caption); setTimeout(function () { $status.html(msg); self._updateFileDetails(numFiles); readFile(i + 1); }, 100); self._raise('fileloaded', [file, previewId, i, reader]); }; reader.onprogress = function (data) { if (data.lengthComputable) { var fact = (data.loaded / data.total) * 100, progress = Math.ceil(fact); msg = msgProgress.replace('{index}', i + 1).replace('{files}', numFiles) .replace('{percent}', progress).replace('{name}', caption); setTimeout(function () { $status.html(msg); }, 100); } }; isText = isSet('text', settings) ? settings.text : defaultFileTypeSettings.text; if (isText(file.type, caption)) { reader.readAsText(file, self.textEncoding); } else { reader.readAsArrayBuffer(file); } } else { self._previewDefault(file, previewId); setTimeout(function () { readFile(i + 1); self._updateFileDetails(numFiles); }, 100); self._raise('fileloaded', [file, previewId, i, reader]); } self.addToStack(file); }; readFile(0); self._updateFileDetails(numFiles, false); }, _updateFileDetails: function (numFiles) { var self = this, $el = self.$element, fileStack = self.getFileStack(), name = ($el[0].files[0] && $el[0].files[0].name) || (fileStack.length && fileStack[0].name) || '', label = self.slug(name), n = self.isUploadable ? fileStack.length : numFiles, nFiles = previewCache.count(self.id) + n, log = n > 1 ? self._getMsgSelected(nFiles) : label; if (self.isError) { self.$previewContainer.removeClass('file-thumb-loading'); self.$previewStatus.html(''); self.$captionContainer.find('.kv-caption-icon').hide(); } else { self._showFileIcon(); } self._setCaption(log, self.isError); self.$container.removeClass('file-input-new file-input-ajax-new'); if (arguments.length === 1) { self._raise('fileselect', [numFiles, label]); } if (previewCache.count(self.id)) { self._initPreviewDeletes(); } }, _setThumbStatus: function ($thumb, status) { var self = this; if (!self.showPreview) { return; } var icon = 'indicator' + status, msg = icon + 'Title', css = 'file-preview-' + status.toLowerCase(), $indicator = $thumb.find('.file-upload-indicator'), config = self.fileActionSettings; $thumb.removeClass('file-preview-success file-preview-error file-preview-loading'); if (status === 'Error') { $thumb.find('.kv-file-upload').attr('disabled', true); } $indicator.html(config[icon]); $indicator.attr('title', config[msg]); $thumb.addClass(css); }, _setProgressCancelled: function () { var self = this; self._setProgress(100, self.$progress, self.msgCancelled); }, _setProgress: function (p, $el, error) { var self = this, pct = Math.min(p, 100), template = pct < 100 ? self.progressTemplate : (error ? self.progressErrorTemplate : self.progressCompleteTemplate); $el = $el || self.$progress; if (!isEmpty(template)) { $el.html(template.replace(/\{percent}/g, pct)); if (error) { $el.find('[role="progressbar"]').html(error); } } }, _setFileDropZoneTitle: function () { var self = this, $zone = self.$container.find('.file-drop-zone'); $zone.find('.' + self.dropZoneTitleClass).remove(); if (!self.isUploadable || !self.showPreview || $zone.length === 0 || self.getFileStack().length > 0 || !self.dropZoneEnabled) { return; } if ($zone.find('.file-preview-frame').length === 0 && isEmpty(self.defaultPreviewContent)) { $zone.prepend('
    ' + self.dropZoneTitle + '
    '); } self.$container.removeClass('file-input-new'); addCss(self.$container, 'file-input-ajax-new'); }, _setAsyncUploadStatus: function (previewId, pct, total) { var self = this, sum = 0; self._setProgress(pct, $('#' + previewId).find('.file-thumb-progress')); self.uploadStatus[previewId] = pct; $.each(self.uploadStatus, function (key, value) { sum += value; }); self._setProgress(Math.ceil(sum / total)); }, _validateMinCount: function () { var self = this, len = self.isUploadable ? self.getFileStack().length : self.$element.get(0).files.length; if (self.validateInitialCount && self.minFileCount > 0 && self._getFileCount( len - 1) < self.minFileCount) { self._noFilesError({}); return false; } return true; }, _getFileCount: function (fileCount) { var self = this, addCount = 0; if (self.validateInitialCount && !self.overwriteInitial) { addCount = previewCache.count(self.id); fileCount += addCount; } return fileCount; }, _getFileName: function (file) { return file && file.name ? this.slug(file.name) : undefined; }, _getFileNames: function (skipNull) { var self = this; return self.filenames.filter(function (n) { return (skipNull ? n !== undefined : n !== undefined && n !== null); }); }, _setPreviewError: function ($thumb, i, val) { var self = this; if (i) { self.updateStack(i, val); } if (self.removeFromPreviewOnError) { $thumb.remove(); } else { self._setThumbStatus($thumb, 'Error'); } }, _checkDimensions: function (i, chk, $img, $thumb, fname, type, params) { var self = this, msg, dim, tag = chk === 'Small' ? 'min' : 'max', limit = self[tag + 'Image' + type], $imgEl, isValid; if (isEmpty(limit) || !$img.length) { return; } $imgEl = $img[0]; dim = (type === 'Width') ? $imgEl.naturalWidth || $imgEl.width : $imgEl.naturalHeight || $imgEl.height; isValid = chk === 'Small' ? dim >= limit : dim <= limit; if (isValid) { return; } msg = self['msgImage' + type + chk].replace('{name}', fname).replace('{size}', limit); self._showUploadError(msg, params); self._setPreviewError($thumb, i, null); }, _validateImage: function (i, previewId, fname, ftype) { var self = this, $preview = self.$preview, params, w1, w2, $thumb = $preview.find("#" + previewId), $img = $thumb.find('img'); fname = fname || 'Untitled'; if (!$img.length) { return; } handler($img, 'load', function () { w1 = $thumb.width(); w2 = $preview.width(); if (w1 > w2) { $img.css('width', '100%'); $thumb.css('width', '97%'); } params = {ind: i, id: previewId}; self._checkDimensions(i, 'Small', $img, $thumb, fname, 'Width', params); self._checkDimensions(i, 'Small', $img, $thumb, fname, 'Height', params); if (!self.resizeImage) { self._checkDimensions(i, 'Large', $img, $thumb, fname, 'Width', params); self._checkDimensions(i, 'Large', $img, $thumb, fname, 'Height', params); } self._raise('fileimageloaded', [previewId]); self.loadedImages.push({ind: i, img: $img, thumb: $thumb, pid: previewId, typ: ftype}); self._validateAllImages(); objUrl.revokeObjectURL($img.attr('src')); }); }, _validateAllImages: function () { var self = this, i, config, $img, $thumb, pid, ind, params = {}, errFunc; if (self.loadedImages.length !== self.totalImagesCount) { return; } self._raise('fileimagesloaded'); if (!self.resizeImage) { return; } errFunc = self.isUploadable ? self._showUploadError : self._showError; for (i = 0; i < self.loadedImages.length; i++) { config = self.loadedImages[i]; $img = config.img; $thumb = config.thumb; pid = config.pid; ind = config.ind; params = {id: pid, 'index': ind}; if (!self._getResizedImage($img[0], config.typ, pid, ind)) { errFunc(self.msgImageResizeError, params, 'fileimageresizeerror'); self._setPreviewError($thumb, ind); } } self._raise('fileimagesresized'); }, _getResizedImage: function (image, type, pid, ind) { var self = this, width = image.naturalWidth, height = image.naturalHeight, ratio = 1, maxWidth = self.maxImageWidth || width, maxHeight = self.maxImageHeight || height, isValidImage = (width && height), chkWidth, chkHeight, canvas = self.imageCanvas, context = self.imageCanvasContext; if (!isValidImage) { return false; } if (width === maxWidth && height === maxHeight) { return true; } type = type || self.resizeDefaultImageType; chkWidth = width > maxWidth; chkHeight = height > maxHeight; if (self.resizePreference === 'width') { ratio = chkWidth ? maxWidth / width : (chkHeight ? maxHeight / height : 1); } else { ratio = chkHeight ? maxHeight / height : (chkWidth ? maxWidth / width : 1); } self._resetCanvas(); width *= ratio; height *= ratio; canvas.width = width; canvas.height = height; try { context.drawImage(image, 0, 0, width, height); canvas.toBlob(function (blob) { self._raise('fileimageresized', [pid, ind]); self.filestack[ind] = blob; }, type, self.resizeQuality); return true; } catch (err) { return false; } }, _initBrowse: function ($container) { var self = this; self.$btnFile = $container.find('.btn-file'); self.$btnFile.append(self.$element); }, _initCaption: function () { var self = this, cap = self.initialCaption || ''; if (self.overwriteInitial || isEmpty(cap)) { self.$caption.html(''); return false; } self._setCaption(cap); return true; }, _setCaption: function (content, isError) { var self = this, title, out, n, cap, stack = self.getFileStack(); if (!self.$caption.length) { return; } if (isError) { title = $('
    ' + self.msgValidationError + '
    ').text(); n = stack.length; if (n) { cap = n === 1 && stack[0] ? self._getFileNames()[0] : self._getMsgSelected(n); } else { cap = self._getMsgSelected(self.msgNo); } out = '' + self.msgValidationErrorIcon + (isEmpty(content) ? cap : content) + ''; } else { if (isEmpty(content)) { return; } title = $('
    ' + content + '
    ').text(); out = self._getLayoutTemplate('icon') + title; } self.$caption.html(out); self.$caption.attr('title', title); self.$captionContainer.find('.file-caption-ellipsis').attr('title', title); }, _createContainer: function () { var self = this, $container = $(document.createElement("div")) .attr({"class": 'file-input file-input-new'}) .html(self._renderMain()); self.$element.before($container); self._initBrowse($container); return $container; }, _refreshContainer: function () { var self = this, $container = self.$container; $container.before(self.$element); $container.html(self._renderMain()); self._initBrowse($container); }, _renderMain: function () { var self = this, dropCss = (self.isUploadable && self.dropZoneEnabled) ? ' file-drop-zone' : 'file-drop-disabled', close = !self.showClose ? '' : self._getLayoutTemplate('close'), preview = !self.showPreview ? '' : self._getLayoutTemplate('preview') .replace(/\{class}/g, self.previewClass) .replace(/\{dropClass}/g, dropCss), css = self.isDisabled ? self.captionClass + ' file-caption-disabled' : self.captionClass, caption = self.captionTemplate.replace(/\{class}/g, css + ' kv-fileinput-caption'); return self.mainTemplate.replace(/\{class}/g, self.mainClass) .replace(/\{preview}/g, preview) .replace(/\{close}/g, close) .replace(/\{caption}/g, caption) .replace(/\{upload}/g, self._renderButton('upload')) .replace(/\{remove}/g, self._renderButton('remove')) .replace(/\{cancel}/g, self._renderButton('cancel')) .replace(/\{browse}/g, self._renderButton('browse')); }, _renderButton: function (type) { var self = this, tmplt = self._getLayoutTemplate('btnDefault'), css = self[type + 'Class'], title = self[type + 'Title'], icon = self[type + 'Icon'], label = self[type + 'Label'], status = self.isDisabled ? ' disabled' : '', btnType = 'button'; switch (type) { case 'remove': if (!self.showRemove) { return ''; } break; case 'cancel': if (!self.showCancel) { return ''; } css += ' hide'; break; case 'upload': if (!self.showUpload) { return ''; } if (self.isUploadable && !self.isDisabled) { tmplt = self._getLayoutTemplate('btnLink').replace('{href}', self.uploadUrl); } else { btnType = 'submit'; } break; case 'browse': tmplt = self._getLayoutTemplate('btnBrowse'); break; default: return ''; } css += type === 'browse' ? ' btn-file' : ' fileinput-' + type + ' fileinput-' + type + '-button'; if (!isEmpty(label)) { label = ' ' + label + ''; } return tmplt.replace('{type}', btnType) .replace('{css}', css) .replace('{title}', title) .replace('{status}', status) .replace('{icon}', icon) .replace('{label}', label); }, _renderThumbProgress: function () { return '
    ' + this.progressTemplate.replace(/\{percent}/g, '0') + '
    '; }, _renderFileFooter: function (caption, width) { var self = this, config = self.fileActionSettings, footer, out, template = self._getLayoutTemplate( 'footer'); if (self.isUploadable) { footer = template.replace(/\{actions}/g, self._renderFileActions(true, true, false, false, false)); out = footer.replace(/\{caption}/g, caption) .replace(/\{width}/g, width) .replace(/\{progress}/g, self._renderThumbProgress()) .replace(/\{indicator}/g, config.indicatorNew) .replace(/\{indicatorTitle}/g, config.indicatorNewTitle); } else { out = template.replace(/\{actions}/g, '') .replace(/\{caption}/g, caption) .replace(/\{progress}/g, '') .replace(/\{width}/g, width) .replace(/\{indicator}/g, '') .replace(/\{indicatorTitle}/g, ''); } out = replaceTags(out, self.previewThumbTags); return out; }, _renderFileActions: function (showUpload, showDelete, disabled, url, key) { if (!showUpload && !showDelete) { return ''; } var self = this, vUrl = url === false ? '' : ' data-url="' + url + '"', vKey = key === false ? '' : ' data-key="' + key + '"', btnDelete = self._getLayoutTemplate('actionDelete'), btnUpload = '', template = self._getLayoutTemplate('actions'), otherButtons = self.otherActionButtons.replace(/\{dataKey}/g, vKey), config = self.fileActionSettings, removeClass = disabled ? config.removeClass + ' disabled' : config.removeClass; btnDelete = btnDelete .replace(/\{removeClass}/g, removeClass) .replace(/\{removeIcon}/g, config.removeIcon) .replace(/\{removeTitle}/g, config.removeTitle) .replace(/\{dataUrl}/g, vUrl) .replace(/\{dataKey}/g, vKey); if (showUpload) { btnUpload = self._getLayoutTemplate('actionUpload') .replace(/\{uploadClass}/g, config.uploadClass) .replace(/\{uploadIcon}/g, config.uploadIcon) .replace(/\{uploadTitle}/g, config.uploadTitle); } return template .replace(/\{delete}/g, btnDelete) .replace(/\{upload}/g, btnUpload) .replace(/\{other}/g, otherButtons); }, _browse: function (e) { var self = this; self._raise('filebrowse'); if (e && e.isDefaultPrevented()) { return; } if (self.isError && !self.isUploadable) { self.clear(); } self.$captionContainer.focus(); }, _change: function (e) { var self = this, $el = self.$element; if (!self.isUploadable && isEmpty($el.val()) && self.fileInputCleared) { // IE 11 fix self.fileInputCleared = false; return; } self.fileInputCleared = false; var tfiles, msg, total, isDragDrop = arguments.length > 1, isAjaxUpload = self.isUploadable, i = 0, f, n, len, files = isDragDrop ? e.originalEvent.dataTransfer.files : $el.get(0).files, ctr = self.filestack.length, isSingleUpload = isEmpty($el.attr('multiple')), flagSingle = (isSingleUpload && ctr > 0), folders = 0, throwError = function (mesg, file, previewId, index) { var p1 = $.extend(true, {}, self._getOutData({}, {}, files), {id: previewId, index: index}), p2 = {id: previewId, index: index, file: file, files: files}; return self.isUploadable ? self._showUploadError(mesg, p1) : self._showError(mesg, p2); }; self.reader = null; self._resetUpload(); self._hideFileIcon(); if (self.isUploadable) { self.$container.find('.file-drop-zone .' + self.dropZoneTitleClass).remove(); } if (isDragDrop) { tfiles = []; while (files[i]) { f = files[i]; if (!f.type && f.size % 4096 === 0) { folders++; } else { tfiles.push(f); } i++; } } else { if (e.target.files === undefined) { tfiles = e.target && e.target.value ? [ {name: e.target.value.replace(/^.+\\/, '')} ] : []; } else { tfiles = e.target.files; } } if (isEmpty(tfiles) || tfiles.length === 0) { if (!isAjaxUpload) { self.clear(); } self._showFolderError(folders); self._raise('fileselectnone'); return; } self._resetErrors(); len = tfiles.length; total = self._getFileCount(self.isUploadable ? (self.getFileStack().length + len) : len); if (self.maxFileCount > 0 && total > self.maxFileCount) { if (!self.autoReplace || len > self.maxFileCount) { n = (self.autoReplace && len > self.maxFileCount) ? len : total; msg = self.msgFilesTooMany.replace('{m}', self.maxFileCount).replace('{n}', n); self.isError = throwError(msg, null, null, null); self.$captionContainer.find('.kv-caption-icon').hide(); self._setCaption('', true); self.$container.removeClass('file-input-new file-input-ajax-new'); return; } if (total > self.maxFileCount) { self._resetPreviewThumbs(isAjaxUpload); } } else { if (!isAjaxUpload || flagSingle) { self._resetPreviewThumbs(false); if (flagSingle) { self.clearStack(); } } else { if (isAjaxUpload && ctr === 0 && (!previewCache.count(self.id) || self.overwriteInitial)) { self._resetPreviewThumbs(true); } } } if (self.isPreviewable) { self._readFiles(tfiles); } else { self._updateFileDetails(1); } self._showFolderError(folders); }, _abort: function (params) { var self = this, data; if (self.ajaxAborted && typeof self.ajaxAborted === "object" && self.ajaxAborted.message !== undefined) { data = $.extend(true, {}, self._getOutData(), params); data.abortData = self.ajaxAborted.data || {}; data.abortMessage = self.ajaxAborted.message; self.cancel(); self._setProgress(100, self.$progress, self.msgCancelled); self._showUploadError(self.ajaxAborted.message, data, 'filecustomerror'); return true; } return false; }, _resetFileStack: function () { var self = this, i = 0, newstack = [], newnames = []; self._getThumbs().each(function () { var $thumb = $(this), ind = $thumb.attr('data-fileindex'), file = self.filestack[ind]; if (ind === -1) { return; } if (file !== undefined) { newstack[i] = file; newnames[i] = self._getFileName(file); $thumb.attr({ 'id': self.previewInitId + '-' + i, 'data-fileindex': i }); i++; } else { $thumb.attr({ 'id': 'uploaded-' + uniqId(), 'data-fileindex': '-1' }); } }); self.filestack = newstack; self.filenames = newnames; }, clearStack: function () { var self = this; self.filestack = []; self.filenames = []; return self.$element; }, updateStack: function (i, file) { var self = this; self.filestack[i] = file; self.filenames[i] = self._getFileName(file); return self.$element; }, addToStack: function (file) { var self = this; self.filestack.push(file); self.filenames.push(self._getFileName(file)); return self.$element; }, getFileStack: function (skipNull) { var self = this; return self.filestack.filter(function (n) { return (skipNull ? n !== undefined : n !== undefined && n !== null); }); }, lock: function () { var self = this; self._resetErrors(); self.disable(); if (self.showRemove) { addCss(self.$container.find('.fileinput-remove'), 'hide'); } if (self.showCancel) { self.$container.find('.fileinput-cancel').removeClass('hide'); } self._raise('filelock', [self.filestack, self._getExtraData()]); return self.$element; }, unlock: function (reset) { var self = this; if (reset === undefined) { reset = true; } self.enable(); if (self.showCancel) { addCss(self.$container.find('.fileinput-cancel'), 'hide'); } if (self.showRemove) { self.$container.find('.fileinput-remove').removeClass('hide'); } if (reset) { self._resetFileStack(); } self._raise('fileunlock', [self.filestack, self._getExtraData()]); return self.$element; }, cancel: function () { var self = this, xhr = self.ajaxRequests, len = xhr.length, i; if (len > 0) { for (i = 0; i < len; i += 1) { self.cancelling = true; xhr[i].abort(); } } self._setProgressCancelled(); self._getThumbs().each(function () { var $thumb = $(this), ind = $thumb.attr('data-fileindex'); $thumb.removeClass('file-uploading'); if (self.filestack[ind] !== undefined) { $thumb.find('.kv-file-upload').removeClass('disabled').removeAttr('disabled'); $thumb.find('.kv-file-remove').removeClass('disabled').removeAttr('disabled'); } self.unlock(); }); return self.$element; }, clear: function () { var self = this, cap; self.$btnUpload.removeAttr('disabled'); self._getThumbs().find('video,audio,img').each(function () { cleanMemory($(this)); }); self._resetUpload(); self.clearStack(); self._clearFileInput(); self._resetErrors(true); self._raise('fileclear'); if (self._hasInitialPreview()) { self._showFileIcon(); self._resetPreview(); self._initPreviewDeletes(); self.$container.removeClass('file-input-new'); } else { self._getThumbs().each(function () { self._clearObjects($(this)); }); if (self.isUploadable) { previewCache.data[self.id] = {}; } self.$preview.html(''); cap = (!self.overwriteInitial && self.initialCaption.length > 0) ? self.initialCaption : ''; self._setCaption(cap); self.$caption.attr('title', ''); addCss(self.$container, 'file-input-new'); self._validateDefaultPreview(); } if (self.$container.find('.file-preview-frame').length === 0) { if (!self._initCaption()) { self.$captionContainer.find('.kv-caption-icon').hide(); } } self._hideFileIcon(); self._raise('filecleared'); self.$captionContainer.focus(); self._setFileDropZoneTitle(); return self.$element; }, reset: function () { var self = this; self._resetPreview(); self.$container.find('.fileinput-filename').text(''); self._raise('filereset'); addCss(self.$container, 'file-input-new'); if (self.$preview.find('.file-preview-frame').length || self.isUploadable && self.dropZoneEnabled) { self.$container.removeClass('file-input-new'); } self._setFileDropZoneTitle(); self.clearStack(); self.formdata = {}; return self.$element; }, disable: function () { var self = this; self.isDisabled = true; self._raise('filedisabled'); self.$element.attr('disabled', 'disabled'); self.$container.find(".kv-fileinput-caption").addClass("file-caption-disabled"); self.$container.find(".btn-file, .fileinput-remove, .fileinput-upload, .file-preview-frame button").attr( "disabled", true); self._initDragDrop(); return self.$element; }, enable: function () { var self = this; self.isDisabled = false; self._raise('fileenabled'); self.$element.removeAttr('disabled'); self.$container.find(".kv-fileinput-caption").removeClass("file-caption-disabled"); self.$container.find( ".btn-file, .fileinput-remove, .fileinput-upload, .file-preview-frame button").removeAttr("disabled"); self._initDragDrop(); return self.$element; }, upload: function () { var self = this, totLen = self.getFileStack().length, params = {}, i, outData, len, hasExtraData = !$.isEmptyObject(self._getExtraData()); if (self.minFileCount > 0 && self._getFileCount(totLen) < self.minFileCount) { self._noFilesError(params); return; } if (!self.isUploadable || self.isDisabled || (totLen === 0 && !hasExtraData)) { return; } self._resetUpload(); self.$progress.removeClass('hide'); self.uploadCount = 0; self.uploadStatus = {}; self.uploadLog = []; self.lock(); self._setProgress(2); if (totLen === 0 && hasExtraData) { self._uploadExtraOnly(); return; } len = self.filestack.length; self.hasInitData = false; if (self.uploadAsync) { outData = self._getOutData(); self._raise('filebatchpreupload', [outData]); self.fileBatchCompleted = false; self.uploadCache = {content: [], config: [], tags: [], append: true}; self.uploadAsyncCount = self.getFileStack().length; for (i = 0; i < len; i++) { self.uploadCache.content[i] = null; self.uploadCache.config[i] = null; self.uploadCache.tags[i] = null; } for (i = 0; i < len; i++) { if (self.filestack[i] !== undefined) { self._uploadSingle(i, self.filestack, true); } } return; } self._uploadBatch(); return self.$element; }, destroy: function () { var self = this, $cont = self.$container; $cont.find('.file-drop-zone').off(); self.$element.insertBefore($cont).off(NAMESPACE).removeData(); $cont.off().remove(); return self.$element; }, refresh: function (options) { var self = this, $el = self.$element; options = options ? $.extend(true, {}, self.options, options) : self.options; self.destroy(); $el.fileinput(options); if ($el.val()) { $el.trigger('change.fileinput'); } return $el; } }; $.fn.fileinput = function (option) { if (!hasFileAPISupport() && !isIE(9)) { return; } var args = Array.apply(null, arguments), retvals = []; args.shift(); this.each(function () { var self = $(this), data = self.data('fileinput'), options = typeof option === 'object' && option, lang = options.language || self.data('language') || 'en', loc = {}, opts; if (!data) { if (lang !== 'en' && !isEmpty($.fn.fileinputLocales[lang])) { loc = $.fn.fileinputLocales[lang]; } opts = $.extend(true, {}, $.fn.fileinput.defaults, $.fn.fileinputLocales.en, loc, options, self.data()); data = new FileInput(this, opts); self.data('fileinput', data); } if (typeof option === 'string') { retvals.push(data[option].apply(data, args)); } }); switch (retvals.length) { case 0: return this; case 1: return retvals[0]; default: return retvals; } }; $.fn.fileinput.defaults = { language: 'en', showCaption: true, showPreview: true, showRemove: true, showUpload: true, showCancel: true, showClose: true, showUploadedThumbs: true, autoReplace: false, mainClass: '', previewClass: '', captionClass: '', mainTemplate: null, initialCaption: '', initialPreview: [], initialPreviewDelimiter: '*$$*', initialPreviewConfig: [], initialPreviewThumbTags: [], previewThumbTags: {}, initialPreviewShowDelete: true, removeFromPreviewOnError: false, deleteUrl: '', deleteExtraData: {}, overwriteInitial: true, layoutTemplates: defaultLayoutTemplates, previewTemplates: defaultPreviewTemplates, allowedPreviewTypes: defaultPreviewTypes, allowedPreviewMimeTypes: null, allowedFileTypes: null, allowedFileExtensions: null, defaultPreviewContent: null, customLayoutTags: {}, customPreviewTags: {}, previewSettings: defaultPreviewSettings, fileTypeSettings: defaultFileTypeSettings, previewFileIcon: '', previewFileIconClass: 'file-icon-4x', previewFileIconSettings: {}, previewFileExtSettings: {}, buttonLabelClass: 'hidden-xs', browseIcon: ' ', browseClass: 'btn btn-primary', removeIcon: '', removeClass: 'btn btn-default', cancelIcon: '', cancelClass: 'btn btn-default', uploadIcon: '', uploadClass: 'btn btn-default', uploadUrl: null, uploadAsync: true, uploadExtraData: {}, minImageWidth: null, minImageHeight: null, maxImageWidth: null, maxImageHeight: null, resizeImage: false, resizePreference: 'width', resizeQuality: 0.92, resizeDefaultImageType: 'image/jpeg', maxFileSize: 0, minFileCount: 0, maxFileCount: 0, validateInitialCount: false, msgValidationErrorClass: 'text-danger', msgValidationErrorIcon: ' ', msgErrorClass: 'file-error-message', progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active", progressClass: "progress-bar progress-bar-success progress-bar-striped active", progressCompleteClass: "progress-bar progress-bar-success", progressErrorClass: "progress-bar progress-bar-danger", previewFileType: 'image', zoomIndicator: '', elCaptionContainer: null, elCaptionText: null, elPreviewContainer: null, elPreviewImage: null, elPreviewStatus: null, elErrorContainer: null, errorCloseButton: '×', slugCallback: null, dropZoneEnabled: true, dropZoneTitleClass: 'file-drop-zone-title', fileActionSettings: {}, otherActionButtons: '', textEncoding: 'UTF-8', ajaxSettings: {}, ajaxDeleteSettings: {}, showAjaxErrorDetails: true }; $.fn.fileinputLocales.en = { fileSingle: 'file', filePlural: 'files', browseLabel: 'Browse …', removeLabel: 'Remove', removeTitle: 'Clear selected files', cancelLabel: 'Cancel', cancelTitle: 'Abort ongoing upload', uploadLabel: 'Upload', uploadTitle: 'Upload selected files', msgNo: 'No', msgCancelled: 'Cancelled', msgZoomTitle: 'View details', msgZoomModalHeading: 'Detailed Preview', msgSizeTooLarge: 'File "{name}" ({size} KB) exceeds maximum allowed upload size of {maxSize} KB.', msgFilesTooLess: 'You must select at least {n} {files} to upload.', msgFilesTooMany: 'Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}.', msgFileNotFound: 'File "{name}" not found!', msgFileSecured: 'Security restrictions prevent reading the file "{name}".', msgFileNotReadable: 'File "{name}" is not readable.', msgFilePreviewAborted: 'File preview aborted for "{name}".', msgFilePreviewError: 'An error occurred while reading the file "{name}".', msgInvalidFileType: 'Invalid type for file "{name}". Only "{types}" files are supported.', msgInvalidFileExtension: 'Invalid extension for file "{name}". Only "{extensions}" files are supported.', msgUploadAborted: 'The file upload was aborted', msgValidationError: 'Validation Error', msgLoading: 'Loading file {index} of {files} …', msgProgress: 'Loading file {index} of {files} - {name} - {percent}% completed.', msgSelected: '{n} {files} selected', msgFoldersNotAllowed: 'Drag & drop files only! {n} folder(s) dropped were skipped.', msgImageWidthSmall: 'Width of image file "{name}" must be at least {size} px.', msgImageHeightSmall: 'Height of image file "{name}" must be at least {size} px.', msgImageWidthLarge: 'Width of image file "{name}" cannot exceed {size} px.', msgImageHeightLarge: 'Height of image file "{name}" cannot exceed {size} px.', msgImageResizeError: 'Could not get the image dimensions to resize.', msgImageResizeException: 'Error while resizing the image.
    {errors}
    ', dropZoneTitle: 'Drag & drop files here …' }; $.fn.fileinput.Constructor = FileInput; /** * Convert automatically file inputs with class 'file' into a bootstrap fileinput control. */ $(document).ready(function () { var $input = $('input.file[type=file]'); if ($input.length) { $input.fileinput(); } }); }));