---

Forum » » npds_galerie » » [Résolu] - input type file prototype

---

Posté : 19 sept. 2018, 10:47

dans https://labo.infocapagde.com/modules.php?ModPath=npds_galerie&ModStart=gal&op=formimgs j'ai fini par implémenté les input file customisé de BS (pour info les input de type file sont les plus dur à customiser du fait de leur complexité (sécurité, info native du navigateur etc) .... et donc pour arriver à ça il faut la css complexe de BS + plus une petite touche de js car tout ne peut pas être implémenté par les css ... merci de tester sur tous les navigateurs (sur le labo et sous le theme npds_boost) dites moi ce que vous en pensez car je vais probablement les généraliser à l'ensemble du portail si ça ne présente pas de problème Note sur le process : le form doit avoir un attribut lang

[code markup]lang="'.language_iso(1,'','').'"[/code]

l'input utilise la class spécifique bs

[code css]class="custom-file-input"
[/code]

traduction des occurances dans la css

[code css].custom-file-input:lang(fr) ~ .custom-file-label::after {
    content: "Choisir ..."
}
.custom-file-input:lang(es) ~ .custom-file-label::after {
    content: "Elegir ..."
}
.custom-file-input:lang(de) ~ .custom-file-label::after {
    content: "Wählen ..."
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse ..."
}
.custom-file-input:lang(zh) ~ .custom-file-label::after {
    content: "选择 ..."
}[/code]

et ce bout de js qui sert a réinitialisé l'input

[code js]   <script type="text/!javascript!">
      //").closest("form").get(0).reset();
            e.unwrap();
            event.preventDefault();
            $("#lab"+f).html("'.gal_translate("Sélectionner votre image").'")
         };
      //]]>
   </script>[/code]

---

Cet article provient de Labo NPDS 2015-2025
https://labo.infocapagde.com/viewtopic.php?topic=1107&forum=37