File name not showing in file input in bootstrap

Question

I have this html code

<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <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>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>

When I run and try to upload a file by clicking browse and select a file i want to change the label text to the name of the file I uploaded how can I achieve that? I'm using bootstrap. If you don't use bootstrap and use normal html it works in default way and shows the file name. But I have to use bootstrap here. So, please suggest a solution that goes with bootstrap.

Ameer · Accepted Answer · 2020-08-29 16:29:31Z

1

You're going to need to use some JavaScript for this. I'll walk you through the steps: First detect when a file gets uploaded, then get the file name and update the label contents with the filename. Below is a brief example.

let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
  label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});

<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <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>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>

If you require any more clarification please don't hesitate to ask.

edited Aug 29, 2020 at 16:29

answered Aug 29, 2020 at 15:53

Ameer

2,0002 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Soumalya Bhattacharya Over a year ago

Its all okay but the thing is it is showing the full file path I just want the file name

Ameer Over a year ago

Alright I'll update it quickly, if this helped you I would greatly appreciate if you could accept the answer!

Soumalya Bhattacharya Over a year ago

I will do it mate surely! Its giving me the fakepath

Ameer Over a year ago

I just updated it, it should remove the fake path part now

Collectives™ on Stack Overflow

File name not showing in file input in bootstrap

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related