Nice Clean File Input Plugin With jQuery and Bootstrap 3/4 - Bootstrap Fileinput

Nice Clean File Input Plugin With jQuery and Bootstrap 3/4 - Bootstrap Fileinput
File Size: 286 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Fileinput is an Html5 file input enhancement built with jQuery, Bootstrap 4 (or Bootstrap 3) for creating a nice-looking file uploader that allows you to select multiple files with image & file preview.

You might also like:

How to use it:

1. Include the necessary jQuery library and Boostrap framework's stylesheet in the Html page.

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

2. Include the jQuery Bootstrap Fileinput plugin's javascript and CSS after jQuery library.

<link href="css/fileinput.css" rel="stylesheet">
<script src="js/fileinput.min.js"></script>

3. 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/plugins/piexif.min.js"></script>
<script src="/path/to/plugins/purify.min.js"></script>
<script src="/path/to/plugins/sortable.min.js"></script>

4. 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">

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

  // settings here

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

language: 'en',
showCaption: true,
showBrowse: true,
showPreview: true,
showRemove: true,
showUpload: true,
showCancel: true,
showClose: true,
showUploadedThumbs: true,
browseOnZoneClick: false,
autoReplace: false,
autoOrientImage: false, // if `true` applicable for JPEG images only
required: false,
rtl: false,
hideThumbnailContent: false,
encodeUrl: true,
generateFileId: null,
previewClass: '',
captionClass: '',
frameClass: 'krajee-default',
mainClass: 'file-caption-main',
mainTemplate: null,
purifyHtml: true,
fileSizeGetter: null,
initialCaption: '',
initialPreview: [],
initialPreviewDelimiter: '*$$*',
initialPreviewAsData: false,
initialPreviewFileType: 'image',
initialPreviewConfig: [],
initialPreviewThumbTags: [],
previewThumbTags: {},
initialPreviewShowDelete: true,
initialPreviewDownloadUrl: '',
removeFromPreviewOnError: false,
deleteUrl: '',
deleteExtraData: {},
overwriteInitial: true,
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>'
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'
previewTemplates: {},
previewContentTemplates: {},
preferIconicPreview: false,
preferIconicZoomPreview: false,
allowedPreviewTypes: undefined,
allowedPreviewMimeTypes: null,
allowedFileTypes: null,
allowedFileExtensions: null,
defaultPreviewContent: null,
customLayoutTags: {},
customPreviewTags: {},
previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
previewFileIconClass: 'file-other-icon',
previewFileIconSettings: {},
previewFileExtSettings: {},
buttonLabelClass: 'hidden-xs',
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',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
uploadClass: 'btn btn-default btn-secondary',
uploadUrl: null,
uploadUrlThumb: null,
uploadAsync: true,
uploadExtraData: {},
zoomModalHeight: 480,
minImageWidth: null,
minImageHeight: null,
maxImageWidth: null,
maxImageHeight: null,
resizeImage: false,
resizePreference: 'width',
resizeQuality: 0.92,
resizeDefaultImageType: 'image/jpeg',
resizeIfSizeMoreThan: 0, // in KB
minFileSize: 0,
maxFileSize: 0,
maxFilePreviewSize: 25600, // 25 MB
minFileCount: 0,
maxFileCount: 0,
validateInitialCount: false,
msgValidationErrorClass: 'text-danger',
msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
msgErrorClass: 'file-error-message',
progressThumbClass: "progress-bar bg-success progress-bar-success progress-bar-striped active",
progressClass: "progress-bar bg-success progress-bar-success progress-bar-striped active",
progressCompleteClass: "progress-bar bg-success progress-bar-success",
progressErrorClass: "progress-bar bg-danger progress-bar-danger",
progressUploadThreshold: 99,
previewFileType: 'image',
elCaptionContainer: null,
elCaptionText: null,
elPreviewContainer: null,
elPreviewImage: null,
elPreviewStatus: null,
elErrorContainer: null,
errorCloseButton: $h.closeButton('kv-error-close'),
slugCallback: null,
dropZoneEnabled: true,
dropZoneTitleClass: 'file-drop-zone-title',
fileActionSettings: {},
otherActionButtons: '',
textEncoding: 'UTF-8',
ajaxSettings: {},
ajaxDeleteSettings: {},
showAjaxErrorDetails: true,
mergeAjaxCallbacks: false,
mergeAjaxDeleteCallbacks: false,
retryErrorUploads: true,
reversePreviewOrder: false



  • 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 available in plugins folder). This processes and cleans the HTML from XSS before previewing. This behavior can be controlled via purifyHtml property that defaults to true.
  • Various preview enhancements. 
  • Enhancements to file preview icons
  • Ability to configure browse button display and file select via zone click

v4.3.1 (2016-01-29)

  • Fixed: Set default value for 'removeFromPreviewOnError' to false
  • Fixed: Enhance default file type parsing to intelligently not render unpreviewable content

v4.3.0 (2016-01-26)

  • Correct Drag and drop issue

v4.2.9 (2016-01-20)

  • Update Dutch Translations.
  • Error alert box and preview thumbnail styling enhancements .
  • Improve default slug callback to accept most characters

v4.2.8 (2015-10-12)

  • Update bootstrap bower version to support only 3.x variants.
  • Implement package.json.
  • Add Arabic Translations.
  • Update Turkish Translations.
  • Update CSS selectors prefix to start with file.

This awesome jQuery plugin is developed by kartik-v. For more Advanced Usages, please check the demo page or visit the official website.