Fil RSS

Input File, Bootstrap, CSS, jQuery…

2

20 août 2015 par Sébastien

Dans un développement récent d’une application Web, je me suis appuyé sur le fameux Bootstrap pour en construire l’interface.

Si le résultat est plus que satisfaisant, il reste néanmoins les input file dont le style reste dans le look du système d’exploitation qui visualise la page. Ça jure pas mal !

Je me suis donc lancé dans le code pour essayer de trouver un moyen simple pour atteindre cet objectif.

Étape 1 : Faire une page html avec l’aspect voulu

Je considère que Bootstrap 3 est correctement chargé dans les en-têtes : on se concentre uniquement sur le problème !

Input Type Bootstrap

 

Ok pour l’interface ! Mais pour le moment, rien n’est fonctionnel !

On a juste inséré un file input de type text accompagné de 2 boutons qui ne font rien.

L’un servira à choisir le fichier à envoyer et l’autre a éventuellement remettre le champ à zéro.

Les deux autres boutons sont les classiques de tous les formulaires pour remise à zéro en envoi des données.

Étape 2 : Tranformer tout ça en un « input type file » fonctionnel !

Pour ça on ne va faire appel qu’à jQuery et Javascript. Comme ça, on aura juste un script à insérer dans la page pour transformer en « input type file » tous les éléments qu’on aura choisi.

Mais pour ça, il va falloir repérer les élément :

  • On va ajouter la classe .input-file  pour le .input-group , c’est à dire l’ensemble du composant
  • On va nommer le .input-file  name="Fichier_1" . (c’est le nom qui permettra d’identifier le fichier quand il sera transmis : $_FILES[‘nom’], qu’on met habituellement pour retrouver les données transmises)
  • On va ajouter la classe .btn-choose  pour préciser le bouton qui choisit le fichier
  • On va jouter la classe .btn-reset  pour préciser le bouton qui efface la sélection

On va maintenant mouliner tout ça à grand renfort de Javascript et de jQuery.

L’idée est la suivante : insérer un vrai « input type file » masqué et synchroniser l’interface avec. J’ai choisi de l’ajouter juste avant le composant.

Voilà le code l’élément :

Je lui ai affecté une classe .input-ghost  pour y accéder facilement ensuite. Afin qu’il soit transmis avec le formulaire tout en étant masqué, un display:none  ne convient pas. On le masque donc avec visibility:hidden  mais sa place reste vide et donc on fixe sa hauteur à 0 ( height:0 ) afin qu’il disparaisse complétement.

Petite fonction Javascript/jQuery qui va tout faire :

Explication de texte ligne par ligne :

Pour la suite, composant correspond au bloc HTML qui affiche le file input stylé et élément correspond au vrai file input qui est ajouté.

  1. Début de la fonction bs_input_file()
  2. On va ajouter du code HTML avant les composants dont une classe est .input-file
  3. Fonction anonyme qui va ajouter le code
  4. On vérifie que le composant n’a pas déjà bénéficié d’un ajout
  5. On contruit l’objet <input type='file'>  qui sera ajouté à la page : ça sera la variable « element« .
  6. On prend le name du composant et on l’affecte à l’élément
  7. Quand on a choisi un fichier (événement change()), on execute une fonction…
  8. …qui affecte le nom du fichier comme valeur du premier input enfant, c’est à dire l' input type="text"  du composant.
    • element.val()  renvoie une fausse URL du genre : «  C:\\fakepath\nom.ext »
    • split('\\')  transforme cette URL en tableau en découpant suivant les \
    • pop()  retourne le dernier élément du tableau soit : nom.ext
  9. Fin de la fonction précédente
  10. On cherche le bouton .btn-choose  et on gère son clic…
  11. …pour qu’il déclenche un clic sur l’élément.
  12. Fin du clic
  13. On cherche le bouton .btn-reset  et on gère son clic…
  14. …pour qu’il remette l’élément à zéro
  15. …pour qu’il remette l’input du composant à zéro
  16. Fin du clic
  17. On change l’aspect du pointeur de souris pour l’input du composant dont l’aspect par défaut était le pointeur « texte »
  18. On change le comportement de l’input du composant lors d’un clic souris
  19. …pour qu’il déclenche un clic sur l’élément
  20. …Mais qu’il ne prenne pas le focus
  21. Fin du clic
  22. on renvoit l’élément
  23. Fin du if
  24. Fin de la fonction anonyme
  25. Fin de l’insertion before
  26. Fin de la fonction bs_input_file()
  27. Quand le DOM du document est chargé…
  28. On appelle la fonction
  29. Fin des hostilités

Remarque : le fait d’avoir testé, ligne 4, si le composant avait déjà son ajout nous permet de rappeler plusieurs fois la fonction en cas de besoin, par exemple si un nouveau composant est ajouté via Ajax.

Voilà pour finir le code HTML tel qu’il pourrait être après l’appel de la fonction :

Vous pouvez voir le code en action en suivant ce lien ou ci-dessous

 

See the Pen Bootstrap File Input by Sébastien (@Sebus059) on CodePen.


2 commentaires »

  1. avatar saktan dit :

    Merci !!!
    mais vous avez oublié de mettre « readonly » sur l’input du type text
    pour que l’utilisateur ne puisse pas changer le nom de fichier
    🙂

  2. tres pratique comme petit bout de code merci beaucoup

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *