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

Bootstrap Fileinput is an Html5 file input enhancement built with jQuery, Bootstrap 3 and Bootstrap 4 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 Boostrap3's CSS in the Html page.

<link href="" rel="stylesheet">
<script src=""></script>

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

<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/fileinput.min.js" type="text/javascript"></script>

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

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

language: 'en',
showCaption: true,
showPreview: true,
showRemove: true,
showUpload: true,
showCancel: true,
showClose: true,
showUploadedThumbs: true,
autoReplace: false,
previewClass: '',
captionClass: '',
mainClass: '',
mainTemplate: null,
purifyHtml: true,
initialCaption: '',
initialPreview: [],
initialPreviewDelimiter: '*$$*',
initialPreviewAsData: false,
initialPreviewFileType: 'image',
initialPreviewConfig: [],
initialPreviewThumbTags: [],
previewThumbTags: {},
initialPreviewShowDelete: true,
removeFromPreviewOnError: false,
deleteUrl: '',
deleteExtraData: {},
overwriteInitial: true,
layoutTemplates: defaultLayoutTemplates,
previewTemplates: defaultPreviewTemplates,
previewZoomSettings: defaultPreviewZoomSettings,
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-default btn-header-toggle',
    fullscreen: 'btn btn-default',
    borderless: 'btn btn-default',
    close: 'btn btn-default'
allowedPreviewTypes: null,
allowedPreviewMimeTypes: null,
allowedFileTypes: null,
allowedFileExtensions: null,
defaultPreviewContent: null,
customLayoutTags: {},
customPreviewTags: {},
previewSettings: defaultPreviewSettings,
fileTypeSettings: defaultFileTypeSettings,
previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
previewFileIconClass: 'file-icon-4x',
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',
cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
cancelClass: 'btn btn-default',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
uploadClass: 'btn btn-default',
uploadUrl: null,
uploadAsync: true,
uploadExtraData: {},
zoomModalHeight: 480,
minImageWidth: null,
minImageHeight: null,
maxImageWidth: null,
maxImageHeight: null,
resizeImage: false,
resizePreference: 'width',
resizeQuality: 0.92,
resizeDefaultImageType: 'image/jpeg',
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 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',
elCaptionContainer: null,
elCaptionText: null,
elPreviewContainer: null,
elPreviewImage: null,
elPreviewStatus: null,
elErrorContainer: null,
errorCloseButton: '<span class="close kv-error-close">&times;</span>',
slugCallback: null,
dropZoneEnabled: true,
dropZoneTitleClass: 'file-drop-zone-title',
fileActionSettings: {},
otherActionButtons: '',
textEncoding: 'UTF-8',
ajaxSettings: {},
ajaxDeleteSettings: {},
showAjaxErrorDetails: true

Change logs:

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.

  • Publication date: 13.11.2017
  • Source