bootstrap-fileinput

by kartik-v

An enhanced HTML 5 file input for Bootstrap 4.x./3.x with file preview, multiple selection, and more...

4.8K Stars 2.3K Forks Last release: 3 months ago (v5.1.2) Other 1.2K Commits 75 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Krajee Logo
bootstrap-fileinput
Donate

Financial Contributors on Open Collective Bower version Latest Stable Version License Packagist Downloads Monthly Downloads

An enhanced HTML 5 file input for Bootstrap 3.x and 4.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 3.x or 4.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.

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.

Krajee Default Theme

NOTE: An alternative new Krajee Explorer Theme (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.

Krajee Explorer Theme

Documentation and Demo

View the plugin documentation and plugin demos at Krajee JQuery plugins.

Pre-requisites

  1. Bootstrap 3.x or 4.x
  2. Latest JQuery
  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 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the CHANGE LOG for details. - You can use the sass branch for installation using

bootstrap-sass
dependency. The master branch can be used for installation using plain
bootstrap
dependency.

Installation

Using Bower

To install using the

bower
package manager run:
bower install bootstrap-fileinput

Using NPM

To install using the

npm
package manager run:
npm install bootstrap-fileinput

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

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.

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 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. 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. 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,

// 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.


Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

bootstrap-fileinput is released under the BSD-3-Clause License. See the bundled

LICENSE.md
for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.