Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Basic usage examples of the bootstrap-fileinput plugin.

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)

Automatically convert a file input to a bootstrap file input widget by setting its class as file.
<input id="input-b1" name="input-b1" type="file" class="file">
Hide file preview thumbnails.
<input id="input-b2" name="input-b2" 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. Note that for multiple inputs, your server code must receive an array of file objects (e.g. for PHP server code, you must use the array naming convention for your input).

This example also shows how you can control the placeholder text initially shown by setting the msgPlaceholder property.

<input id="input-b3" name="input-b3[]" type="file" class="file" multiple 
    data-show-upload="false" data-show-caption="true" data-msg-placeholder="Select {files} for upload...">
Set the file input widget to be readonly or disabled.

<label for="input-b4a">Readonly Input</label>
<input id="input-b4a" name="input-b4a" type="file" class="file" readonly="true">
<br>
<label for="input-b4b">Disabled Input</label>
<input id="input-b4b" name="input-b4b" type="file" class="file" disabled="true">
Initialize file input widget via javascript. Hide the caption and display widget with only buttons. You can envelop the input within a container with the file-loading class to show a spinning indicator, while the plugin loads.
<label class="control-label">Select File</label>
<input id="input-b5" name="input-b5[]" type="file" multiple>
<script>
$(document).on('ready', function() {
    $("#input-b5").fileinput({showCaption: false});
});
</script>
Change size of whole widget (e.g. bootstrap input group styling) and set max files count allowed to 10.
<div class="file-loading"> 
    <input id="input-b6" name="input-b6[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-b6").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)
<div class="file-loading">
    <input id="input-b7" name="input-b7[]" multiple type="file" class="file" data-allowed-file-extensions='["csv", "txt"]'>
</div>

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

If you wish to show the loading indicator while plugin loads, then envelop the file input markup inside a container with file-loading CSS class and dir set as rtl.

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 class="file-loading"> <!-- note the direction if you want to display file-loading indicator -->
    <!-- note that your input must just set the `rtl` data property of the plugin or in your javascript code -->
    <input id="input-b8" name="input-b8[]" multiple type="file"'>
</div>
<script>
$(document).on('ready', function() {
    $("#input-b8").fileinput({
        rtl: true,
        allowedFileExtensions: ["jpg", "png", "gif"]
    });
});
</script>

An example of rendering the file input widget inside a bootstrap modal with showPreview and showUpload set to false. The example also shows how you can render the errors (without a preview) in a custom error container by setting the elErrorContainer property.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="file-loading">
          <input id="input-b9" name="input-b9[]" multiple type="file"'>
        </div>
        <div id="kartik-file-errors"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" title="Your custom upload logic">Save</button>
      </div>
    </div>
  </div>
</div>


<script>
$(document).on('ready', function() {
    $("#input-b9").fileinput({
        showPreview: false,
        showUpload: false,
        elErrorContainer: '#kartik-file-errors',
        allowedFileExtensions: ["jpg", "png", "gif"]
        //uploadUrl: '/site/file-upload-single'
    });
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.