Menampilkan Nama File Yang Diupload Di Bootstrap 4 dengan Javascript

Bila kita membuat sebuah form di framework Bootstrap yang salah satu field-nya terdapat sebuah field file upload maka secara default nama file yang akan kita upload tidak tampil dalam field file upload tersebut.

Untuk mengatasi masalah di atas kita memerlukan sebuah sebuah skrip Javascript. Skrip ini disisipkan di bawah field file uploadnya.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>
Field file upload default

Kita masukan skrip Javascript-nya di bawah skrip html di atas seperti berikut :

<script type="application/javascript">
    $('#inputGroupFile02').on('change', function() {
        // Ambil nama file 
        let fileName = $(this).val().split('\\').pop();
        // Ubah "Choose a file" label sesuai dengan nama file yag akan diupload
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });
</script>

Jadi, setelah ditambah skrip Javascript maka skrip html-nya akan seperti di bawah ini :

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>

<script type="application/javascript">
    $('#inputGroupFile01').on('change', function() {
        // Ambil nama file 
        let fileName = $(this).val().split('\\').pop();
        // Ubah "Choose a file" label sesuai dengan nama file yag akan diupload
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });
</script>

</div>

Hasil tampilan setelah ditambah file Javascript akan seperti berikut :

Field upload file sudah menampilkan nama file yang mau diupload