Champ bootstrap 4 "Custom file input" vide

Bonjour à tous,

je m'acharne sur la création un blog, j'en suis à l'upload de photos.
ça fait un moment que je me casse la tête sur différentes solutions pour le champ de sélection du fichier.
En me référant à cette page :
https://getbootstrap.com/docs/4.3/co...tom-file-input

en n'utilisant que la 2è moitié du 1er exemple :

Code:

---

1 2 3 4

<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>

---

EDIT :
j'ai modifié mon code en rédigeant ce message, j'utilise le champ fourni par le formulaire "PostType.php":

Code:

---

->add('image', FileType::class, ['label' => 'Affiche', 'required' => false, 'mapped' => false])

---

mais ça revient au même problème.

tout fonctionne, l'upload se fait mais le champ reste désespérément à la valeur "Choose file",
sur l'exemple de la doc de bootstrap ça fonctionne mais pas en local chez moi. ça commence à etre
énervant car je dois faire un vieux mélange de symfony et de html tout cracra pour que ça fonctionne.

je viens de penser que c'est peut être dû à l'installation de bootstrap en local, voici une partie du base.html.twig :

Code:

---

1 2 3 4

{% block stylesheets %} <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/vendor/1-col-portfolio.css"> {% endblock %}

---

Auriez-vous une idée ?
Merci

Salut,

En fait c'est le comportement standard de Bootstrap qui cache le "vrai" input type=file afin de modifier son rendu, si tu regardes le code source sur la doc tu verras qu'il y a du JavaScript qui s'occupe de récupérer le nom du fichier sélectionné. En réalité Bootstrap masque le "vrai" champ input type=file et affiche un champ qui lui ressemble mais qui est plus facile à personnaliser.

Tu as une solution à ton problème décrite ici (en anglais) : https://symfonycasts.com/screencast/...e-upload-field
En deux temps donc :

1. Ajouter un placeholder sur le "faux" champ
2. Ajouter du JavaScript qui écoute les changements sur ce champ afin de récupérer le nom du fichier dans le "vrai" (celui qui est masqué) et le recopier dans le placeholder du champ visible dès qu'un fichier est sélectionné

P.S. Pour inclure tes ressources (JS, CSS, etc) tu devrais utiliser la méthode "asset()" tant que tu n'utilises pas Webpack Encore (cf. https://symfony.com/doc/current/temp...king-to-assets)

oh bon dieu de mince (pour rester poli)

le 1er lien a marché direct après un F5, j'en pouvais plus que ça me prenne la tête depuis des semaines
je vais avoir un code propre :)

je sais pas ou t'habites _Thomas mais je te paierais bien une bière
merci merci

pour synthétiser au cas où le 1er lien disparaisse et aider clairement ceux qui pourraient avoir le meme souci,

tout en bas du "base.html.twig" il y a ceci :

Code:

---

1 2	{% block javascripts %}{% endblock %} </body>

---

qui doit devenir :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

{% block javascripts %} <script>                 $('.custom-file-input').on('change', function(event) {                     var inputFile = event.currentTarget;                     $(inputFile).parent()                         .find('.custom-file-label')                         .html(inputFile.files[0].name);                 });             </script> {% endblock %} </body>

---

puis rafraîchir la page

Have Fun