Bootstrap input file

21.01.2020 Programování #bootstrap

Aktivace vlastního vzhledu pro input file v bootstrapu.


HTML

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

JavaScript

Zajistí zobrazení názvu vybraného souboru v input

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>