L’inconvénient d’un applet est qu’il nécessite des connaissances en java ou actionscript pour flash (en plus du logiciel payant dans ce dernier cas).

Toutefois, il existe plusieurs solutions gratuites qui permettent des upload multiples en flash :

• Nas Uploader (http://www.nasuploader.com) : C’est certainement le plus simple mais aussi le moins souple côté configuration. Du coup, il est très bien adapté pour celui qui veut une solution simple et rapide.
• SWF Upload (http://swfupload.org) : C’est peut-être le plus connu. Il est entièrement paramétrable ce qui le rend également difficile à prendre en main.
• Fancy Upload (http://digitarald.de/project/fancyupload) : Le plus esthétique à mon sens. Son seul « défaut » est de s’appuyer sur le framework javascript Mootools pour fonctionner ce qui peut poser des problèmes si vous en utilisez un autre (par exemple prototype

Côté serveur, le script PHP n’a rien de révolutionnaire puisque le traitement du fichier chargé reste identique.

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