IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

 PHP Discussion :

Champ bootstrap 4 "Custom file input" vide [4.x]


Sujet :

PHP

  1. #1
    Membre régulier
    Inscrit en
    Décembre 2005
    Messages
    109
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations forums :
    Inscription : Décembre 2005
    Messages : 109
    Points : 92
    Points
    92
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    ->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 twig : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    “La folie, c’est se comporter de la même manière et s’attendre à un résultat différent.” Albert E.

  2. #2
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2011
    Messages
    351
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2011
    Messages : 351
    Points : 582
    Points
    582
    Par défaut
    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)

  3. #3
    Membre régulier
    Inscrit en
    Décembre 2005
    Messages
    109
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations forums :
    Inscription : Décembre 2005
    Messages : 109
    Points : 92
    Points
    92
    Par défaut
    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
    “La folie, c’est se comporter de la même manière et s’attendre à un résultat différent.” Albert E.

  4. #4
    Membre régulier
    Inscrit en
    Décembre 2005
    Messages
    109
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations forums :
    Inscription : Décembre 2005
    Messages : 109
    Points : 92
    Points
    92
    Par défaut
    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 twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    {% block javascripts %}{% endblock %}
    </body>

    qui doit devenir :
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    “La folie, c’est se comporter de la même manière et s’attendre à un résultat différent.” Albert E.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Requête avec champ NULL simple quote
    Par tidou95220 dans le forum Requêtes
    Réponses: 2
    Dernier message: 13/07/2012, 14h15
  2. remplacer des mots en utilisant file input et
    Par faamugol dans le forum Macros et VBA Excel
    Réponses: 11
    Dernier message: 28/11/2008, 15h28
  3. champ de type file qui se vide.
    Par Switch03 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/11/2008, 14h40
  4. afficher du texte dans le champ de saisie de type file
    Par MANU_2 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 01/09/2005, 15h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo