Petite astuce souvent méconnue, un attribut très pratique a été introduit dans la plupart des navigateurs modernes : la possibilité de rajouter autocomplete="off" à un élément input. Quel intérêt ? Eviter que le navigateur ne propose automatiquement des valeurs pour cet élément.

Exemple : formulaire d’identification et création d’utilisateur (code volontairement simplifié)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Page : index.html
------------------------------------------------
[...]
<form>
<input name="identifiant" />
<input name="motpasse" type="password" />
<input type="submit" />
</form>
 
[...]
 
Page : new_user.html
-------------------------------------------------
[...]
<form action="create_user.html">
   Nom de l'utilisateur :
<input name="identifiant" />
   Mot de passe :
<input name="motpasse" />
</form>
 
[...]

Que se passera-t-il dans cet exemple si l’administrateur a choisi d’enregistrer ses informations d’identification ? Elles seront automatiquement reprises dans le formulaire de création d’un nouvel utilisateur. Une solution simple serait de nommer différemment les champs sur la seconde page mais il est tout aussi simple de spécifier au navigateur que l’on ne souhaite pas reprendre les informations en rajoutant autocomplete="off" en attribut dans les champs input :

1
2
3
4
5
6
7
8
9

[...]
<form action="create_user.html">
   Nom de l'utilisateur :
<input name="identifiant" />
   Mot de passe :
<input name="motpasse" />
</form>
 
[...]

C’est par exemple très pratique pour éviter de devoir retravailler des données avec cakephp et garder les fonctionnalités « automagic ».

Prenons un autre exemple : vous souhaitez utiliser Ajax pour proposer des réponses en fonction de la saisie dans un champ input. Une autre fonctionnalité des navigateurs modernes est de proposer automatiquement des suggestions en fonction d’anciennes saisies dans une liste déroulante. Problème avec votre fonctionnalité Ajax qui peut alors entrer en conflit. Là encore, la propriété autocomplete vous permet un meilleur contrôle de l’interface utilisateur.

Le validateur W3C signale une anomalie !

Dans la version 4.01 d’HTML et 1.0 d’XHTML, la propriété autocomplete n’est pas dans les spécifications du W3C. En revanche, le W3C le prévoit dans XHTML 2 et HTML 5 (du moins la question est posée). Dans l’intervalle, les navigateurs modernes ont déjà pris le train en marche car cet attribut est notamment utilisé par des sites demandant des numéros de carte de crédit.

La fondation Mozilla a alerté à de nombreuses reprises sur les risques de sécurité à utiliser un tel attribut par rapport à l’implémentation qui en avait été faite dans les navigateurs à l’époque mais la polémique s’est quasiment éteinte depuis la sortie des versions postérieures à 2008.

Toutefois, le validateur du W3C continue de signaler une erreur car autocomplete reste un attribut non standard. Pour passer outre malgré tout, il suffit d’attribuer la propriété par javascript après le chargement de la page ou d’émuler complètement la fonctionnalité. Ce n’est pas élégant mais c’est le seul moyen à l’heure actuelle d’avoir l’imprimatur du W3C.

C’est très bien, mais ne peut-on rien y faire ?

Plusieurs solutions sont possibles :

• Utiliser un autre language de CGI pour récupérer et afficher les informations du téléchargement
• Utiliser un applet java ou Flash (il y en a des très biens)
• Utiliser PHP (et ajax bien sûr pour mettre à jour l’affichage)

Oui, vous avez bien lu, on peut utiliser PHP. Pour les vieilles versions, il est nécessaires d’appliquer un patch à l’installation PHP, mais à partir de la version 5.2.0, le support pour le module APC est intégré dans la distribution. Pour les plus courageux, le suivi est possible en PHP4, mais je trouve quand même plus simple de passer à PHP 5.2. Un italien a aussi décrit une méthode sans installer APC. L’inconvénient est qu’elle se base sur un suivi de l’apparition de fichiers temporaires ce qui la rend complètement inutilisable lorsque de nombreux fichiers sont créés quasi simultanément.

La suite du message décrit comment utiliser APC pour récupérer les informations sur le déroulement d’un upload.

Installer APC

APC est un package PECL qui n’est pas installé par défaut dans PHP. Vous trouverez  un guide d’installation sur http://fr.php.net/manual/fr/apc.installation.php Pour les utilisateurs de Windows qui ne pourraient pas compiler la bibliothèque, voici un lien alternatif pour trouver des modules compilés dans l’attente du retour de pecl4win.

Configurer APC pour suivre l’upload de fichiers

Par ailleurs, il faut encore activer l’option d’APC permettant de récupérer des informations sur le chargement en cours. Pour cela, il suffit de rajouter apc.rfc1867 = on dans le fichier php.ini. Il faut aussi charger l’extension dans le php.ini grâce à extension="apc.so" ou extension=php_apc.dll sous Windows

Récupérer les informations sur le chargement en cours

Une fois le module APC et son extension rfc1867 fonctionnels, il est possible de récupérer les information du chargement en cours. Vous trouverez de nombreux scripts sur la toile permettant d’exploiter cette fonctionnalité :

• Uploadprogressmeter : un autre package PECL avec un exemple.
• Megaupload : Très complet, il peut aussi utiliser Perl et JSP.

Si vous êtes un acharné du code, voici quelque explications basé sur l’utilisation d’un iframe (voir http://blog.bafouille.fr/?p=16 pour plus d’informations sur l’upload de fichier). Il nous faut tout d’abord un formulaire avec un champ caché nommé APC_UPLOAD_PROGRESS et une id unique. Nous utiliserons pour cela la fonction PHP uniqid(). Comme il ne faut pas recharger la page suite à la soumission du formulaire, la cible de celui-ci sera un IFRAME caché. Enfin, il nous faut lancer en parallèle un javascript pour interroger le serveur et mettre à jour les informations de chargement.

1
2
3
4
5
6
7
8

< ?php $id_for_apc = uniqid(); ?>;
<form id="leForm" action="traitement.php" enctype="multipart/form-data" method="pcost" onsubmit="pollProgress(<?php echo $id_for_apc ?>)">
<input id="<?php echo $id_for_apc ?/>" name="APC_UPLOAD_PROGRESS" type="hidden" value="< ?php echo $id_for_apc ?>" />
<input id="leFichier" name="leFichier" type="file" />
<input type="submit" value="Charger le fichier" />
</form>
<div>Total du fichier : <span id="total">Inconnu</span></div>
<div>En cours : <span id="current">0</span></div>

Tout ce qu’il y a de plus simple. Le script traitement.php est quant à lui tout ce qu’il y a de plus classique pour traiter des fichiers téléchargés. Son résultat va s’afficher dans l’Iframe caché, il faudra donc y récupérer les informations pour afficher le résultat final de l’upload.

Direction le javascript maintenant

Lors de la soumission du formulaire, la fonction pollProgress est appelée avec en paramètre la valeur du champ APC_UPLOAD_PROGRESS. Personnellement, je préfère cette méthode car il est plus sûr de passer l’id en argument que d’aller la chercher dans le document Html de départ qui peut avoir changé ou qui possède des frames (argh !).

Le but de pollProgress est d’interroger le serveur en utilisant l’objet XMLHttpRequest. Pour cela, soit on programme tout de zéro, soit on utilise un framework javascript. Personnellement, j’utilise Prototype car, d’une part, il est également utilisé par script.aculo.us, bibliothèque d’effets javascript et, d’autre part, il permet des manipulations du DOM en gérant lui-même les spécificités d’Internet Explorer.

Notre fonction pollProgress(upload_id) pourrait ressembler à ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function pollProgress(upload_id)
{
   new Ajax.Request('getUploadProgress.php?upload_id='+upload_id, {
                     method : 'GET',
                     onSuccess: function(transport) {
                                   var upload_info = transport.responseJSON;
                                   /* Les informations retournés par le serveur
                                      sont disponibles dans l'objet upload_info
                                      (total, current, filename, name et done) */
                                   if(upload_info.done) {
                                      $(current).update(upload_info.current);
                                      $(total).update(upload_info.total);
                                      /* Si le chargement n'est pas fini, on relance la fonction */
                                      if(upload_info.done == 0) pollProgress(upload_id);
                                    }
                                  }
                                })
}

C’est évidemment l’approche a minima car on se contente d’actualiser la valeur de la taille du fichier (total) et de la quantité d’octets chargés (current). Enfin, en divisant l’un par l’autre, on a un taux de progression que l’on peut représenter graphiquement…

Le grand avantage de Prototype est qu’il simplifie fortement le code et, en exploitant le format JSON, on peut récupérer directement les informations sous forme de variables javascript.

En attendant, il manque le script PHP qui va gentiment nous donner ces informations au format JSON :

Pas bien sorcier. Toute la magie repose sur apc_fetch qui va renvoyer un tableau associatif $ret[index] où index possédant les valeurs suivantes :

• total : taille du fichier en octets
• current : nombre d’octets déjà reçus
• filename : nom du fichier tel que transmis dans l’input file
• name : valeur de l’attribut name de l’input file
• start-time : timestamp du début du chargement
• done : statut du chargement (0 : en cours, 1 : fini)

Une fois le chargement fini, la fonction renvoie également ces valeurs d’index :

• temp_filename : chemin vers le fichier temporaire
• rate : Taux de transfert en b/s
• cancel_upload : Information sur le résultat de l’upload (0 : succès, 1 : la taille du fichier excède upload_max_file_size, 2 : la taille excède MAX_FILE_SIZE, 3 : chargement partiel, 4 : pas de fichier chargé, 5 : le répertoire temporaire est absent, 6 : impossible d’écrire le fichier, 7 : chargement annulé)

Fort heureusement, l’annulation d’un chargement change malgré tout la valeur de l’index "done" en 1 sinon nous aurions une jolie boucle infinie dans le script ! A noter que les informations fournies à la fin du chargement sont également disponibles dans $_FILES.

Enfin, la fonction json_encode nous permet de passer le tableau de retour au format JSON pour la fonction javascript.

Le script est loin d’être complet mais je pense que c’est une bonne base de départ pour celui qui veut se lancer.

Je ne reviendrais pas ici sur ce qu’est Ajax, on en trouvera une excellente explication sur Wikipédia. Clavier faisant, je soumettais requête sur requête jusqu’à buter sur un os, un gros os.

Tout marchait à merveille à l’exception notable de l’upload de fichier vers un serveur. La raison ?

L’objet XMLHttpRequest, utilisé par Ajax pour échanger avec le serveur, ne gère pas les données binaires. Plus simplement, impossible de soumettre directement le fichier avec un formulaire prévu pour le transfert de fichier grâce à enctype=”multipart/form-data”.

Il n’y aucune parade pour l’instant en la forme actuelle de l’objet XMLHttpRequest à part simuler une absence de rechargement de la page.

Faute de grives, on se contente de merles et quelques expédients sont possibles. La plupart sont listés sur ce blog.

La solution avec un iframe masqué a ma préférence car c’est la plus portable. Les vrais soucis commencent quand on veut afficher la progression du chargement.

Pour plus de renseignements :

• Upload de fichiers grâce à l’extension APC de PHP et affichage de la progression du chargement
  
• Upload de fichiers via Flash et affichage de la progression du chargement