PHPackages kartik-v/bootstrap-fileinput - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. kartik-v/bootstrap-fileinput ActiveLibrary[File & Storage](/categories/file-storage) kartik-v/bootstrap-fileinput ============================ An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more. v5.5.4(2y ago)5.4k7.9M↓11.3%2.4k[28 issues](https://github.com/kartik-v/bootstrap-fileinput/issues)[3 PRs](https://github.com/kartik-v/bootstrap-fileinput/pulls)13BSD-3-ClauseJavaScript Since May 7Pushed 1y ago373 watchersCompare [ Source](https://github.com/kartik-v/bootstrap-fileinput)[ Packagist](https://packagist.org/packages/kartik-v/bootstrap-fileinput)[ Docs](https://github.com/kartik-v/bootstrap-fileinput)[ Fund](https://opencollective.com/bootstrap-fileinput)[ RSS](/packages/kartik-v-bootstrap-fileinput/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)DependenciesVersions (95)Used By (13) [ ![Krajee Logo](https://camo.githubusercontent.com/07c239a09021cd45af9443cbe1eb539cb7caf89140f593fb7f6a86891b0c32d5/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins") bootstrap-fileinput --- [![Donate](https://camo.githubusercontent.com/0336bc43d88554a3f2d6c74dddf312bc2c65c2eacca70d83ae40f5567098d00e/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") [![kartikv](https://camo.githubusercontent.com/0cf29a542375e1a46e84d8bf5805a4e5c0a6ee98b6547ccdc0c55eed49d99c69/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67)](https://www.buymeacoffee.com/kartikv "Buy me a coffee") ============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================ [](#------------------------bootstrap-fileinput------------------) [![Financial Contributors on Open Collective](https://camo.githubusercontent.com/7952ebef3f20ed11defc39ead63703fd21e5701a3d73c5c7a9f857b6924367e5/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f616c6c2f62616467652e7376673f6c6162656c3d66696e616e6369616c2b636f6e7472696275746f7273)](https://opencollective.com/bootstrap-fileinput)[![Latest Stable Version](https://camo.githubusercontent.com/19f9f76aded3271ac6566e099330c9938816250876936dd1153380a7ea7665be/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d66696c65696e7075742f762f737461626c65)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)[![License](https://camo.githubusercontent.com/5843a1d7522ee7a8f1e8205a2eb5693fb267d0f8bccc34366bba708974670a99/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d66696c65696e7075742f6c6963656e7365)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)[![Packagist Downloads](https://camo.githubusercontent.com/fe8c7ec324f55c679a09ef1c642b370496a89c3890e1ba83b2cca8b31682a6b4/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d66696c65696e7075742f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)[![Monthly Downloads](https://camo.githubusercontent.com/14cf5534c7f9bb87c16ab50072e271ddff262c635a5f0039e5007d992e4bb71b/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d66696c65696e7075742f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/bootstrap-fileinput) An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview for various files, offers multiple selection, resumable chunk uploads, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap 5.x, 4.x, and 3.x CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files. > NEW: Bootstrap 5.x support is added from v5.2.0 (major release after v5.1.5) of the plugin. With v5.2.0, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if the bootstrap library JS file is loaded). Alternatively, check the `$.fn.fileinputBsVersion` setting for advanced use cases to avoid Bootstrap version detection issues. > NOTE: Version 5.x is a significant rewrite. With version 5.x, the plugin code has been revamped with enhanced file management, resumable chunk uploads support, and other new features. You can go through the various closed enhancements and features and documented for [Release 5.x milestone](https://github.com/kartik-v/bootstrap-fileinput/milestone/1?closed=1). [![Krajee Default Theme](https://user-images.githubusercontent.com/3592619/60393698-ea1fc280-9b36-11e9-9f16-b27c529d6819.png)](https://user-images.githubusercontent.com/3592619/60393698-ea1fc280-9b36-11e9-9f16-b27c529d6819.png) > NOTE: An alternative new [Krajee Explorer Theme](http://plugins.krajee.com/file-krajee-explorer-demo) (preview shown below) for `bootstrap-fileinput` has been released and available since v4.3.7. For more theming options and suggestions refer the [theming demos](http://plugins.krajee.com/file-theme-demo). [![Krajee Explorer Theme](https://user-images.githubusercontent.com/3592619/60393721-51d60d80-9b37-11e9-991c-810c942ac516.png)](https://user-images.githubusercontent.com/3592619/60393721-51d60d80-9b37-11e9-991c-810c942ac516.png) Documentation and Demo ---------------------- [](#documentation-and-demo) View the [plugin documentation](http://plugins.krajee.com/file-input) and [plugin demos](http://plugins.krajee.com/file-input/demo) at Krajee JQuery plugins. Pre-requisites -------------- [](#pre-requisites) 1. [Bootstrap 5.x or 4.x, or 3.x](http://getbootstrap.com/) 2. Latest [JQuery](http://jquery.com/) 3. Most modern browsers supporting HTML5 (inputs and FileReader API) including CSS3 & JQuery. For Internet Explorer, one must use IE versions 10 and above. IE9 and below will work as a normal file input, and will not support multiple file selection or the HTML 5 FileReader API. 4. With release 4.0, AJAX uploads are supported. AJAX uploads require that the browser support HTML5 FormData and XHR2 (XMLHttpRequest 2). Most modern browsers support FormData and XHR2. The plugin will automatically degrade to normal form based submission for browsers not supporting AJAX uploads > NOTE: > > - Bootstrap 5.x is supported in addition to Bootstrap 3.x and 4.x since release v5.2.0. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. > - Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. > - You can use the [sass branch](https://github.com/kartik-v/bootstrap-fileinput/tree/sass) for installation using `bootstrap-sass` dependency. The [master branch](https://github.com/kartik-v/bootstrap-fileinput/tree/master) can be used for installation using plain `bootstrap` dependency. Installation ------------ [](#installation) ### Using Bower [](#using-bower) To install using the `bower` package manager run: ``` bower install bootstrap-fileinput ``` ### Using NPM [](#using-npm) To install using the `npm` package manager run: ``` npm install bootstrap-fileinput ``` ### Using Composer [](#using-composer) To install using the `composer` package manager run: ``` $ php composer.phar require kartik-v/bootstrap-fileinput "@dev" ``` or add: ``` "kartik-v/bootstrap-fileinput": "@dev" ``` to your composer.json file ### Manual Install [](#manual-install) You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-fileinput/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-fileinput/tarball/master) and extract the plugin assets (css and js folders) into your project. Usage ----- [](#usage) Step 1: Load the following assets on your page in the order mentioned. ``` ``` With v5.2.1, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if you have loaded the bootstrap.min.js before fileinput.min.js). In case of any issues - you can explicitly set the bootstrap version by setting the following variable before the plugin initialization script. ``` // set this before initializing the fileinput plugin $.fn.fileinputBsVersion = '3.4.1'; // for example if using bootstrap css 3.4.1 version ``` 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`. The theme file `themes/fa/theme.js` can be optionally included for the font awesome icons styling. The locale file `.js` can be optionally included for translating for your language if needed. **Optional Dependent Plugins** - The `piexif.min.js` file is the source for the [Piexifjs plugin by hMatoba](https://github.com/hMatoba/piexifjs). It is required to be loaded before `fileinput.min.js` if you wish to use the image resize feature of the **bootstrap-fileinput** plugin. - The `sortable.min.js` file is the source for the [Sortable plugin by rubaxa](https://github.com/rubaxa/Sortable). It is required to be loaded before `fileinput.min.js` if you wish to sort the thumbnails in the initial preview. For ease of access, the sources for the above plugins are included in the `js/plugins` folder of this project repository. Step 2: Initialize the plugin on your page. For example, ``` // HTML markup $(document).ready(function() { // initialize with defaults $("#input-id").fileinput(); // with plugin options $("#input-id").fileinput({'uploadUrl': '/path/to/your-upload-api', 'previewFileType': 'any'}); }); ``` The `#input-id` is the identifier for the input (e.g. `type = file`) on your page, which is hidden automatically by the plugin. Alternatively, you can directly call the plugin options by setting data attributes to your input field. To auto initialize the plugin with just HTML markup - add the CSS class `file` to your file input markup element. ``` ``` **NOTE:** When initializing the plugin via javascript (as mentioned earlier), do not add the CSS class `file` to the input markup (else you would get an erronaeous / inconsistent output). Contributors ------------ [](#contributors) ### Code Contributors [](#code-contributors) This project exists thanks to all the people who contribute. \[[Contribute](.github/CONTRIBUTING.md)\]. [![](https://camo.githubusercontent.com/93d832c18a8853bc914f93fb5f074c31009c8c8f3b9c9f12bc6e13208890b0de/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f636f6e7472696275746f72732e7376673f77696474683d38393026627574746f6e3d66616c7365)](https://github.com/kartik-v/bootstrap-fileinput/graphs/contributors) ### Financial Contributors [](#financial-contributors) Become a financial contributor and help us sustain our community. \[[Contribute](https://opencollective.com/bootstrap-fileinput/contribute)\] #### Individuals [](#individuals) [![](https://camo.githubusercontent.com/672b13b98199229223c430d5a1ef6620a4203ca6dae8bc0037a750e5027bf004/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f696e646976696475616c732e7376673f77696474683d383930)](https://opencollective.com/bootstrap-fileinput) #### Organizations [](#organizations) Support this project with your organization. Your logo will show up here with a link to your website. \[[Contribute](https://opencollective.com/bootstrap-fileinput/contribute)\] [![](https://camo.githubusercontent.com/7791bf0787e07f0d02225339db0583cc31f8acb362151a621010a923653250be/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f302f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/0/website)[![](https://camo.githubusercontent.com/90f2dfb4d151ca3d68a9ece9344e23180e23c149fc577084edbfa7a851412ef5/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f312f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/1/website)[![](https://camo.githubusercontent.com/194c108f4fbec8ba90bfcc50e2c732ffab84842b38f80a7e3af83c5a3f5dd64b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f322f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/2/website)[![](https://camo.githubusercontent.com/9046bb1dafb4d548b970522259e0221271730ead869468a31bb770840919ac01/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f332f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/3/website)[![](https://camo.githubusercontent.com/5eb249fa8f2316c9847975d8ac18859bf19da28c164044d42d6c9f13cc5a3eaf/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f342f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/4/website)[![](https://camo.githubusercontent.com/feb9cb07533f80ae80d55662fd96a5f9219a7f5b5636e3524991cd73da2422cb/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f352f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/5/website)[![](https://camo.githubusercontent.com/d038eac5e8b6166bf14a753726a5c64a32421a04511de749fed41c315ff84e3d/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f362f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/6/website)[![](https://camo.githubusercontent.com/591cf6fda03756ad99ddfc6c7cde0568c8211745dd5b1288a0e5a8c654172a01/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f372f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/7/website)[![](https://camo.githubusercontent.com/9cf6f8cb846b5ee8eac100d43e4a92ff99fe1a7ee9a132153ce8b73033f3af0b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f382f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/8/website)[![](https://camo.githubusercontent.com/c293a79e435bfe18fa57a4f362d8f120d84fecff2b7bf1ebf6cd480b8f3a152b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d66696c65696e7075742f6f7267616e697a6174696f6e2f392f6176617461722e737667)](https://opencollective.com/bootstrap-fileinput/organization/9/website) License ------- [](#license) **bootstrap-fileinput** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details. ### Health Score 62 — FairBetter than 99% of packages Maintenance31 Infrequent updates — may be unmaintained Popularity77 Solid adoption and visibility Community51 Growing community involvement Maturity79 Established project with proven stability Bus Factor1 Top contributor holds 92.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~39 days Recently: every ~162 days Total 92 Last Release 770d ago Major Versions v1.9.0 → 2.0.02014-07-31 v2.9.0 → v3.0.02014-12-08 v3.0.0 → v4.0.02014-12-16 v4.5.3 → v5.0.02019-03-24 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3592619?v=4)[Kartik Visweswaran](/maintainers/kartik-v)[@kartik-v](https://github.com/kartik-v) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (1068 commits)")[![RobiNN1](https://avatars.githubusercontent.com/u/11664877?v=4)](https://github.com/RobiNN1 "RobiNN1 (9 commits)")[![rapomon](https://avatars.githubusercontent.com/u/5431095?v=4)](https://github.com/rapomon "rapomon (7 commits)")[![CyanoFresh](https://avatars.githubusercontent.com/u/4249082?v=4)](https://github.com/CyanoFresh "CyanoFresh (6 commits)")[![clq321](https://avatars.githubusercontent.com/u/6662934?v=4)](https://github.com/clq321 "clq321 (5 commits)")[![horkenw](https://avatars.githubusercontent.com/u/9416799?v=4)](https://github.com/horkenw "horkenw (5 commits)")[![Kwaadpepper](https://avatars.githubusercontent.com/u/6019313?v=4)](https://github.com/Kwaadpepper "Kwaadpepper (5 commits)")[![dragonfly4](https://avatars.githubusercontent.com/u/221351?v=4)](https://github.com/dragonfly4 "dragonfly4 (4 commits)")[![zolikonta](https://avatars.githubusercontent.com/u/16335756?v=4)](https://github.com/zolikonta "zolikonta (3 commits)")[![bamz3r](https://avatars.githubusercontent.com/u/1755003?v=4)](https://github.com/bamz3r "bamz3r (3 commits)")[![koxu1996](https://avatars.githubusercontent.com/u/6506780?v=4)](https://github.com/koxu1996 "koxu1996 (3 commits)")[![loshmis](https://avatars.githubusercontent.com/u/6163000?v=4)](https://github.com/loshmis "loshmis (3 commits)")[![Maks3w](https://avatars.githubusercontent.com/u/1301698?v=4)](https://github.com/Maks3w "Maks3w (3 commits)")[![MikaKarjunen](https://avatars.githubusercontent.com/u/17431169?v=4)](https://github.com/MikaKarjunen "MikaKarjunen (3 commits)")[![sgrastar](https://avatars.githubusercontent.com/u/6063256?v=4)](https://github.com/sgrastar "sgrastar (3 commits)")[![DarkCompiled](https://avatars.githubusercontent.com/u/5394451?v=4)](https://github.com/DarkCompiled "DarkCompiled (2 commits)")[![alphp](https://avatars.githubusercontent.com/u/8992091?v=4)](https://github.com/alphp "alphp (2 commits)")[![DanielDanielDanielD](https://avatars.githubusercontent.com/u/19807059?v=4)](https://github.com/DanielDanielDanielD "DanielDanielDanielD (2 commits)")[![lamoglia](https://avatars.githubusercontent.com/u/5335298?v=4)](https://github.com/lamoglia "lamoglia (2 commits)")[![salihklc](https://avatars.githubusercontent.com/u/5588634?v=4)](https://github.com/salihklc "salihklc (2 commits)") --- Tags ajax-uploadbootstrapbootstrap-fileinputbowerchunkchunked-uploadscssfilereader-apihtmlhtml5javascriptjqueryjquery-pluginkrajeekrajee-explorer-themeresumableresumable-uploadthemeuploadxhrimagefilejqueryuploadajaxbootstrappreviewinputprogressmultipledelete ### Embed Badge ![Health badge](/badges/kartik-v-bootstrap-fileinput/health.svg) ``` [![Health](https://phpackages.com/badges/kartik-v-bootstrap-fileinput/health.svg)](https://phpackages.com/packages/kartik-v-bootstrap-fileinput) ``` ### Alternatives [blueimp/jquery-file-upload File Upload widget for jQuery. 141.5M18](/packages/blueimp-jquery-file-upload)[kartik-v/yii2-widget-fileinput An enhanced FileInput widget for Bootstrap 3.x, 4.x & 5.x with file preview, multiple selection, and more features (sub repo split from yii2-widgets) 2286.8M95](/packages/kartik-v-yii2-widget-fileinput)[liyunfang/yii2-upload-behavior Upload behavior for Yii 2 161.7k](/packages/liyunfang-yii2-upload-behavior) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)