Avec Bootstrap 4 le nom de fichier n'est pas affiché dans les éléments <input type=“file” …>. C'est parce que ces éléments sont rendus différemment, avec un élément <label> au lieu de l'input habituel.

Pour afficher le nom du fichier sélectionné, il faut ajouter un peu de Javascript juste après l'élément <input>.

Voici un formulaire tel qu'il est produit par Symfony, sans ajouter aucune option :

<form name="upload_form" method="post" enctype="multipart/form-data">
    <div class="custom-file">
        <input type="file" id="upload_form_fichier" name="upload_form[fichier]" required="required" class="custom-file-input" />
        <label for="upload_form_fichier" class="custom-file-label"></label>
    </div>
 
    <button type="submit" class="btn btn-primary">Envoyer</button>
 
    <input type="hidden" id="upload_form__token" name="upload_form[_token]"
        value="ValeurDuTokenDeSecuriteBlaBlaBla..." />
</form>

<script type="application/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('input[type="file"]').onchange = function(event) {
            var fileName = event.target.files[0].name;
            event.target.nextElementSibling.innerText = fileName;
        }
    }, false);
</script>

EN REVANCHE sur le site de Bootstrap ça fonctione bien…