
Yet another JavaScript plugin to extend the Bootstrap 4 from controls that help you create custom file selection input with browser button for file upload.
Also supports multiple file selections.
1. Install the bs-custom-file-input with NPM.
npm install bs-custom-file-input --save
2. Import the bs-custom-file-input as a module.
import bsCustomFileInput from 'bs-custom-file-input'
3. Or directly import the bs-custom-file-input plugin into your Bootstrap 4 page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="dist/bs-custom-file-input.js"></script>
4. Initialize the plugin on document ready.
$(document).ready(function () { bsCustomFileInput.init() })
5. Create a custom file input following the html structure like this.
<div class="custom-file"> <input type="file" class="custom-file-input"> <label class="custom-file-label" for="inputGroupFile01">Choose file</label> </div> <div class="custom-file"> <input type="file" multiple class="custom-file-input"> <label class="custom-file-label" for="inputGroupFile01">Choose several files</label> </div>
This awesome jQuery plugin is developed by Johann-S. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 22.08.2018
- Source