Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome).
Basic usage examples of the bootstrap-fileinput plugin.

Automatically convert a file input to a bootstrap file input widget by setting its class as file.

<label class="control-label">Select File</label>
<input id="input-1" type="file" class="file">

Hide file preview thumbnails.

<label class="control-label">Select File</label>
<input id="input-1a" type="file" class="file" data-show-preview="false">

Use file input attributes (e.g. multiple upload) for setting input behavior and data attributes to control plugin options. For example, hide/show display of upload button and caption.

<label class="control-label">Select File</label>
<input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">

Set the file input widget to be readonly or disabled.

<label class="control-label">Readonly Input</label>
<input id="input-3a" type="file" class="file" readonly="true">
<label class="control-label">Disabled Input</label>
<input id="input-3b" type="file" class="file" disabled="true">

Initialize file input widget via javascript. Hide the caption and display widget with only buttons. You can add the file-loading class to show a spinning indicator, while the plugin loads.

<label class="control-label">Select File</label>
<input id="input-4" name="input4[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-4").fileinput({showCaption: false});
});
</script>

Change size of whole widget (e.g. bootstrap input group styling) and set max files count allowed to 10.

<label class="control-label">Select File</label>
<input id="input-6" name="input6[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-6").fileinput({
        showUpload: false,
        maxFileCount: 10,
        mainClass: "input-group-lg"
    });
});
</script>

Using data attributes to configure the entire widget. This example shows how you can pass json within data attributes in the HTML markup (check data-allowed-file-extensions which basically sets the plugin property allowedFileExtensions)

<label class="control-label">Select File</label>
<input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>

An example of configuring the plugin to work in Right-To-Left (RTL) mode and orientation. You need to set the rtl property of the plugin to enable this mode and also load the css/fileinput-rtl.css file after the css/fileinput.css on your page for RTL styling. The plugin for this example is initialized via javascript (note that you must remove the CSS class file from your input when doing this).

NOTE: You must load the css/fileinput-rtl.css file after the css/fileinput.css on your page for RTL styling.

<link href="/path/to/css//css/fileinput.min.css" rel="stylesheet">
<link href="/path/to/css//css/fileinput-rtl.min.css" rel="stylesheet">
<div dir=rtl>
    <label class="control-label">Select File</label>
</div>
<!-- note that your input must just set the `rtl` data property of the plugin or in your javascript code -->
<input id="input-8" name="input8[]" multiple type="file" class="file-loading"'>
<script>
$(document).on('ready', function() {
    $("#input-8").fileinput({
        rtl: true,
        allowedFileExtensions: ["jpg", "png", "gif"]
    });
});
</script>