This is how I managed to solve it

Here is the HTML code snippet:

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

And this is the JS code snippet:

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

Important: Many thanks to ajax333221 for pointing out the .text-truncate class that helps in hiding overflow within label if the selected file name is too lengthy.

Starting from the latest version of Bootstrap 4.3, it is now possible to customize the placeholder and button text directly within the label tag:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your custom button text}">{Your custom placeholder text}</label>
</div>

To change the language of the file browser:
Instead of overriding the CSS as suggested by ZimSystem, a more elegant solution is recommended in the bootstrap documentation: create custom bootstrap styles by incorporating languages in SCSS
Learn more about it here: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Tip: Ensure that the lang attribute is correctly configured in your document for this method to be effective

To update the value upon file selection:
You can achieve this using inline javascript like so:

   <label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>
   </label>

Note: The .split('\\').slice(-1)[0] segment removes the C:\fakepath\ prefix

Enhancing Bootstrap 4 Browse Button

For more detailed information, you can visit this link

Today I had the task of creating a browse button that allows for multiple file uploads, but none of the existing snippets met my requirements.

Even the example provided in the official Bootstrap documentation did not work as expected when selecting multiple files.

I have come up with a code snippet that might be useful for others facing similar challenges in the future.

$(document).ready(function() {
  $('input[type="file"]').on("change", function() {
    let filenames = [];
    let files = document.getElementById("customFile").files;
    if (files.length > 1) {
      filenames.push("Total Files (" + files.length + ")");
    } else {
      for (let i in files) {
        if (files.hasOwnProperty(i)) {
          filenames.push(files[i].name);
        }
      }
    }
    $(this)
      .next(".custom-file-label")
      .html(filenames.join(","));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d3c9d1c9d7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <h1 class="text-center">Bootstrap 4 Enhance Multiple File Uploads</h1>
  <div class="col-sm-6 mr-auto ml-auto border p-4">
    <form method="post" enctype="multipart/form-data" action="upload.php">
      <div class="form-group">
        <label><strong>Upload Files</strong></label>
        <div class="custom-file">
          <input type="file" name="files[]" multiple class="custom-file-input form-control" id="customFile">
          <label class="custom-file-label" for="customFile">Choose file</label>
        </div>
      </div>
      <div class="form-group">
        <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
      </div>
    </form>
  </div>
</div>

A functional code example is available here, compatible with both bootstrap 3 and bootstrap 4.3.1 versions.

https://codepen.io/mianzaid/pen/GeEbYV

For Bootstrap version 5

document.querySelectorAll('.form-file-input')
        .forEach(element => element.addEventListener('change', event => event.target.parentElement.querySelector('.form-file-text').innerText = event.target.files[0].name));

This code snippet will impact all file input elements without the requirement to specify element IDs.

If you are looking for an alternative to using jquery, you can try the following solution:

<label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="this.nextElementSibling.innerText = this.files[0].name">
      <span class="custom-file-control"></span>
</label>

Here is the solution with blue box-shadow, border, and outline removed in the custom-file input of bootstrap. The file name will appear when a filename is chosen, and if no file is selected, it will display No file chosen.

    $(document).on('change', 'input[type="file"]', function (event) { 
        var filename = $(this).val();
        if (filename == undefined || filename == ""){
        $(this).next('.custom-file-label').html('No file chosen');
        }
        else 
        { $(this).next('.custom-file-label').html(event.target.files[0].name); }
    });

    input[type=file]:focus,.custom-file-input:focus~.custom-file-label {
        outline:none!important;
        border-color: transparent;
        box-shadow: none!important;
    }
    .custom-file,
    .custom-file-label,
    .custom-file-input {
        cursor: pointer;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container py-5">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Upload</span>
      </div>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
      </div>
    </div>
    </div>

Regarding the file named "bootstrap_4_layout.html.twig":

The function attached to the event listener of '.custom-file-input' element sets the text of its next sibling to the name of the selected file.

After some experimenting, I found a solution that works perfectly in my CSS file:

.custom-file-label::after{content: 'Click Here for New Text' !important;}

Using the power of jquery, achieving this task is quite simple. Here's the code snippet:

$("input.custom-file-input").on("change",function(){if(this.files.length){var filename=this.file[0].name;if(filename.length>23){filename=filename.substr(0,11)+"..."+filename.substr(-10);}$(this).siblings(".custom-file-label").text(filename);}});

If you want to show the name of the file selected using the file input type, you can use the following code snippet:

document.querySelectorAll('input[type=file]').forEach( input => {
    input.addEventListener('change', e => {
        e.target.nextElementSibling.innerText = input.files[0].name;
    });
});

Here is an alternative solution inspired by @Elnoor's method, designed to accommodate multiple file uploads without resorting to the "fakepath hack":

HTML:

<div class="file-container">
    <input id="files" type="file" class="file-input" multiple>
    <label for="files" class="file-label text-truncate">Select files...</label>
</div>

JS:

$('input[type="file"]').on('change', function () {
    let fileNames = [];
    let chosenFiles = document.getElementById('files').files;

    for (let index in chosenFiles) {
        if (chosenFiles.hasOwnProperty(index)) {
            fileNames.push(chosenFiles[index].name);
        }
    }

    $(this).next('.file-label').addClass("file-selected").html(fileNames.join(', '));
});

Bootstrap 4.4:

Create a bar to allow users to select a file. Once a file is selected, display the name of the file along with its extension.

<div class="custom-file">
    <input type="file" class="custom-file-input" id="idEditUploadVideo"
     onchange="$('#idFileName').html(this.files[0].name)">
    <label class="custom-file-label" id="idFileName" for="idEditUploadVideo">Choose file</label>
</div>

If you're looking to apply this code universally to all customized input fields, implement the following jQuery script:

$(document).ready(function () {
    $('.custom-input-field').on('change', function (event) {
         event.target.nextElementSibling.innerHTML = event.target.files[0].name;
    });
});

Enhanced File Uploader with Bootstrap 5.2 Create a custom file input without the need for additional CSS.

Preview Image: https://i.sstatic.net/BVV1O.png

HTML Code Sample:

<div class="input-group">   
     <input type="file" id="uploadFile_Plan_PDF" class="Zupload" accept="application/pdf" hidden/>
     <button type="button" class="btn btn-outline-secondary">
      <i class="fa-solid fa-file-pdf"></i>
     </button>
     <input readonly="readonly" type="text" class="form-control">                                
     <button type="button" class="btn btn-outline-secondary" disabled>
      <i class="fa-solid fa-eye"></i>
     </button>
     <button type="button" class="btn btn-outline-secondary">
      <i class="fa-solid fa-times"></i>
     </button>
</div>

JS Code Snippet:

const collection_uploadFile = document.querySelectorAll(".Zupload");
for (let i = 0; i < collection_uploadFile.length; i++) {
  let uploadFile = collection_uploadFile[i]
  let buttonUpload = uploadFile.nextElementSibling;
  let textBoxUpload = buttonUpload.nextElementSibling;
  let buttonView = textBoxUpload.nextElementSibling;
  let buttonClear = buttonView.nextElementSibling;              

  uploadFile.addEventListener('change', function (e) {
    textBoxUpload.value = this.value;
    buttonView.disabled = this.value?false:true;
  });
  buttonUpload.addEventListener('click', function (e) {uploadFile.click();});
  textBoxUpload.addEventListener('click', function (e) {uploadFile.click();});
  buttonClear.addEventListener('click', function (e) {
    uploadFile.value =""; 
    uploadFile.dispatchEvent(new Event("change"));
  });
}

Live Demo:

Check out the Zupload on jsfiddle