带有 jQuery 和 Bootstrap 的漂亮干净的文件输入插件 5/4/3 - Bootstrap Fileinput

版本:

浏览量:2437

最后更新：2021-09-05

推荐指数:

查看演示点击下载

详细信息

Bootstrap Fileinput 是一个使用 jQuery、Bootstrap 5（或Bootstrap 4、Bootstrap 3）构建的 Html5 文件输入增强，用于创建一个漂亮的文件上传器，允许您选择多个带有图像和文件预览的文件。

主要特点：

启用 AJAX
块上传
文件预览
多语言
RTL 和 LTR
大量的配置选项、API 方法、事件处理程序。

你可能还喜欢：

带有 Bootstrap 的漂亮的 jQuery 文件上传插件
拖放文件上传器插件 - dropzone
Fine Uploader - 用户友好的文件上传插件
用于多文件上传器的 jQuery 插件 - 上传文件

如何使用它：

1. 在 Html 页面中包含必要的 jQuery 库和 Boostrap 框架的样式表。

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>

2. 在 jQuery 库之后包含 jQuery Bootstrap Fileinput 插件的 javascript 和 CSS。

<link href="/path/to/css/fileinput.css" rel="stylesheet">
<!-- <link href="/path/to/css/fileinput-rtl.css" rel="stylesheet"> -->
<script src="/path/to/js/fileinput.min.js"></script>

3. Include a language JS on the page. You can find all the languages under the locales folder

<script src="/path/to/js/locales/es.js"></script>

4. Include an extension of your choice on the page. Available extensions.

piexif: Needed for auto orienting image files OR when restoring exif data in resized images and when you wish to resize images before upload. This must be loaded before fileinput.min.js.
purify: Needed if you wish to purify HTML content in your preview for HTML files. This must be loaded before fileinput.min.js.
sotable: Needed if you wish to sort / rearrange files in initial preview.

<script src="/path/to/js/plugins/piexif.min.js"></script>
<script src="/path/to/js/plugins/purify.min.js"></script>
<script src="/path/to/js/plugins/sortable.min.js"></script>

5. Create a standard file input with data-* attributes to set the plugin's options.

<div class="form-group">
  <input id="file-demo" type="file" class="file" multiple=true data-preview-file-type="any">
</div>

6. You can also initialize the plugin by calling the function on the input field.

$("#example").fileinput({
  // settings here
});

7. That's it. All the available settings with default values are listed below.

// local
language: 'en',
 
// displays the file caption
showCaption: true,
 
// displays the file browse button
showBrowse: true,
 
// displays the file preview
showPreview: true,
 
// displayes the file remove button
showRemove: true,
 
// displays the upload button
showUpload: true,
 
// displays the upload state
showUploadStats: true,
 
// displays the cancel button
showCancel: null,
 
// displays the pause button
showPause: null,
 
// displays the close button
showClose: true,
 
// persists display of the uploaded file thumbnails in the preview window (for ajax uploads)
showUploadedThumbs: true,
 
// browses local files by clicking the upload zone
browseOnZoneClick: false,
 
// automatically replaces the files in the preview after the maxFileCount limit is reached and a new set of file(s) is/are selected
autoReplace: false,
 
// show a close icon to close the description bubble text
showDescriptionClose: true,
 
// applicable for JPEG images only and non ios safari
autoOrientImage: function () {
  var ua = window.navigator.userAgent, webkit = !!ua.match(/WebKit/i),
      iOS = !!ua.match(/iP(od|ad|hone)/i), iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
  return !iOSSafari;
},
 
// detects whether to automatically orient JPEG images pre-loaded within the initialPreview
// boolean or function
autoOrientImageInitial: true,
 
// is required field?
required: false,
 
// RTL mode
rtl: false,
 
// hides thumbnail content
hide<a href="https://www.jqueryscript.net/tags.php?/Thumbnail/">Thumbnail</a>Content: false,
 
// encodes URLs
encodeUrl: true,
 
// a callback to generate the unique file identifier for each file selected from the client
// parameter: file
generateFileId: null,
 
// CSS class for the file preview
previewClass: '',
 
// CSS class for the file caption
captionClass: '',
 
// CSS class for the thumbnail frame
frameClass: 'krajee-default',
 
// CSS class for the plugin
mainClass: 'file-caption-main',
 
// Can be set to input-group-lg or input-group-sm to get bootstrap input group styles
inputGroupClass: '',
 
mainTemplate: null,
 
// purifies HTML content displayed for HTML content type in previe
purifyHtml: true,
 
// a callback to generate the human friendly filesize based on the bytes parameter
fileSizeGetter: null,
 
// initial values
initialCaption: '',
initialPreview: [],
initialPreviewDelimiter: '*$$*',
initialPreviewAsData: false,
initialPreviewFileType: 'image',
initialPreviewConfig: [],
initialPreviewThumbTags: [],
 
// a list of tags used in thumbnail templates
previewThumbTags: {},
 
// whether the delete button will be displayed for each thumbnail that has been created with initialPreview
initialPreviewShowDelete: true,
 
// the URL to download the files in the initialPreview.
initialPreviewDownloadUrl: '',
 
// removes the file thumbnail on error
removeFromPreviewOnError: false,
 
// the URL for deleting the image/content in the initial preview via AJAX post response
// you can also set deleteUrl as a function callback which will return a string.
deleteUrl: '',
 
// the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST
// this can be setup either as an object (associative array of keys and values) or as a function callback
deleteExtraData: {},
 
// overwrites the initial preview content and caption setup
overwriteInitial: true,
 
// a function that will sanitize the zoom cache content and return the sanitized html
sanitize<a href="https://www.jqueryscript.net/zoom/">Zoom</a>Cache: function (content) {
  var $container = $(document.createElement('div')).append(content);
  $container.find('input,select,.file-thumbnail-footer').remove();
  return $container.html();
},
 
// custom button icons
previewZoomButtonIcons: {
  prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
  next: '<i class="glyphicon glyphicon-triangle-right"></i>',
  toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
  fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
  borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
  close: '<i class="glyphicon glyphicon-remove"></i>'
},
 
// default CSS classes
previewZoomButtonClasses: {
  prev: 'btn btn-navigate',
  next: 'btn btn-navigate',
  toggleheader: 'btn btn-sm btn-kv btn-default btn-outline-secondary',
  fullscreen: 'btn btn-sm btn-kv btn-default btn-outline-secondary',
  borderless: 'btn btn-sm btn-kv btn-default btn-outline-secondary',
  close: 'btn btn-sm btn-kv btn-default btn-outline-secondary'
},
 
/*
  image: the preview template for image files.
 
  text: the preview template for text files.
 
  html: the preview template for html files.
 
  <a href="https://www.jqueryscript.net/tags.php?/video/">video</a>: the preview template for video files (supported by HTML 5 video tag).
 
  audio: the preview template for audio files (supported by HTML 5 audio tag).
 
  flash: the preview template for flash files (supported currently on webkit browsers).
 
  object: the preview template for all other files - by default treated as object. To disable this behavior, configure the allowedPreviewTypes property.
 
  generic: this template is used ONLY for rendering the initialPreview markup content passed directly as a raw format.
 
  The following tags will be parsed and replaced in each of the templates:
 
  {rtl}: will be set to kv-rtl css class when rtl is set to true, else will be a empty string.
 
  {fileindex}: will be replaced with the sequential index of the file within the selected file stack
 
  {previewId}: will be replaced with the generated HTML identifier for the file preview thumbnail frame
 
  {template}: the template key name
 
  {frameClass}: will be replaced by the frameClass setting
 
  {caption}: will be replaced by the file caption / file name
 
  {style}: will be replaced by the CSS style markup based on the settings in previewSettings or previewSettingsSmall
 
  {data}: will be replaced by the raw file data when files are selected on client, or data source set via initialPreview for initial preview content
 
  {footer}: will be replaced with the thumbnail footer that displays the actions .
 
  {content}: this is applicable only for the generic template. It will be replaced with the raw HTML markup as set in initialPreview. None of the above tags will be parsed for the generic template.
 
  As noted, if you are coming from an earlier release (before v2.4.0), all preview templates have now been combined into one property, instead of separate templates for image, text etc.
 
  NOTE: when setting your own preview templates, the following CSS classes are mandatory to identify elements within each file preview template:
 
  file-preview-frame: CSS class to identify each preview thumbnail frame container
 
  kv-file-content: CSS class to identify the display container for the file content
 
  kv-preview-data: CSS class to identify the element containing the data source (and the {data} tag) for each file type
*/
previewTemplates: {},
 
// custom preview templates
previewContentTemplates: {},
 
// forces iconic preview of file thumbnails in the preview zone
preferIconicPreview: false,
 
// forces iconic preview of file thumbnails in the detailed zoom preview zone
preferIconicZoomPreview: false,
 
// an array of allowed file types
// e.g. 'image', 'html', 'text', 'video', 'audio', 'flash', 'object'
allowedFileTypes: null,
 
// an array of allowed file extensions
allowedFileExtensions: null,
 
// an array of allowed preview types
allowedPreviewTypes: undefined,
 
// an array of allowed mime types for preview
allowedPreviewMimeTypes: null,
 
// an array of allowed preview file extensions
allowedPreviewExtensions: null,
 
// an array of disabled preview types
disabledPreviewTypes: undefined,
disabledPreviewExtensions: ['msi', 'exe', 'com', 'zip', 'rar', 'app', 'vb', 'scr'],
disabledPreviewMimeTypes: null,
 
// the default content / markup to show by default in the preview window whenever the files are cleared or the input is cleared
defaultPreviewContent: null,
 
// an object of additional custom tags
customLayoutTags: {},
 
// an object of additional preview tags
customPreviewTags: {},
 
// preview icon
previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
 
// CSS class for the preview icon
previewFileIconClass: 'file-other-icon',
 
/* e.g.
  previewFileIconSettings: {
    'doc': '<i class="fa fa-file-word-o text-primary"></i>',
    'xls': '<i class="fa fa-file-excel-o text-success"></i>',
    'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
    'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
    'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
    'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
  }
*/
previewFileIconSettings: {},
 
/* e.g.
  previewFileExtSettings: {
    'doc': function(ext) {
      return ext.match(/(doc|docx)$/i);
    },
    'xls': function(ext) {
      return ext.match(/(xls|xlsx)$/i);
    },
    'ppt': function(ext) {
      return ext.match(/(ppt|pptx)$/i);
    }
  }
*/
previewFileExtSettings: {},
 
// CSS class for the button label
buttonLabelClass: 'hidden-xs',
 
// default icons
browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
browseClass: 'btn btn-primary',
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
removeClass: 'btn btn-default btn-secondary',
cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
cancelClass: 'btn btn-default btn-secondary',
pauseIcon: '<i class="glyphicon glyphicon-pause"></i>',
pauseClass: 'btn btn-default btn-secondary',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
 
// CSS class for the upload button
uploadClass: 'btn btn-default btn-secondary',
 
// the URL for the upload processing action
// You can also set uploadUrl as a function callback which will return a string.
uploadUrl: null,
 
// the URL for the ajax upload processing action applicable when each individual file thumbnail is separately uploaded
// You can also set uploadThumbUrl as a function callback which will return a string.
uploadUrlThumb: null,
 
// enables asynchronous upload
uploadAsync: true,
 
// default parameter names
uploadParamNames: {
  chunkCount: 'chunkCount',
  chunkIndex: 'chunkIndex',
  chunkSize: 'chunkSize',
  chunkSizeStart: 'chunkSizeStart',
  chunksUploaded: 'chunksUploaded',
  fileBlob: 'fileBlob',
  fileId: 'fileId',
  fileName: 'fileName',
  fileRelativePath: 'fileRelativePath',
  fileSize: 'fileSize',
  retryCount: 'retryCount'
},
 
// max ajax threads
maxAjaxThreads: 5,
 
// process delay in ms
processDelay: 100,
 
// must be lesser than process delay
queueDelay: 10,
 
// must be lesser than process delay
progressDelay: 0,
 
// enables resumable / chunk uploads
enableResumableUpload: false,
 
// resumable upload options
resumableUploadOptions: {
  fallback: null,
  testUrl: null, // used for checking status of chunks/ files previously / partially uploaded
  chunkSize: 2 * 1024, // in KB
  maxThreads: 4,
  maxRetries: 3,
  showErrorLog: true,
  skipErrorsAndProceed: true // when set to true, error file will be skipped and upload will continue with other files
},
 
// the extra data that will be passed as data to the url/AJAX server call via POST.
uploadExtraData: {},
 
// the height of the zoom modal
zoom<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>Height: 480,
 
// min/max image size
minImageWidth: null,
minImageHeight: null,
maxImageWidth: null,
maxImageHeight: null,
 
// bytesToKB converter
bytesToKB: 1024,
 
// allows the user to resize the uploaded images
resizeImage: false,
 
// preference to resize the image based on width or height
resizePreference: 'width',
 
// resize quality
resizeQuality: 0.92,
 
// default image type
resizeDefaultImageType: 'image/jpeg',
 
// in KB
resizeIfSizeMoreThan: 0,
 
// min/max file size
minFileSize: 0,
maxFileSize: 0,
 
// 25 MB
maxFilePreviewSize: 25600,
 
// min/max/ file count
minFileCount: 0,
maxFileCount: 0,
 
// includes initial preview file count
vali<a href="https://www.jqueryscript.net/time-clock/">date</a>InitialCount: false,
 
// error class for the validation
msg<a href="https://www.jqueryscript.net/tags.php?/Validation/">Validation</a>ErrorClass: 'text-danger',
 
// icon for the validation
msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
 
// CSS class for the error message
msgErrorClass: 'file-error-message',
 
// default CSS classes for the upload progress bar
progressThumbClass: 'progress-bar progress-bar-striped active',
progressClass: 'progress-bar bg-success progress-bar-success progress-bar-striped active',
progressInfoClass: 'progress-bar bg-info progress-bar-info progress-bar-striped active',
progressCompleteClass: 'progress-bar bg-success progress-bar-success',
progressPauseClass: 'progress-bar bg-primary progress-bar-primary progress-bar-striped active',
progressErrorClass: 'progress-bar bg-danger progress-bar-danger',
 
// the percentage progress threshold until which the file upload progress indicator will display the percentag
progressUploadThreshold: 99,
 
// the type of files that are to be displayed in the preview window
// or 'text', 'any'
previewFileType: 'image',
 
// the identifier for the caption container
elCaptionContainer: null,
 
// the identifier for the caption text
elCaptionText: null,
 
// the identifier for the preview container
elPreviewContainer: null,
 
// the identifier for the image preview
elPreviewImage: null,
 
// the identifier for the preview status
elPreviewStatus: null,
 
// the identifier for the error container
elErrorContainer: null,
 
errorCloseButton: $h.closeButton('kv-error-close'),
 
// a callback to convert the filename as a slug string eliminating special characters
slugCallback: null,
 
// enables drop zone
dropZoneEnabled: true,
 
// CSS class for the title of the drop zone
dropZoneTitleClass: 'file-drop-zone-title',
 
/*
  showDownload: boolean | function, whether to show the download button in the thumbnail. This can also be setup as a callback function as described in the showUpload button above. NOTE: The download button will be displayed only for uploaded files on server and when you have set a valid initialPreview and a valid initialPreviewDownloadUrl or set a valid downloadUrl for each file configuration within initialPreviewConfig.
 
  showRemove: boolean | function, whether to show the remove button in the thumbnail. This can also be setup as a callback function as described in the showUpload button above. NOTE: Even if this property is set to true, the remove button in thumbnails will never be shown in the following cases:
 
  Client Selected Files (Non-Ajax): The remove button will be hidden always for file thumbnails that are selected from client for non-ajax / form based submissions (when uploadUrl is not set).
 
  Server Uploaded Files (Without delete URL): The remove button will not be effective for server uploaded file thumbnails set via initialPreview, unless you set a valid initialPreview and a valid deleteUrl or a valid url for each file configuration within initialPreviewConfig .
 
  showZoom: boolean | function, whether to show the zoom button in the thumbnail. This can also be setup as a callback function as described in the showUpload button above.
 
  showDrag: boolean | function, whether to show the drag button in the thumbnail (applicable only for initial preview content). This can also be setup as a callback function as described in the showUpload button above. NOTE: The drag indicator button will be displayed only for uploaded files on server and when you have set a valid initialPreview.
 
  uploadIcon: string, icon for upload button to be displayed in each file thumbnail.
 
  uploadClass: string, CSS class for the upload button in each file thumbnail.
 
  uploadTitle: string, title for upload button in each file thumbnail.
 
  uploadRetryIcon: string, icon to be displayed for upload button after an upload error is encountered from the server to allow retry of the upload. This will be rendered in such a case for the errored file thumbnail when retryErrorUploads is set to true.
 
  uploadRetryIcon: string, title to be displayed for upload button after an upload error is encountered from the server to allow retry of the upload. This will be rendered in such a case for the errored file thumbnail when retryErrorUploads is set to true.
 
  downloadIcon: string, icon for download button to be displayed in each file thumbnail.
 
  downloadClass: string, CSS class for the download button in each file thumbnail.
 
  downloadTitle: string, title for download button in each file thumbnail.
 
  removeIcon: string, icon for remove button to be displayed in each file thumbnail.
 
  removeClass: string, CSS class for the remove button in each file thumbnail.
 
  removeTitle: string, title for remove button in each file thumbnail.
 
  zoomIcon: string, icon for zoom button to be displayed in each file thumbnail (to zoom thumbnail content to a detailed modal preview).
 
  zoomClass: string, CSS class for the zoom button in each file thumbnail (to zoom thumbnail content to a detailed modal preview).
 
  zoomTitle: string, title for zoom button in each file thumbnail (to zoom thumbnail content to a detailed modal preview).
 
  dragIcon: string, icon for drag button to be displayed in each file thumbnail (to sort / rearrange items in initial preview).
 
  dragClass: string, CSS class for the drag button in each file thumbnail (to sort / rearrange items in initial preview).
 
  dragTitle: string, title for drag button in each file thumbnail (to sort / rearrange items in initial preview).
 
  dragSettings: object, the configuration for the Sortable plugin that will allow you to control the drag settings.
 
  indicatorNew: string, an indicator (HTML markup) for new pending upload displayed in each file thumbnail.
 
  indicatorSuccess: string, an indicator (HTML markup) for successful upload displayed in each file thumbnail.
 
  indicatorError: string, an indicator (HTML markup) for error in upload displayed in each file thumbnail.
 
  indicatorLoading: string, an indicator (HTML markup) for ongoing upload displayed in each file thumbnail.
 
  indicatorPaused: string, an indicator (HTML markup) for paused upload displayed in each file thumbnail (applicable for resumable uploads when enableResumableUpload property to true).
 
  indicatorNewTitle: string, title to display on hover of indicator for new pending upload in each file thumbnail.
 
  indicatorSuccessTitle: string, title to display on hover of indicator for successful in each file thumbnail.
 
  indicatorErrorTitle: string, title to display on hover of indicator for error in upload in each file thumbnail.
 
  indicatorLoadingTitle: string, title to display on hover of indicator for ongoing upload in each file thumbnail.
 
  indicatorPausedTitle: string, title to display on hover of indicator for paused upload in each file thumbnail (applicable for resumable uploads when enableResumableUpload property to true).
*/
fileActionSettings: {},
 
/*
  {key}: Will be replaced with the key property set for each preview thumbnail setting within initialPreviewConfig.
 
  {dataKey}: Will be replaced with data-key="{keyval}", where {keyval} is the key property set for each preview thumbnail setting within initialPreviewConfig.
 
  {dataUrl}: Will be replaced with data-url="{urlval}", where {urlval} is the delete url property set for each preview thumbnail setting within initialPreviewConfig.
 
  {downloadUrl}: the url to be used to trigger the download of the selected thumbnail. This will be derived from the downloadUrl property for the thumbnail frame within initialPreviewConfig or if this is not set, will be auto derived from the initialPreviewDownloadUrl setting. If neither are set, or the url is set to false, then the download action button will not be displayed.
 
  {caption}: the name of the file that will be downloaded. Will be derived from the filename property for the thumbnail frame within initialPreviewConfig or if that is not available, will use the caption property for the thumbnail frame within initialPreviewConfig.
*/
otherActionButtons: '',
 
// encoding
textEncoding: 'UTF-8',
 
// jQuery ajax settings
ajaxSettings: {},
ajaxDeleteSettings: {},
 
// shows details of the error stack from the server log
showAjaxErrorDetails: true,
 
// merge the ajax callback functions set in ajaxSettings with the default plugin callbacks for beforeSend, success, error, complete
mergeAjaxCallbacks: false,
mergeAjaxDeleteCallbacks: false,
 
// retry upload on error
retryErrorUploads: true,
 
// reverses preview order
reversePreviewOrder: false,
 
// uses a PDF Rendering library like PDF JS to render the PDF files
usePdfRenderer: function () {
  //noinspection JSUnresolvedVariable
  var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
  return !!navigator.userAgent.match(/(iPod|iPhone|iPad|<a href="https://www.jqueryscript.net/tags.php?/Android/">Android</a>)/i) || isIE11;
},
 
// the PDF rendering library URL
pdfRendererUrl: '',
 
/*
  {renderer} will be replaced by the pdfRendererUrl. The parent div thumbnail container to this rendered PDF iframe will have an additional CSS class kv-pdf-rendered appended to it (for overriding your styles for PDF Container). The default width for kv-pdf-rendered is set to 400px.
 
  {style} will be replaced by the CSS style markup based on the settings in previewSettings or previewSettingsSmall
*/
pdfRendererTemplate: '<iframe class="kv-preview-data file-preview-pdf" src="{renderer}?file={data}" {style}></iframe>'

8. API methods.

// disable
$('#input-id').fileinput('disable');
 
// re-enable
$('#input-id').fileinput('enable');
 
// reset
$('#input-id').fileinput('reset');
 
// destroy
$('#input-id').fileinput('destroy');
 
// refresh
$('#input-id').fileinput('refresh', OPTIONS);
 
// clear
$('#input-id').fileinput('clear');
 
// start uploading
$('#input-id').fileinput('upload');
 
// cancel
$('#input-id').fileinput('cancel');
 
// pause
$('#input-id').fileinput('pause');
 
// resume
$('#input-id').fileinput('resume');
 
// lock the file input
$('#input-id').fileinput('lock');
 
// unlock the file input
$('#input-id').fileinput('unlock');
 
// push (appends) a file object to the cached file stack array for upload
$('#input-id').fileinput('addToStack', fileObj);
 
// clear the entire file upload array stack
$('#input-id').fileinput('clearStack');
 
// return file list selected
var files = $('#input-id').fileinput('getFileStack');
 
// return count of files (uploaded and pending upload)
var filesCount = $('#input-id').fileinput('getFilesCount');
 
// read a FileList object
$('#input-id').fileinput('readFiles', files);
 
// zoom the content in detailed preview
$('#input-id').fileinput('zoom', HTML-identifier);
 
// return the initial preview content
$('#input-id').fileinput('getPreview');
 
// get the exif data
$('#input-id').fileinput('getPreview', 'yourThumbFrameId')
 
// return the list of file preview thumbnail frames
$('#input-id').fileinput('getFrames')
$('#input-id').fileinput('getFrames', '.file-preview-initial')

9. Event handlers.

$('#input-id').on('change', function(event) {
  console.log("change");
});
 
$('#input-id').on('fileselect', function(event, numFiles, label) {
  console.log("fileselect");
});
 
$('#input-id').on('fileselectnone', function(event) {
  console.log("Huh! No files were selected.");
});
 
$('#input-id').on('filebatchselected', function(event, files) {
  console.log('File batch selected triggered');
});
 
$('#input-id').on('fileclear', function(event) {
  console.log("fileclear");
});
 
$('#input-id').on('filecleared', function(event) {
  console.log("filecleared");
});
 
$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
  console.log("fileloaded");
});
 
$('#input-id').on('filereset', function(event) {
  console.log("filereset");
});
 
$('#input-id').on('fileimageloaded', function(event, previewId) {
  console.log("fileimageloaded");
});
 
$('#input-id').on('fileimagesloaded', function(event) {
  console.log("fileimagesloaded");
});
 
$('#input-id').on('fileimageresized', function(event, previewId, index) {
  console.log("fileimageresized");
});
 
$('#input-id').on('fileimagesresized', function(event) {
  console.log("fileimagesresized");
});
 
$('#input-id').on('filebrowse', function(event) {
  console.log("File browse triggered.");
});
 
$('#input-id').on('filelock', function(event, filestack, extraData) {
  var fstack = filestack.filter(function(n){ return n != undefined });
  console.log('Files selected - ' + fstack.length);
});
 
$('#input-id').on('fileunlock', function(event, filestack, extraData) {
  var fstack = filestack.filter(function(n){ return n != undefined });
  console.log('Files selected - ' + fstack.length);
});
 
$('#input-id').on('filepreremove', function(event, id, index) {
  console.log('id = ' + id + ', index = ' + index);
});
 
$('#input-id').on('fileremoved', function(event, id, index) {
  console.log('id = ' + id + ', index = ' + index);
});
 
$('#input-id').on('filebeforedelete', function(event, key, data) {
  console.log('Key = ' + key);
});
 
$('#input-id').on('filepredelete', function(event, key, jqXHR, data) {
  console.log('Key = ' + key);
});
 
$('#input-id').on('filedeleted', function(event, key, jqXHR, data) {
  console.log('Key = ' + key);
});
 
$('#input-id').on('filepreajax', function(event, previewId, index) {
  console.log('File pre ajax triggered');
});
 
$('#input-id').on('filepreupload', function(event, data, previewId, index) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File pre upload triggered');
});
 
$('#input-id').on('fileuploaded', function(event, previewId, index, fileId) {
  console.log('File uploaded', previewId, index, fileId);
});
 
$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File uploaded triggered');
});
 
$('#input-id').on('filebatchpreupload', function(event, data) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File batch pre upload');
});
 
$('#input-id').on('filebatchuploadsuccess', function(event, data) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File batch upload success');
});
 
$('#input-id').on('filebatchuploadcomplete', function(event, preview, config, tags, extraData) {
  console.log('File batch upload complete', preview, config, tags, extraData);
});
 
$('#input-id').on('filebatchuploadcomplete', function(event, files, extra) {
  console.log('File batch upload complete');
});
 
$('#input-id').on('filesuccessremove', function(event, id) {
  if (some_processing_function(id)) {
     console.log('Uploaded thumbnail successfully removed');
  } else {
      return false; // abort the thumbnail removal
  }
});
 
$('#input-id').on('filedisabled', function(event) {
  console.log('File disabled');
});
 
$('#input-id').on('fileenabled', function(event) {
  console.log('File enabled');
});
 
$('#input-id').on('filesorted', function(event, params) {
  console.log('File sorted ', params.previewId, params.oldIndex, params.newIndex, params.stack);
});
 
$('#input-id').on('filezoomshow', function(event, params) {
  console.log('File zoom show ', params.sourceEvent, params.previewId, params.modal);
});
 
$('#input-id').on('filezoomshown', function(event, params) {
  console.log('File zoom shown ', params.sourceEvent, params.previewId, params.modal);
});
 
$('#input-id').on('filezoomhide', function(event, params) {
  console.log('File zoom hide ', params.sourceEvent, params.previewId, params.modal);
});
 
$('#input-id').on('filezoomhidden', function(event, params) {
  console.log('File zoom hidden ', params.sourceEvent, params.previewId, params.modal);
});
 
$('#input-id').on('filezoomloaded', function(event, params) {
  console.log('File zoom loaded ', params.sourceEvent, params.previewId, params.modal);
});
 
$('#input-id').on('filezoomprev', function(event, params) {
  console.log('File zoom previous ', params.previewId, params.modal);
});
 
$('#input-id').on('filezoomnext', function(event, params) {
  console.log('File zoom next ', params.previewId, params.modal);
});
 
$('#input-id').on('filechunkbeforesend', function(event, previewId, index, retry, fm, rm, data) {
  console.log('filechunkbeforesend', previewId, index, retry);
});
 
$('#input-id').on('filechunksuccess', function(event, previewId, index, retry, fm, rm, data) {
  console.log('filechunksuccess', previewId, index, retry);
});
 
$('#input-id').on('filechunkerror', function(event, previewId, index, retry, fm, rm, data) {
  console.log('filechunkerror', previewId, index, retry);
});
 
$('#input-id').on('filechunkajaxerror', function(event, previewId, index, retry, fm, rm, data) {
  console.log('filechunkajaxerror', previewId, index, retry);
});
 
$('#input-id').on('filechunkcomplete', function(event, previewId, index, retry, fm, rm, data) {
  console.log('filechunkcomplete', previewId, index, retry);
});
 
$('#input-id').on('filetestbeforesend', function(event, fileId, fm, rm, data) {
  console.log('filetestbeforesend', fileId, fm, rm, data);
});
 
$('#input-id').on('filetestsuccess', function(event, fileId, fm, rm, data) {
  console.log('filetestsuccess', fileId, fm, rm, data);
});
 
$('#input-id').on('filetesterror', function(event, fileId, fm, rm, data) {
  console.log('filetesterror', fileId, fm, rm, data);
});
 
$('#input-id').on('filetestajaxerror', function(event, fileId, fm, rm, data) {
  console.log('filetestajaxerror', fileId, fm, rm, data);
});
 
$('#input-id').on('filetestcomplete', function(event, fileId, fm, rm, data) {
  console.log('filetestcomplete', fileId, fm, rm, data);
});
 
$('#input-id').on('fileerror', function(event, data, msg) {
 console.log(data.id);
 console.log(data.index);
 console.log(data.file);
 console.log(data.reader);
 console.log(data.files);
 // get message
 alert(msg);
});
 
$('#input-id').on('fileimageresizeerror', function(event, data, msg) {
 console.log(data.id);
 console.log(data.index);
 // get message
 alert(msg);
});
 
$('#input-id').on('fileuploaderror', function(event, data, msg) {
  console.log('File uploaded', data.previewId, data.index, data.fileId, msg);
});
 
$('#input-id').on('fileuploaderror', function(event, data, msg) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File upload error');
 // get message
 alert(msg);
});
 
$('#input-id').on('filebatchuploaderror', function(event, data, msg) {
  var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
  console.log('File batch upload error');
 // get message
 alert(msg);
});
 
$('#input-id').on('filedeleteerror', function(event, data, msg) {
  console.log('File delete error');
 // get message
 alert(msg);
});
 
$('#input-id').on('filefoldererror', function(event, folders, msg) {
  console.log('File folder dropped error');
 // get message
 alert(msg);
});
 
$("#input").on('filecustomerror', function(event, params, msg) {
 console.log(params.id);
 console.log(params.index);
 console.log(params.data);
 // get message
 alert(msg);
});
 
$('#input').on('filepreupload', function(event, data, previewId, index, jqXHR) {
  // do your validation and return an error like below
  if (customValidationFailed) {
     return {
         message: 'You are not allowed to do that',
         data: {key1: 'Key 1', detail1: 'Detail 1'}
     };
 }
});
 
$('#input').on('filecustomerror', function(event, params) {
 // params.abortData will contain the additional abort data passed
 // params.abortMessage will contain the aborted error message passed
});
 
$('#input-id').on('fileduplicateerror', function(event, file, fileId, caption, size, id, index) {
  console.log(file);
  console.log(fileId);
  console.log(size);
  console.log(id);
  console.log(index);
  console.log(caption);
});
 
$('#input').on('filebeforeload', function(event, file, index, reader) {
  // perform your validations based on the 'file' or other parameters
  if (file.name === 'UNAPPROVED_FILE.txt') {
    return false; // will abort the file loading for the selected file
  }
});

Changelog:

v5.2.4 (2021-07-27)

Fix zoom cache 404 console warnings.
Enhancements to file caption icon and input group styling.
Enhance zoom cache temporary url to use loader image.

v5.2.3 (2021-07-25)

Correct byte to KB conversion.
New property bytesToKB which defaults to 1024 is used for conversion.
Correct file caption reset after thumbnail delete.
Correct zoom data refresh for each individual file upload.
Enhance RTL Styling for bootstrap 4/5 input groups.
Enhancements for bootstrap input group styles.
New plugin option inputGroupClass - defaults to empty string. Can be set to input-group-lg or input-group-sm to get bootstrap input group styles
Enhanced caption icon styling to match the bootstrap input group styles
Correct zoom navigation for reverse preview order.
Update Chinese translations.
Enhance zoom cache rendering and carousel navigation indicators.
Enhance parsing of zoomData to lazy load content asynchronously only on zoom.
Enhance filebatchpreupload event listening for effective aborting.
Enhancements to zoomed preview to include additional description and better title styling

v5.2.2 (2021-06-19)

Enhancements for Bootstrap 5.x & New Theme
Show loading / processing when browse button used for file selection
Update Czech Translations.
Update Slovak Translations.
Various enhancements to file caption styling and file preview processing.
Allow pasting files and images from clipboard to the fileinput.
Correct isEmpty helper.
Corrections to image resizing.
Corrections to reselection/upload of image file deleted earlier.

v5.2.1 (2021-05-20)

Enhance reset of file caption title.
Corrections to image resizing.
Enhance and fix CDN to use jsDelivr.

v5.2.0 (2021-05-07)

Major release to support Bootstrap version 5.x
Bootstrap version is auto detected with this release if the bootstrap javascript library is loaded
Additional flexibility is provided to developer to override a specific bootstrap version by setting $.fn.fileinputBsVersion
There is an existing issue for MODAL dialog initialization in Bootstrap library v5.x.
Update Danish Translations.
Tab index ordering enhancements.
Add Latvian Translations.
Add Uzbek Cyrillic Translations.
Correct success file thumbs init.

v5.1.6 (2021-04-27)

Still under development.
Update Danish Translations.
Tab index ordering enhancements.
Add Latvian Translations.
Add Uzbek Cyrillic Translations.
Correct success file thumbs init.

v5.1.5 (2021-02-22)

Better correct CSP Buffer Stash using CSSStyleDeclaration.
Update Turkish Translations.
Resumable upload error handling fixes
new boolean property resumableUploadOptions.skipErrorsAndProceed
new event filemaxretries

v5.1.4 (2021-01-12)

Add namespace control on bootstrap modal show trigger to avoid interaction with other plugins.
Correct upload button behavior in file thumbnail footer.
Enhance upload stats and add bitrate update delay.
Correct upload bitrate.
Update Hungarian Translations.
Correct error in _getThumbFileId.
Correct thumb parsing error for events when showPreview is false.
Pass file id in fileuploaded event for non-resumable ajax async uploads.
Update Ukranian Translations.
Correct image size validation.
New plugin method getFilesSize to return sum of bytes of all files.
Update Polish Translations.
Fix clickable zone behavior on file validation error.

v5.1.3 (2020-10-24)

Update Greek Translations.
Update Arabic Translations.
Correct zoom cache to prevent duplicate thumb frames display.
Remove dependency on DOM Purify Plugin.
Enhance preview for PDF, Text & HTML.
Enhance Text & HTML files initial preview to be read as links.
Correct preview for plain text content.
Correct modal dialog aria-labelledby binding.
New preProcessUpload callback that can convert / encrypt file content before upload.
Add bootstrap 4 progress bar animation.
Default minFileSize to -1 to allow zero byte files to be uploaded.
Better encoded file id generation.
Remove unsupported script-inline from template and CSP buffer.
Fix problem with outlook deleting email after drag and drop.

v5.1.2 (2020-06-26)

Correct msgPlaceholder for de & uz translations.
Enhance duplicate validation for recently uploaded thumbs.

v5.1.1 (2020-06-21)

Correct file sorting and zoom cache handling.
Enhance resumable ajax error trapping

v5.1.0 (2020-06-11)

Correct cspBuffer stash html content store.
Set showConsoleLogs to false as default.
Enhance Sortable Behavior & Styles.
Update to use latest release of Rubaxa Sortable Plugin
Fix errors in sortable init
Update drag handle styles to show correct grab cursor
Validate drop zone title by correctly checking if native input has files.
Enhance progress bar styling.
Use … instead of three dots.
Update French Translations.
Enhance filezoom events to fire correctly only once for the source file input
Revamp Krajee Explorer Themes.

v5.0.9 (2020-05-29)

Enhance filezoom events to fire correctly only once for the source file input.
Fixes issue when multiple file input plugins are initialized on the same page
Update French Translations.
Correct image auto orientation based on browser support.
Implement CSP compliance for HTML markup via templates.
Correctly validate persistent file validation errors and display them.
Correct timeout and resumable validation for async uploads.
Parse response as string in _parseError function.
Handle filebeforeload event abort when returning false.
Update Català Translations.
Correct triggering of events for cancelled & paused scenarios.
Enhance and fix resumable and ajax queues.
More correct full screen exit.
Correct MIME Type detection for PNG.
Correct filebatchselected trigger for single file uploads.
Enhance file path for folder drag.
Better validation of required property.
Initial preview rendering correction when preview returned by server immediately after upload.

v5.0.8 (2020-02-13)

New event fileduplicateerror will be triggered after every duplicate file detected.
Duplicate error container can be closed by clicking the close icon.
New property fadeDelay used in fade out / fade in animations of error containers.
New filebeforeload event (only for ajax uploads). Can be used to abort loading of specific files at runtime.
Include parameter to include initial preview files in getFilesCount method.
Lock browse button correctly when disable method is called.
Correct zoom slideshow to show only files with zoom enabled via showZoom.
Correct file caption after files are uploaded.
Correct Mozilla PDF rendering bug.
Correct duplicate file check error rendering.
Better validation of progress display when showPreview is false.
Validate initialPreviewShowDelete setting correctly.
Correct preview content setting after validation error.

v5.0.7 (2019-12-05)

Correct isEmpty check for functions.
UpdateBrazilian Translations.
Include addToStack method.
Remove updateStack method
Rename clearStack to clearFileStack method
Prevent invalid thumb validation when showPreview is false.
Hide upload icon for file validation errors.
Correct content.length parsing issue in preview cache.
Allow two different max file count checks: maxFileCount and msgFilesTooMany for files being selected before upload; maxTotalFileCount and msgTotalFilesTooMany for total files selected and files included in initial preview
New boolean properties focusCaptionOnBrowse and focusCaptionOnClear which default to true.

v5.0.6 (2019-09-12)

Correct preview frame float styling issues.
Correct file input unlock after file validation errors (for non-ajax mode).
Correct filebatchselected event trigger.
Upload Async does not recognize initialPreview correctly for ajax response immediately sent with uploadUrl.
Correct removeFromPreviewOnError validation.
Default preview template to other when invalid file type is passed.

v5.0.5 (2019-07-26)

Implement .npmignore to clean unwanted files for NPM package.
Activating Open Collective.
Improve Portuguese translations.
Handle special characters in file thumb id attribute.
Enhance thumbnail preview identifiers.

v5.0.4 (2019-07-02)

Enhance thumbnail preview identifiers.

v5.0.4 (2019-06-30)

Correct drag indicator SCSS.
Correct preferIconicPreview parsing.
Correct getFileStack and getFileList methods.

v5.0.3 (2019-05-12)

Correct the sequence of raise of filechunksuccess event.
Implement stale bot.
Enhance image auto orientation for zoom images when thumbnail is hidden.
Enhance Krajee Explorer themes for better image preview.
Resumable uploads enhancements (only when enableResumableUpload is true).
Add new properties to fileActionSettings: indicatorPaused and indicatorPausedTitle
Enhance pause and resume behavior by showing appropriate indicators on the file thumbnails
Add resume method and enhance pause method for resumable uploads
Remove upload button from individual thumbnails and ability to upload selective single file for resumable uploads.
Correct uploadParamNames to include all parameters.

v5.0.2 (2019-04-19)

New error message properties (updates to locales): msgProgressError, msgDeleteError, and msgUploadError (modification)
Standardize error alert formats for ajax deletes.
Allow proper retry of error uploads based on retryErrorUploads setting.
Better management of console log messages.
Correct resumable upload progress update behavior when showPreview is false.
Correct remove button display validation set via fileActionSettings.
Correct resize image error.
Validate for undefined zoom data.

v5.0.1 (2019-03-26)

Set defaults for progressDelay to 0 and resumableUploadOptions.chunkSize to 2048 KB i.e. (2 MB)
Fix uploadExtraData to be submitted correctly with ajax responses.
Add ability to sanitize zoom cache.
Add ability to change ajax submission URL dynamically e.g. uploadUrl, deleteUrl, resumableUploadOptions.testUrl.

v5.0.0 (2019-03-25)

Allow throttling / delaying xhr progress updates.
Display extended upload statistics like bitrate and pending time.
Allow exif data of images to be read from server.
Selectively disable file selection and preview for certain file extensions. - allowedPreviewTypes (existing) - allowedPreviewMimeTypes (existing) - allowedPreviewExtensions (new) - disabledPreviewTypes (new) - disabledPreviewExtensions (new) - defaults to ['msi', 'exe', 'com', 'zip', 'rar', 'app', 'vb', 'scr'] - disabledPreviewMimeTypes (new) - defaults to ['application/octet-stream']
Add ability for pausing and resuming uploads
Better enhanced file management and queuing.
Add ability to define separate thumbnail and zoom images / file data.
Allow configurable file actions as a callback.
Add capability for resumable and chunk uploads.
DOC upload

v4.5.3 (2019-03-22)

Capture file identifier in thumbnails
Better validation of piexif.js and other code enhancements.
AutoOrientImage enhancement for mobile safari.
Ability to configure alt and title attributes for images in initialPreviewConfig.

2018-12-07

Better validation of createObjectURL and revokeObjectURL

v4.5.2 (2018-11-21)

Enhance audio file preview thumbnail styling.
Correct preview zoom modal keydown next and prev keyboard behavior
New `encodeUrl` boolean option that encodes all URL passed by default fixes
Fixed: Error in IE11 Folder drag and drop

v4.5.1 (2018-10-04)

Correct piexif library load validation.
Update default thumbnail shadow style.
Correct `browseOnZoneClick` behavior.
Enhance audio file preview thumbnail styling

v4.5 (2018-08-30)

Enhance htmlEncode to parse undefined variables.
Update Dutch Translations.
Correct full screen modal styling.
Default autoOrientImage to false.
Update Danish Translations.
Allow filebrowse event to be prevented.
Enhance usePdfRenderer callback check to detect android phones.
Update DOMPurify plugin to the latest release.

v4.4.9 (2018-07-26)

Update Font Awesome 5.x theme icons.
Enhance native input display styling when `showBrowse` is `false`
Enhance PDF Preview on iOS devices via external PDF renderer
Enhance auto orientation of images using piexif.js

v4.4.8 (2018-04-06)

Enhance BS button styling for default and FA themes.
Correct showRemove validation in fileActionSettings.
Update Ukranian translations.
Update Hungarian translations.
Update font awesome themes to include missing download icon.
Correct `elErrorContainer` validation for `browseOnZoneClick`.
Add drag and drop functionality for form based submissions.
Correct zoom preview for errored thumbnails.
Fix drag and drop to send files correctly for form submission.

v4.4.7 (2018-01-23)

Update copyright year to current.
Update Slovak translations.
Update Czech translations.
Update Portuguese Brazilian translations.
Update input group styles for BS4 beta3.
Correct preview thumbs stacking post sorting and/or ajax deletion.
Enhance download button behavior to allow Firefox browser to download.
Correct translation path in docs.
Update Georgian translations.
Update Italian translations.
Update Polish translations.
New public method readFiles to allow input & preview of file objects programmatically.
Update rubaxa sortable plugin to fix Chrome support errors.
Update Italian Translations.

v4.4.6 (2017-11-13)

Correct error container close button click behavior for various scenarios.
Update Spanish Translations.
Enhance close button icon markup as per BS4 norms.
Better file action button style.
Reset ajaxAborted status more correctly before upload.
Correct slug default callback to include hyphens in file name.
Enhance default file download action to use button markup.
Add support for previewing TIFF, EPS, AI, WMF files.
Correct sortable drag element parsing during sorting.
Update Portuguese BR Translations.
Update Russian Translations.
Update German Translations.
Enhance mime type parsing for IE 11.
Add support for previewing Office file formats (e.g. docx, xlsx, pptx).
Supports all common formats that google docs can view.
Available only for initial preview content (where the document is accessible via a public web link).
Update README to include updated cover images for bootstrap-fileinput themes (with Bootstrap 4.x support).
Update Czech language folder and code to ISO code cs.
Fix resize image when used with non JPEG images (silently ignoring piexif errors).
Update French Translations.

v4.4.5 (2017-10-01)

Enhance SCSS/SASS styling configurations.
New placeholder property and various caption rendering enhancements.
Update Slovak Translations.
Update Czech Translations.

v4.4.4 (2017-09-22)

Correct markup during file validation errors (non-ajax mode)
Enhance styling of zoom modal header and buttons
Enhance modal button styles

v4.4.3 (2017-08-28)

Better form reset behavior and update of reset method in docs.
Add Lithuanian Translations.
Update Japanese Translations & Locales.
New property uploadUrlThumb.
Add ability to retry errored file uploads.
New plugin properties added: retryErrorUploads, fileActionSettings.uploadRetryIcon, fileActionSettings.uploadRetryTitle and msgUploadError.
Add Slovak Translations.
Add Czech Translations.
Fixes to initial preview delete (related to #1034).
Fix documentation for {dataKey}.
Add new event filebeforedelete and enhance delete abort logic.
Correct reset of preview in reset method.
Update French Translations.
Correct image dimension validation to consider non JPEG images.
Enhancement to RTL styling.
Enhancements to file upload single.
Better formatting of ajax errors display.
Update Farsi Translations.

v4.4.2 (2017-06-07)

Image width parsing and styling enhancements.
Update Hungarian Translations.
Add RTL capability (new property rtl to be set) - includes new fileinput-rtl.css (to be loaded after fileinput.css for RTL styling).
Add SCSS image path variable and file-image alt style updates.
Fixed: Zoom preview arrows orientation for RTL.
Correct and fix image load jquery event triggering for browser cache scenarios

v4.4.1 (2017-05-15)

Update Turkish Translations.
Correct file caption display for ajax upload mode when showPreview is false.
Fixed: Image width parsing and styling enhancements

v4.4.0 (2017-04-04)

New property resizeIfMoreThan to control image resize conditionally.
Update default styling for zoom preview for object.
Parse all numeric properties correctly.

v4.3.9 (2017-04-03)

New plugin method zoom with parameter frameId to allow custom triggering of zoomed preview for each thumbnail frame.
Update Spanish Translations.
Correct image resize validation.
Reset form based events more correctly to allow multiple bootstrap file inputs within forms.
Correct validation for allowedFileTypes.
Append zoom modal dialog to body element if available to avoid multiple BS modals conflict.
Enhance events like fileclear and filepreajax to be aborted via event.preventDefault().
New properties msgUploadBegin and msgUploadEnd to display a better progress status. The layoutTemplates.progress will support a new token {status}.
Enhance uploaded thumb frames to not reset or change the frame identifier after successful upload.
Fix doubling of images for async bulk uploads when initial preview is returned via ajax response.
Correct file-success-remove event handling.
Correct file size validation for empty files.
New plugin method to get files in preview and config.
Correct overwriteInitial validation for async batch uploads returning dynamic initial preview post upload.
Enhance zoom preview styling for large height images.
Prevent duplicate files to be dragged and dropped.
Add Swedish Translations.
Update German Translations.

v4.3.8 (2017-02-21)

Correct config.width parsing.
Correct typo in bootstrap.min.css.
Enhance/Standardize CSS Styles for Krajee Default Theme.
Update Spanish Translations.
Update Russian Translations.
More correct validation of allowedFileTypes to accept null values.
Enhance zoom preview styling for Krajee Explorer theme.
Better id parsing and resetting of uploaded file thumbnails.
Update Portuguese BR translations.

v4.3.7 (2017-02-12)

Update Greek Translations.
New property msgFileTypes to control descriptions/localizations of file types displayed.
Correct init preview auto replace post uploadSingle action in thumbnails.
Enhancement for preventing upload when data is empty. New property msgUploadEmpty has been incorporated.
Correct file indices assignment during validation of images.
Add Korean Translations.
Correct fileimagesresized event triggering.
Extend language configuration to consider defaults.
Allow drag sort of single uploaded thumbnails with initialPreview config set (post upload).
Update Finnish Translations.
Correct validation and defaults init for allowedPreviewTypes.
Correct clearing of file preview including zoom cache.
Update Polish Translations.
Update Czech Translations.
Correct initialPreview generation and sortable behavior for async uploads.
Display zoom preview navigation buttons only when multiple files exist.
Enhance preview modal to be appended to body before each zoom action (if body tag exists).
Update German Translations.
Create Kazakh Translations.
Ensure frameClass setting in initialPreviewConfig is considered.
Better file size calculation and display.
Default error handling for unknown ajax errors.
Thumb Frame CSS class as configurable property.
Enhance and revamp preview caching.
Initialize template defaults in a better manner.
New properties within layoutTemplates.
Launch a brand new Krajee theme: explorer.

v4.3.6 (2016-12-18)

Better default preview zoom settings.
Update Russian Translations.
Update Chinese Translations.
Better image resized event handling.
More correct thumbnail identification post rearrange.
New validation for invalid slug file name (caption).
New validation for minimum file size.
Auto orientation of images based on EXIF data.
Fix IE memory issue on image load.
Update Spanish Translations.
Allow MOV files preview for supported devices and browsers.
Update Hungarian Translations.
Add Slovenian Translations.
add ability to control and render different previews for file thumbnails and zoomed preview content
new property preferIconicPreview will try to parse the previewFileIconSettings and previewFileExtSettings to automatically force iconic previews for file thumbnails.
new property preferIconicZoomPreview will try to parse the previewFileIconSettings and previewFileExtSettings to automatically force iconic previews in the zoomed content.
the above properties will be applied and parsed for initialPreview content as well.

v4.3.5 (2016-08-10)

Correct right parsing of fileuploaded event params.
Update Portugese Brazilian Translations.
Update Vietnamese Translations.
Update Russian Translations.
Correct IE11 file clear bug when using without ajax.
Correct file slug name parsing for an invalid file extension.

v4.3.4 (2016-08-03)

Fix bug for ifSet validation.
Add contribution templates.
Update Japanese Translations.
Update Turkish Translations.
Correctly concat ajax output in initial preview.
Implement progressUploadThreshold to show processing when waiting for server response.
Pass right `previewId` to `fileuploaded` event
Reset caption correctly on clear

v4.3.3 (2016-07-07)

Populate filestack for files greater than maxFilePreviewSize.
Update Spanish Translations.
Re-enable drag and drop support for IE Edge.
Fix custom preview icons to be displayed and validated correctly.
Add grammatically correct "No files selected" message.
Remove invalid files from filestack correctly for validation errors.

v4.3.2 (2016-06-05)

Correct initialization of allowedPreviewTypes.
Synchronize latest package on NuGet.
Fixed unset method in deleting previewCache index.
Fixed previewCache tags reset.
Correct Finnish Localizations.
Update German Translations.
Find correct filename in IE9.
New property maxFilePreviewSize to control preview of large size files.
Enhance ability for PDF and HTML preview.
Enhanced PDF support as PDF embedding is now possible for initialPreview. In addition a new template for PDF is available within previewTemplates.
HTML Preview is enhanced with a better template. The plugin also now includes support for DOMPurify plugin (and availa