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"]'>