Mise à jour du plugin inputFileThumb et explications

Bookmark and Share
Vendredi 30 septembre 2011
Posté par Gilles Felix

Mise à jour du plugin inputFileThumb et explications
Suite à un retour utilisateur (merci à Ben Corke), nous avons sorti deux mises à jour consécutives de notre plugin jQuery inputFileThumb.

La version 1.0.2 ajoute deux fonctions de callback.
La version 1.0.3 corrige un bug IE / Opera sur la suppression du fichier

Explications.

Pour ceux qui ne le connaissent pas, le plugin inputFileThumb remplace le champ fichier classique par une interface plus friendly, basée sur une vignette et un panneau de contrôle en hover. Plus de détails, quelques exemples et le téléchargement via la documentation technique (en anglais).

 

Deux nouvelles fonctions de callback

Un utilisateur voulait, après sélection d'un fichier, modifier le titre et la description du widget avec les données du fichier (nom et taille). Et évidemment, il voulait que le click sur le lien 'suppression' efface ces données et les réinitialise avec celles par défaut.

J'aurais pu intégrer directement cette fonctionnalité dans le plugin, mais la récupération des données du fichier sélectionné n'est pas possible sur tous les navigateurs (notamment IE et Opera) pour des raisons de sécurité. J'ai donc préféré introduire deux nouvelles fonctions callbacks pour permettre aux développeurs d'intercepter la sélection de fichier et la suppression (voir, là aussi, la documentation technique pour plus de détails).

 

Reset d'un input file

Cet utilisateur a également détecté un bug qui nous avait échappé : le click sur le lien 'suppression' du fichier ne fonctionnait pas sous IE et Opera.

Pour réinitialiser le champ, je me contentais de remettre sa valeur à vide : $(input).val('');

Mais dans IE et Opera, cette commande n'avait aucun effet. Là encore, pour des raisons de sécurité (ne me demandez pas pourquoi les autres navigateurs ne font pas pareil), ces navigateurs n'autorisent pas la modification de la valeur d'un champ fichier en Javascript.

Passage à l'inévitable étape de recherche de solutions sur le web. Sans trop de problème, on trouve trois propositions, mais une seule nous convient réellement. Voyons pourquoi.

Première solution

Cette solution consiste à cloner le champ (avec ses événements, clone(true) dans jQuery) et de remplacer le champ original par son clone. Cela corrige le problème sous IE mais pas sous Opera. Pire, le problème apparaît aussi sous Firefox : le clonage copie également la valeur du champ dans ces navigateurs. On aurait pu laisser tomber la compatibilité Opera et faire un fixe conditionnel pour IE, mais mon collègue, adepte d'Opera, m'en aurait voulu.

Deuxième solution

Un site proposait de "ré-afficher" le champ en faisant un input.innerHTML = input.innerHTML. Mais là, on perd tous les évènements rattachés au champ. On passe.

Troisième solution : la bonne (pour nous)

Le champ peut être réinitialisé en utilisant la fonction reset du formulaire auquel il appartient. Mais dans ce cas il réinitialise également tous les autres champs du formulaire. Astuce : créer un nouveau formulaire, déplacer notre champ dans ce formulaire, faire le reset sur ce nouveau formulaire, ramener notre champ à sa place initiale.

Voilà ce que ça donne en code :

var temp = $('<span></span>').insertAfter(this.input);
var form = $('<form></form>').appendTo('body');
this.input.appendTo(form);
form[0].reset();
this.input.insertAfter(temp);
temp.remove();

 

Passage à Git

Autre info concernant le plugin : Il est maintenant disponible sur github.com.

Comme on dit sur le web, fork me on github

 

Roadmap

Pour être complet, sachez que le plugin va être entièrement ré-écrit dans un futur proche pour devenir compatible jQuery UI.

Catégorie :Plugins jQuery
Aucun commentaire
Laissez votre commentaire :