Bootstrap

Button To Input File

Jquery Plugin
V.1.0.0
Download GitHub

Demo

Setup

Add Class:
"bfs"
Example:
<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>

Style [Right]

Add data-Attributes:
data-style="fileStyle-r"
Example:
<button type="button" class="bfs btn btn-success" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Style [Left]

Add data-Attributes:
data-style="fileStyle-l"
Example:
<button type="button" class="bfs btn btn-success" data-style="fileStyle-l"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Add ID to Input File

Add data-Attributes:
data-id="Your-ID"
Example:
<button type="button" data-id="Your-ID" class="bfs btn btn-success" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Add Placeholder

Add data-Attributes:
data-placeholder="placeholder"
Example:
<button type="button" data-id="Your-ID" data-placeholder="placeholder" class="bfs btn btn-success" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Size

Add data-Attributes:
data-size="sm"
data-size="lg"
Example:
<button type="button" data-id="Your-ID"  data-placeholder="placeholder" class="bfs btn btn-success" data-size="sm" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Enable Input Text

Add data-Attributes:
data-enabled="true"
data-enabled="false"
Example:
<button type="button" data-id="Your-ID"  data-placeholder="placeholder" class="bfs btn btn-success" data-size="sm" data-enabled="true" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

Add Class to Input text

Add data-Attributes:
data-textclass="textclass"
Example:
<button type="button" data-id="Your-ID"  data-placeholder="placeholder" class="bfs btn btn-success" data-size="sm" data-textclass="textclass" data-style="fileStyle-r"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Choose File</button>

How To Use

Load jQuery and include Button To Input File plugin files. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


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

Make a button and put a class.

<button class="bfs btn btn-default" >Choose File</button>

Call the plugin.

<script type="text/javascript">
    var filestyler = new buttonFileStyler();
</script>

Add the css code.

.bfs{cursor: pointer;z-index: 1;}
.bfs-input{display: none;}
.ButtonHolder{display: inline-block;}

Reference

Data Attributes Option Description
data-style="" 'fileStyle-r','fileStyle-l' This data attributes enable the text area that you can see the input value.
data-id="" You can set "ID" to your input file using this data attribute.
data-placeholder="" This data attribute allow you to put placeholder on your text area.
data-size="" 'sm','lg' This data attribute allow you to change the size of your button.
data-enabled="" 'true','false' This data attribute allow you to enabled or disabled you input text. Default is false.
data-textclass="" This data attribute allow you to add class on your text input. Default is 'bfs-text'.

FAQ

Can i use it for free?
Yes.
Has it any licence
MIT
Can i suggest for a new functionality?
Yes. Use Github
I need help!
Send me message on Facebook or tag me on Stackoverflow and add comment on Github.