File Input Features

• The plugin will convert a simple HTML file input to an advanced file picker control. Will help fallback to a normal HTML file input for browsers not supporting JQuery or Javascript.

• The file input consists of the following three sections with options and templates to control the display:

  • file caption section: to display a brief information of the file(s) selected

  • file action buttons section: to browse, remove, and upload files.

  • file preview section: to display the selected files on client for preview (supports preview of image, text, flash, and video file types). Other file types will be displayed as normal thumbnails.

• The plugin automatically converts an input with type = file to an advanced file picker input if you set its class = file. All options to the input can be passed as HTML5 data attributes.

• Ability to select and preview multiple files. Uses HTML 5 File reader API to read and preview files. Displays the progress of files being being loaded onto the preview zone, in case many files are chosen.

• Ability to copy and paste files or images from the clipboard on to the fileinput plugin (just focus on the file caption name input and paste your clipboard content).

• Ability to drag and drop files or images on to the fileinput plugin.

• Offers predefined templates and CSS classes which can be changed to style your file-input display as per your needs.

• Ability to configure the plugin to show an initial preview of images/files with initial caption (more useful for record update scenarios). Refer the initialPreview, initialPreviewConfig, and initialCaption properties in the plugin options section for configuring this.

• Ability to zoom content as a detailed preview. See a slideshow of zoomed content in preview, maximize to borderless or fullscreen preview.

• Ability to sort/rearrange content in the initial preview via drag and drop.

• Ability to theme the widget entirely and control styling and layouts.

• Supports multi language widgets on same page through locales/translations.

• Option to show/hide any or all of the following:

  • caption section

  • preview section

  • upload button

  • remove button

• Customise the location of the target container elements to display the entire plugin, the caption container, the caption text, the preview container, preview image, and preview status.

• For text file previews, autowrap the text to the thumbnail width, and show a wrap indicator link to display complete text on hover. You can customize the wrap indicator (which defaults to …).

• Customise the messages for preview, progress, and files selected.

• Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.

• Triggers JQuery events for advanced development. Events currently available are filereset, fileclear, filecleared, fileloaded, and fileerror.

• Disabled and readonly file input support.

• Dynamically auto size the file captions for long file names exceeding container width.

• Raise new fileimageuploaded event that fires after image is completely loaded on the preview container.

• Autosize preview images when they exceed the size of the preview container.

• Completely templatized and extensible to allow configuration of the file-input the way the developer wants.

• Preview intelligence based on various file preview types. The inbuilt file support types are categorized as image, text, html, video, audio, flash, object, and other.

• allowedPreviewTypes: You can now configure which all file types are allowed to be shown as a preview. This defaults to ['image', 'html', 'text', 'video', 'audio', 'flash', 'object']. Thus all file types are treated as an object to preview by default. For exampleTo preview only image and video, you can set this to ['image', 'video']. To disable content preview for all file-types and show the previewIcon instead as a thumbnail, set this to null, empty, or false.

• allowedPreviewMimeTypes: In addition to allowedPreviewTypes, you can also control which all mime types can be displayed for preview. This defaults to null, meaning all mime types are supported. >NOTE: With release 2.5.0 you can now control which file types or extensions are allowed for upload by setting allowedFileTypes and allowedFileExtensions.

• layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1, main2, preview, caption, and modal.

• previewTemplates: All preview templates for each preview type have been combined into one property, instead of separate templates for image, text etc. The keys are the formats as set in allowedPreviewTypes and values are the templates used for previewing. There are default prebuilt templates for each preview file type (generic, image, text, html, video, audio, flash, object, and other). The generic template is used only for displaying initialPreview content using direct markup.

• previewSettings: Allows you to configure width and height for each preview image type. The plugin has default widths and heights predefined for each type i.e image, text, html, video, audio, flash, and object.

• fileTypeSettings: Allows you to configure and identify each preview file type using a callback. The plugin has default callbacks predefined to identify each type i.e image, text, html, video, audio, flash, and object.

• Replacing tags within templates has been enhanced. With this release it will automatically check for multiple occurrences of each tag to replace within a template string.

• Manipulate events and add your own custom validation messages easily by returning output to abort uploads in any of the other events.

• Support for translations and locales.

File Upload Features

With release 4.0.0, the plugin now also includes inbuilt support for AJAX Uploads and selectively adding or deleting files. AJAX upload functionality are built upon HTML5 FormData and XMLHttpRequest Level 2 standards. Most modern browsers do support this standard, but the plugin will automatically degrade to normal form based submission for unsupported browsers.

• Add functionality for AJAX based UPLOAD using HTML5 FormData (most modern browsers support it). Will degrade to normal Form Based File submission if this is not supported.

• To use AJAX Upload, one must set the uploadUrl property.

• Enhance plugin to now allow files to be added, appended, removed (based on FEEDBACK from many). Thus one can append files to preview.

• New DRAG & DROP zone available in preview to drag and drop files and append.

• Delete or upload files one by one OR in batch.

• If showPreview is set to false, or uploadUrl is not supported plugin will degrade to normal form based upload.

• Configurable indicators for file awaiting upload, file successfully uploaded, files errored in upload.

• Ability to add extra form data with ajax based uploads.

• Upload progress bar and individual thumbnail upload indicators.

• Ability to cancel and abort ongoing AJAX uploads.

• Build up initial preview content (e.g. gallery of saved images). You can set initial preview actions (prebuilt support for initial preview delete). Other custom action buttons can be set for initial preview thumbnails as well.

• Ensure plugin is still lean in size and optimized for performance inspite of the above features by optimally utilizing HTML5 & jquery features only.

• Automatically refresh preview with content from server as soon as an ajax upload finishes.

Bower Package Manager

Installation via bower package manager is as simple as running:

$ bower install bootstrap-fileinput

Node Package Manager

Installation via NPM is as simple as running:

$ npm install bootstrap-fileinput

Composer Package Manager

You can install bootstrap-fileinput via composer package manager. Either run:

$ php composer.phar require kartik-v/bootstrap-fileinput "dev-master"

or add:

"kartik-v/bootstrap-fileinput": "dev-master"

to your composer.json file

Manual Install

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin asset files and folders into your project.

Load the following assets in your header.

<!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">

<!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
<!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous" -->

<!-- the fileinput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->

<!-- the jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
     preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed 
     correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
     selected file (note: this will involve a small processing overhead in scanning of file contents locally). If you 
     do not load these scripts then the mime type parsing will largely be derived using the extension in the filename
     and some basic file content parsing signatures. -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/filetype.min.js" type="text/javascript"></script>

<!-- piexif.min.js is 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 -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/piexif.min.js" type="text/javascript"></script>

<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- the main fileinput plugin script JS file -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>

<!-- following theme script is needed to use the Font Awesome 5.x theme (`fa5`). Uncomment if needed. -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/themes/fa5/theme.min.js"></script -->

<!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/locales/LANG.js"></script>

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the fileinput.min.css and fileinput.min.js. For enabling the default icons used in the plugin load the Bootstrap 5.x icon library bootstrap.min.css. Alternatively, the Font Awesome theme can be enabled by loading FontAwesome Icons CSS file and its theme file fa5/theme.min.js. The locale file for your language LANG.js can be optionally included for translating for your language if needed. In case you need RTL (Right-To-Left) orientation, then you need to load the fileinput-rtl.min.css stylesheet file after fileinput.min.css

// Optional setup: bootstrap library version will be auto-detected based on the 
// loaded bootstrap JS library bootstrap.min.js. But if you wish to override the 
// bootstrap version yourself, then you can set the following property before
// the plugin init script (available since plugin release v5.5.0)

$.fn.fileinputBsVersion = "3.3.7"; // if not set, this will be auto-derived

// initialize plugin with defaults
$("#input-id").fileinput();
 
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

<input id="input-id" type="file" class="file" data-preview-file-type="text">