Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

====== File Input ======

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 :

<code html>
<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>
</code>

<code javascript>
<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>
</code>

**EN REVANCHE** sur
[[https://getbootstrap.com/docs/4.4/components/input-group/#custom-file-input|le site de Bootstrap]]
ça fonctione bien... :!:

Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page