Minimalist File Input Plugin For Bootstrap - bootstrap-prettyfile.js

bootstrap-prettyfile.js is an extremely lightweight jQuery plugin which adds a pretty file select button to the default Bootstrap file input field.

How to use it:

1. Load the necessary jQuery library and Bootstrap's style sheet in your html document.

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

2. Download the zip and then load the JavaScript file bootstrap-prettyfile.js after jQuery library.

<script src="bootstrap-prettyfile.js"></script>

3. Create a normal file input on the webpage.

<form role="form">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" multiple>
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

4. Call the function on the file input and the plugin will do the rest.

$('input[type="file"]').prettyFile();

5. Change the default text for the file select button.

$('input[type="file"]').prettyFile({
  text : "Select Files"
});

---

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