Automatically convert a file input to a bootstrap file input widget by setting its class as file. Note that a drag and drop zone is enabled by default for browsers like Chrome and Mozilla even for form based uploads (since release v4.4.8).

<input id="input-b1" name="input-b1" type="file" class="file" data-browse-on-zone-click="true">

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 (and hide the drop zone by setting dropZoneEnabled to false). 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).ready(function() {
    $("#input-b5").fileinput({showCaption: false, dropZoneEnabled: false});
});
</script>

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

<label for="input-6a">Large Input Group</label>
<div class="file-loading"> 
    <input id="input-b6a" name="input-b6a[]" type="file" multiple>
</div>
<br>
<label for="input-6b">Small Input Group</label>
<div class="file-loading"> 
    <input id="input-b6b" name="input-b6b[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
    $("#input-b6a").fileinput({
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 10,
        inputGroupClass: "input-group-lg"
    });
    $("#input-b6b").fileinput({
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 10,
        inputGroupClass: "input-group-sm"
    });
});
</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).ready(function() {
    $("#input-b8").fileinput({
        rtl: true,
        dropZoneEnabled: false,
        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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
    $("#input-b9").fileinput({
        showPreview: false,
        showUpload: false,
        elErrorContainer: '#kartik-file-errors',
        allowedFileExtensions: ["jpg", "png", "gif"]
        //uploadUrl: '/site/file-upload-single'
    });
});
</script>