File input fileinput.js

Examples

The file input plugin allows you to create a visually appealing file or image input widgets. This plugin is essential as it provide uniform look and feel to input[type="file"] element in all browsers.

File input widgets

Select fileChange Remove

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
    <div class="form-control" data-trigger="fileinput">
        <i class="glyphicon glyphicon-file fileinput-exists"></i> 
        <span class="fileinput-filename"></span>
    </div>
    <span class="input-group-addon btn btn-default btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input type="file" name="...">
    </span>
    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
                    
Select fileChange ×

<div class="fileinput fileinput-new" data-provides="fileinput">
    <span class="btn btn-default btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input type="file" name="...">
    </span>
    <span class="fileinput-filename"></span>
    <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>
                    

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

Select imageChange Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
    <div>
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="...">
        </span>
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>
100%x100%
Select imageChange Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
        <img data-src="holder.js/100%x100%" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
    <div>
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="...">
        </span>
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>          

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.


Usage

Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.

The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.

Via data attributes

Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.

Via JavaScript

$('.fileinput').fileinput()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

Name type description
name string Use this option instead of setting the name attribute on the <input> element to prevent it from being part of the post data when not changed.

Methods

.fileinput(options)

Initializes a file upload widget.

.fileinput('clear')

Clear the selected file.

.fileinput('reset')

Reset the form element to the original value.

Events

Event Type Description
change.bs.fileinput This event is fired after a file is selected.
clear.bs.fileinput This event is fired when the file input is cleared.
reset.bs.fileinput This event is fired when the file input is reset.