bootstrap-fileinput

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

5,354

2,396

5,354

View on GitHub View on NPM

Top Related Projects

jQuery-File-Upload

30,965

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

dropzone

18,054

Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

fine-uploader

8,188

Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

filepond

15,052

🌊 A flexible and fun JavaScript file upload library

uppy

28,920

The next open source file uploader for web browsers :dog:

webuploader

7,708

It's a new file uploader solution!

Quick Overview

Bootstrap-fileinput is an enhanced HTML 5 file input plugin for Bootstrap 5.x, 4.x, and 3.x. It offers features like preview for various file types, drag & drop support, multiple file selection, and AJAX uploads. The plugin is designed to work seamlessly with Bootstrap's styles and components.

Pros

Extensive file preview support for images, text, HTML, video, audio, and other objects
Highly customizable with a wide range of configuration options
Responsive design that works well on both desktop and mobile devices
Active development and regular updates

Cons

Large file size due to extensive features, which may impact page load times
Steep learning curve for advanced customizations
Some users report occasional conflicts with other Bootstrap plugins
Dependency on Bootstrap framework limits standalone usage

Code Examples

Basic initialization:

$("#input-id").fileinput({
    theme: "fas",
    showUpload: false,
    previewFileType: "any"
});

Advanced configuration with AJAX upload:

$("#input-id").fileinput({
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxFileSize: 5000,
    maxFileCount: 10,
    showCaption: false,
    showRemove: false,
    showUpload: false,
    uploadAsync: false
});

Event handling:

$("#input-id").on("fileuploaded", function(event, data, previewId, index) {
    console.log("File uploaded: ", data.response);
});

Getting Started

Include Bootstrap CSS and JS files in your HTML.
Include the bootstrap-fileinput CSS and JS files:

<link href="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.0/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>

Create an input element with the file type:

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

Initialize the plugin using JavaScript:

$("#input-id").fileinput({
    theme: "fas",
    showUpload: false
});

Competitor Comparisons

jQuery-File-Upload

30,965

Pros of jQuery-File-Upload

More comprehensive and feature-rich, offering advanced functionalities like chunked uploads and resumable file transfers
Better cross-browser compatibility, including support for older browsers
Extensive documentation and a larger community, providing better resources for troubleshooting and customization

Cons of jQuery-File-Upload

Steeper learning curve due to its complexity and extensive feature set
Heavier footprint, which may impact page load times and performance
Requires jQuery as a dependency, which may not be ideal for projects using modern JavaScript frameworks

Code Comparison

bootstrap-fileinput:

$("#input-id").fileinput({
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ['jpg', 'png', 'gif']
});

jQuery-File-Upload:

$('#fileupload').fileupload({
    url: '/file-upload-batch/2',
    dataType: 'json',
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo('#files');
        });
    }
});

The code comparison shows that jQuery-File-Upload offers more granular control and customization options, while bootstrap-fileinput provides a simpler, more straightforward implementation for basic file upload functionality.

dropzone

18,054

Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

Pros of Dropzone

More lightweight and flexible, with a smaller footprint
Easier to customize and style to match specific design requirements
Better support for drag-and-drop functionality across different browsers

Cons of Dropzone

Less out-of-the-box integration with Bootstrap framework
Fewer built-in features for file preview and management
May require more custom code for advanced functionality

Code Comparison

bootstrap-fileinput:

$("#input-id").fileinput({
    uploadUrl: "/file-upload-url",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxFileSize: 1000,
    maxFilesNum: 10,
    //...
});

Dropzone:

Dropzone.options.myDropzone = {
    url: "/file-upload-url",
    acceptedFiles: "image/*",
    maxFilesize: 1,
    maxFiles: 10,
    //...
};

Both libraries offer similar core functionality for file uploads, but their implementation and configuration differ. bootstrap-fileinput is more tightly integrated with Bootstrap and provides more built-in features, while Dropzone offers a more flexible and customizable approach to file uploads.

fine-uploader

8,188

Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Pros of Fine Uploader

More comprehensive feature set, including chunked uploads and resume functionality
Better cross-browser compatibility, including older versions of Internet Explorer
Extensive documentation and API reference

Cons of Fine Uploader

Steeper learning curve due to its complexity
Larger file size, which may impact page load times
Requires more setup and configuration for basic use cases

Code Comparison

bootstrap-fileinput:

$("#input-id").fileinput({
    uploadUrl: "/file-upload-url",
    allowedFileExtensions: ["jpg", "png", "gif"]
});

Fine Uploader:

var uploader = new qq.FineUploader({
    element: document.getElementById("uploader"),
    request: {
        endpoint: "/file-upload-url"
    },
    validation: {
        allowedExtensions: ["jpg", "png", "gif"]
    }
});

Summary

Fine Uploader offers a more robust set of features and better cross-browser support, making it suitable for complex file upload requirements. However, it comes with a steeper learning curve and larger file size. bootstrap-fileinput, on the other hand, provides a simpler setup and integration with Bootstrap, making it ideal for projects that prioritize ease of use and quick implementation. The choice between the two depends on the specific needs of your project and the level of customization required.

filepond

15,052

🌊 A flexible and fun JavaScript file upload library

Pros of FilePond

Modern, sleek UI with customizable themes and animations
Built-in image editing capabilities (crop, resize, filter)
Supports drag and drop, paste, and remote URL uploads

Cons of FilePond

Steeper learning curve due to more advanced features
Requires more setup for basic functionality
Larger file size compared to bootstrap-fileinput

Code Comparison

bootstrap-fileinput:

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>
$("#input-id").fileinput({
    uploadUrl: "/file-upload-batch/2"
});
</script>

FilePond:

<input type="file" class="filepond">
<script>
FilePond.create(document.querySelector('input[type="file"]'), {
    server: '/api'
});
</script>

Both libraries offer file upload functionality, but FilePond provides a more modern and feature-rich approach with its customizable UI and built-in image editing capabilities. However, this comes at the cost of a steeper learning curve and larger file size. bootstrap-fileinput, on the other hand, offers a simpler setup and integration, especially for projects already using Bootstrap. The choice between the two depends on the specific requirements of your project and the desired level of customization and features.

uppy

28,920

The next open source file uploader for web browsers :dog:

Pros of Uppy

More modular and flexible architecture, allowing for easier customization and integration with various services
Supports a wider range of upload sources, including webcam, screen capture, and remote URLs
Offers a more modern and visually appealing user interface out of the box

Cons of Uppy

Larger file size and potentially higher resource usage due to its comprehensive feature set
Steeper learning curve for developers, especially when implementing advanced features
May require more configuration to achieve basic functionality compared to Bootstrap File Input

Code Comparison

Bootstrap File Input:

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>
$("#input-id").fileinput({
    uploadUrl: "/file-upload-batch/2"
});
</script>

Uppy:

const uppy = new Uppy()
  .use(Dashboard, { trigger: '#select-files' })
  .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })

uppy.on('complete', (result) => {
  console.log('Upload complete! We've uploaded these files:', result.successful)
})

Both libraries provide easy-to-use file upload functionality, but Uppy offers more advanced features and customization options at the cost of increased complexity.

webuploader

7,708

It's a new file uploader solution!

Pros of webuploader

More comprehensive file upload solution with advanced features like chunked uploads and server-side integration
Better support for mobile devices and touch interfaces
More extensive documentation and examples

Cons of webuploader

Larger file size and potentially more complex setup compared to bootstrap-fileinput
Less seamless integration with Bootstrap framework
Not as actively maintained (last update was in 2019)

Code Comparison

bootstrap-fileinput:

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>
$("#input-id").fileinput({
    uploadUrl: "/file-upload-batch/2"
});
</script>

webuploader:

<div id="uploader">
    <div class="queueList">
        <div id="dndArea" class="placeholder">
            <div id="filePicker"></div>
        </div>
    </div>
</div>
<script>
var uploader = WebUploader.create({
    pick: '#filePicker',
    server: '/fileupload'
});
</script>

Both libraries offer file upload functionality, but webuploader provides a more feature-rich solution with greater flexibility. bootstrap-fileinput is simpler to implement and integrates well with Bootstrap, while webuploader offers more advanced features at the cost of increased complexity.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.

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

Bootstrap 5.x or 4.x, or 3.x
Latest JQuery
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.
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 for details.

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 on your page in the order mentioned.

<!-- 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.3.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.4/css/all.css" crossorigin="anonymous" -->

<!-- the fileinput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.4/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.4/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.4/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.4/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.4/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.4/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.3.3/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.4/js/fileinput.min.js"></script>

<!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.4/themes/fas/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.4/js/locales/LANG.js"></script>

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

// HTML markup
<input id="input-id" name="file-data" type="file">

<script>
$(document).ready(function() {
    // initialize with defaults
    $("#input-id").fileinput();

    // with plugin options
    $("#input-id").fileinput({'uploadUrl': '/path/to/your-upload-api', 'previewFileType': 'any'});
});
</script>

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.

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

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