Upload avec barre de progression sous Flex

Pour cet article, je me suis efforcé d’aller à l’essentiel afin d’éviter tout traitement superflue qui irait à l’encontre d’une compréhension rapide et optimale. Il s’adresse donc a des développeurs qui ont une certaine maîtrise du langage mais qui ne savent pas réellement comment mettre ne place un tel système de transfert de fichier.

1. L’interface

L’interface se compose uniquement de deux éléments:

• Un bouton ‘Parcourir…’ qui va nous permettre d’aller récupérer notre fichier ;
• Une barre de progression, qui s’affichera au lancement de l’upload.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
  <mx:Script>
      <![CDATA[
          import aruiz.CUpload;
          private function init ():void {
              new CUpload (browseButton, progressBar);
          } // init ();
      ]]>
  </mx:Script>
  <mx:Button id="browseButton" label="Parcourir..."></mx:Button>
  <mx:ProgressBar id="progressBar" label="" visible="false"></mx:ProgressBar>
</mx:Application>

Comme vous pouvez le constater, l’interface a été volontairement réduite au strict minimum. Pour notre upload, nous utiliserons la classe CUpload qui attend deux paramètres: le bouton ‘Parcourir…’ et la barre de progression (ID des éléments concernés).

2. La classe CUpload

Voici la signature de type des différentes méthodes de la classe:

• private function initListeners ():void;
• public function browse (e:MouseEvent):void;
• private function selectHandler (e:Event):void;
• private function errorHandler (e:IOErrorEvent):void;
• private function progressHandler (e:ProgressEvent):void;
• private function completeHandler (e:Event):void;

La plus importante est initListeners, elle va se charger comme son nom l’indique, d’initialiser tous les écouteurs d’événements. Dans ce cas précis on parle de programmation événementielle. Tout simplement parce que lors d’un upload, il y a différentes phases qu’il est important de prendre en considérations, sans quoi il serait totalement impossible de lier toutes les actions entre-elles.

• browse est appelée lors du click sur le bouton ‘Parcourir…’, elle a en charge d’ouvrir une fenêtre qui va permettre aux utilisateurs de choisir un fichier à transférer ;
• selectHandler est appelée lorsqu’un fichier a été choisi par l’utilisateur, l’upload peut alors commencer ;
• errorHandler parle d’elle même, nous ne sommes pas à l’abri d’une erreur, il faut pouvoir la capturer pour stopper tout traitement et en avertir l’utilisateur ;
• progressHandler va nous permettre de connaître l’avancement du transfert. Comment ? A l’aide du paramètre ‘e’ de type ProgressEvent qui contient toutes les informations nécessaires. Ainsi notre barre de progression sera mise à jour de la sorte: progressBar.setProgress (e.bytesLoaded, e.bytesTotal);
• completeHandler sera appelée en fin d’upload si tout s’est correctement déroulé.

3. Coté serveur (PHP)

Les traitements sont identiques à ceux d’un upload classique en HTML/PHP. En effet, il suffit juste d’utiliser la variable globale $_FILES (un tableau associatif) qui contient toutes les informations relatifs à notre upload. Là aussi, le code source a été volontairement simplifié pour aller à l’essentiel. Gardez en tête qu’un upload quel qu’il soit reste sensible d’un point de vu de la sécurité, il faudra donc réaliser une batterie de test afin d’être sûr que les fichiers répondent bien à certains critères, notamment leur type.

Le script est appelé en fin d’upload lorsque tout a été entièrement transféré sur le serveur. Si un ajout en base ou l’envoi d’un email est nécessaire, c’est à ce niveau du code qu’il faudra ajouter des fonctionnalités supplémentaires. Inutile donc de faire appel à un script PHP supplémentaire depuis la méthode completeHandler.

4. Conclusion

Cet article n’a rien de bien extraordinaire tellement l’upload a été vu et revu sur de nombreux blogs à travers le web. Cependant, j’ai reçu une demande d’aide de la part d’un internaute, et c’est ce qui a motivé ce court développement. Le point fort de Flex, est qu’il permet de filtrer avant tout upload les types de fichiers autorisés, cela dit, rien n’empêche de cacher du code malveillant (PHP) dans une image … Durant la phase de test, j’ai noté que les fichiers de plus de 2MO n’étaient pas transférés. C’est tout à fait normal, si c’est votre cas, il va falloir changer certaines règles de configuration (php.ini).

Si vous avez des questions, le blog est fait pour ça

Voici les sources!