Customizable Bootstrap File Input Plugin With jQuery

A jQuery plugin for Bootstrap that converts any button elements into easy-to-customize file inputs for your uploader UI.

How to use it:

1. Make sure you first have both jQuery library and Bootstrap framework loaded properly in the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery-1.12.1.min.js"></script>

2. Download the plugin and load the bootstrap-button-to-input-file.js script after jQuery library.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery-1.12.1.min.js"></script>

3. Initialize the plugin and we're ready to go.

<script src="bootstrap-button-to-input-file.js"></script>

4. Create basic file inputs just by adding the CSS class 'bfs' to your Bootstrap buttons as follows:

<button class="bfs btn btn-default" >Choose File</button>
<button class="bfs btn btn-primary" >Choose File</button>
<button class="bfs btn btn-success" >Choose File</button>
<button class="bfs btn btn-info" >Choose File</button>
<button class="bfs btn btn-warning" >Choose File</button>
<button class="bfs btn btn-danger" >Choose File</button>

5. Specify the input style using html5 data-style attribute.

<button type="button" class="bfs btn btn-success" 
        data-style="fileStyle-r">
        Choose File
</button>

<button type="button" class="bfs btn btn-success" 
        data-style="fileStyle-l">
        Choose File
</button>

6. Add a custom placeholder to the file input.

<button type="button" class="bfs btn btn-success" 
        data-placeholder="placeholder"
        data-style="fileStyle-r">
        Choose File
</button>

7. Assign an unique ID to your file input.

<button type="button" class="bfs btn btn-success" 
        data-placeholder="placeholder"
        data-id="1"
        data-style="fileStyle-r">
        Choose File
</button>

8. Change the size of your file inputs.

<button type="button" class="bfs btn btn-success" 
        data-placeholder="placeholder"
        data-id="1"
        data-style="fileStyle-r"
        data-size="lg">
        Choose File
</button>

<button type="button" class="bfs btn btn-success" 
        data-style="fileStyle-l"
        data-size="sm">
        Choose File
</button>

9. Enable or disable the input text.

<button type="button" class="bfs btn btn-success" 
        data-placeholder="placeholder"
        data-id="1"
        data-style="fileStyle-r"
        data-size="lg"
        data-enabled="true">
        Choose File
</button>

10. Apply a custom CSS class to the file input.

<button type="button" class="bfs btn btn-success" 
        data-placeholder="placeholder"
        data-id="1"
        data-style="fileStyle-r"
        data-size="lg"
        data-enabled="true"
        data-textclass="">
        Choose File
</button>

---

This awesome jQuery plugin is developed by mmativ. For more Advanced Usages, please check the demo page or visit the official website.