Custom File Input For Bootstrap 4 - bs-custom-file-input

File Size: 87.8 KB
Views Total: 27495
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom File Input For Bootstrap 4 - bs-custom-file-input

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 and drag & drop.

How to use it:

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="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" 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 () {

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 class="custom-file">
  <input type="file" multiple class="custom-file-input">
  <label class="custom-file-label" for="inputGroupFile01">Choose several files</label>


v1.3.4 (2020-02-03)

v1.3.2 (2019-03-28)

  • fix(display): display files names on init

v1.3.0 (2018-11-17)

  • bugfix

v1.2.0 (2018-11-16)

  • core: allow to use children in label elements
  • core: remove unused events and better destroy method
  • fix(display): restore text on empty values

v1.1.1 (2018-09-05)

  • bugfix

v1.0.2 (2018-09-02)

  • fix(core): make properties private


  • feat(core): allow to drag and drop files


  • feat(core): allow to pass custom selectors


  • v1.0.2

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