PHPackages stratoss/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. stratoss/bootstrap-fileinput ActiveLibrary[File & Storage](/categories/file-storage) stratoss/bootstrap-fileinput ============================ An enhanced HTML 5 file input for Bootstrap 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more. v999.1.2(10y ago)0441BSD-3-ClauseJavaScript Since May 7Pushed 10y ago1 watchersCompare [ Source](https://github.com/stratoss/bootstrap-fileinput)[ Packagist](https://packagist.org/packages/stratoss/bootstrap-fileinput)[ Docs](https://github.com/kartik-v/bootstrap-fileinput)[ RSS](/packages/stratoss-bootstrap-fileinput/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (4)DependenciesVersions (41)Used By (1) bootstrap-fileinput =================== [](#bootstrap-fileinput) [![Bower version](https://camo.githubusercontent.com/4f5579057be247f08b567af8d4a3bf88b143ab996c18ea42e81c5165859aa052/68747470733a2f2f62616467652e667572792e696f2f626f2f626f6f7473747261702d66696c65696e7075742e737667)](http://badge.fury.io/bo/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 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap 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. [![File Input Screenshot](https://camo.githubusercontent.com/c8e2a29374aea17ad38dd00879f924ff0f7a88d557ca16418c3b74430f58a109/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d334669456d635f6f6b63342f5642775f64324c42414a492f4141414141414141414c382f4b62566a355839447573302f773539362d683435342d6e6f2f46696c65496e7075742e6a7067)](https://camo.githubusercontent.com/c8e2a29374aea17ad38dd00879f924ff0f7a88d557ca16418c3b74430f58a109/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d334669456d635f6f6b63342f5642775f64324c42414a492f4141414141414141414c382f4b62566a355839447573302f773539362d683435342d6e6f2f46696c65496e7075742e6a7067) > NOTE: The latest version of the plugin is v4.2.9 (dev-master). Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 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 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. Installation ------------ [](#installation) ### Using Bower [](#using-bower) You can use the `bower` package manager to install. Run: ``` bower install bootstrap-fileinput ``` ### Using Composer [](#using-composer) You can use the `composer` package manager to install. Either 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 in your header. ``` ``` 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 locale file `fileinput_locale_.js` can be optionally included for translating for your language if needed. NOTE: The `canvas-to-blob.min.js` file is the source for the [JavaScript-Canvas-to-Blob plugin by blueimp](https://github.com/blueimp/JavaScript-Canvas-to-Blob). It is required to be loaded before `fileinput.js` if you wish to use the image resize feature of the **bootstrap-fileinput** plugin. For ease of access, the plugin source for JavaScript-Canvas-to-Blob is included in the `js/plugins` folder of this project repository. Step 2: Initialize the plugin on your page. For example, ``` // initialize with defaults $("#input-id").fileinput(); // with plugin options $("#input-id").fileinput({'showUpload':false, '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. ``` ``` License ------- [](#license) **bootstrap-fileinput** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details. ### Health Score 33 — LowBetter than 75% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community22 Small or concentrated contributor base Maturity75 Established project with proven stability Bus Factor1 Top contributor holds 89.3% 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 ~15 days Recently: every ~30 days Total 40 Last Release 3776d ago Major Versions v1.9.0 → v2.0.02014-07-31 v2.9.0 → v3.0.02014-12-08 v3.0.0 → v4.0.02014-12-16 v4.2.8 → v999.12016-01-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/2014fb9799a16a8f980d39b66f4da2a64889a432497c80d63f306b22b4d07cc5?d=identicon)[stratoss](/maintainers/stratoss) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (474 commits)")[![CyanoFresh](https://avatars.githubusercontent.com/u/4249082?v=4)](https://github.com/CyanoFresh "CyanoFresh (6 commits)")[![horkenw](https://avatars.githubusercontent.com/u/9416799?v=4)](https://github.com/horkenw "horkenw (5 commits)")[![clq321](https://avatars.githubusercontent.com/u/6662934?v=4)](https://github.com/clq321 "clq321 (5 commits)")[![loshmis](https://avatars.githubusercontent.com/u/6163000?v=4)](https://github.com/loshmis "loshmis (3 commits)")[![bamz3r](https://avatars.githubusercontent.com/u/1755003?v=4)](https://github.com/bamz3r "bamz3r (3 commits)")[![Maks3w](https://avatars.githubusercontent.com/u/1301698?v=4)](https://github.com/Maks3w "Maks3w (3 commits)")[![ziaenezhad](https://avatars.githubusercontent.com/u/8807409?v=4)](https://github.com/ziaenezhad "ziaenezhad (2 commits)")[![dfisch](https://avatars.githubusercontent.com/u/346200?v=4)](https://github.com/dfisch "dfisch (2 commits)")[![dragonfly4](https://avatars.githubusercontent.com/u/221351?v=4)](https://github.com/dragonfly4 "dragonfly4 (2 commits)")[![fizista](https://avatars.githubusercontent.com/u/780054?v=4)](https://github.com/fizista "fizista (2 commits)")[![franciscoaleixo](https://avatars.githubusercontent.com/u/666320?v=4)](https://github.com/franciscoaleixo "franciscoaleixo (2 commits)")[![jespermjonsson](https://avatars.githubusercontent.com/u/584245?v=4)](https://github.com/jespermjonsson "jespermjonsson (2 commits)")[![nekofar](https://avatars.githubusercontent.com/u/147401?v=4)](https://github.com/nekofar "nekofar (2 commits)")[![rapomon](https://avatars.githubusercontent.com/u/5431095?v=4)](https://github.com/rapomon "rapomon (2 commits)")[![sgrastar](https://avatars.githubusercontent.com/u/6063256?v=4)](https://github.com/sgrastar "sgrastar (2 commits)")[![iaesaudi](https://avatars.githubusercontent.com/u/11377260?v=4)](https://github.com/iaesaudi "iaesaudi (1 commits)")[![escapeboy](https://avatars.githubusercontent.com/u/115266?v=4)](https://github.com/escapeboy "escapeboy (1 commits)")[![maxxer](https://avatars.githubusercontent.com/u/240201?v=4)](https://github.com/maxxer "maxxer (1 commits)")[![mertskaplan](https://avatars.githubusercontent.com/u/5995181?v=4)](https://github.com/mertskaplan "mertskaplan (1 commits)") --- Tags imagefilejqueryuploadajaxbootstrappreviewinputprogressmultipledelete ### Embed Badge ![Health badge](/badges/stratoss-bootstrap-fileinput/health.svg) ``` [![Health](https://phpackages.com/badges/stratoss-bootstrap-fileinput/health.svg)](https://phpackages.com/packages/stratoss-bootstrap-fileinput) ``` ### Alternatives [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. 5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[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)