Plugin jQuery pour upload de fichiers multiples

Plus tôt cette semaine, j'ai fait quelques tests avec PHP et l'extension APC dans le but de créer un contrôle d'upload de fichiers, avec une barre de progression en temps réel. Suite à mes expériences, je n'ai trouvé aucun moyen simple de pouvoir sélectionner plusieurs fichiers en même temps pour les envoyer au serveur. La conclusion de mes lectures a été que je devais développer un contrôle en Java, ou encore controurner le problème en utilisant une boîte de dialogue lancée par Flash.

Mon idée était de développer un petit composant capable de sélectionner plusieurs fichiers, de les envoyer au serveur et de montrer la progression de l'envoi à l'utilisateur pour qu'il patiente pendant le transfert. J'avais l'intention d'utiliser PHP, APC, jQuery et un objet jQuery UI progress bar mais avant de me lancer dans un développement qui aurait pu prendre plusieurs heures, je me suis dit qu'il vaudrait mieux jeter un oeil aux solutions déjà existantes. Et je crois avoir bien fait car je suis tombé par hasard sur une solution qui réglait la plupart de mes problèmes d'un seul coup, configurable et que je pouvais utiliser comme base pour mon développement.

Il s'agit d'un plugin jQuery nommé Uploadify, développé par Ronnie Garcia, qui peut être utilisé sous licence GPL et MIT. Comme le sélectionneur de fichiers est lancé par Flash, on peut en choisir plusieurs en même temps. De plus, la source fla et le swf sont inclus dans le zip de téléchargement. On peut aussi restreindre le type (par les extensions) et la taille des fichiers, choisir le répertoire de dépôt, contrôler les comportements à chacune des étapes et modifier l'apparence (CSS, textes et traductions, etc). Mieux encore, aucun besoin de patenter le tout avec APC pour obtenir la barre de progression!

Vous verrez, c'est étonnant à quel point c'est facile à installer. Décompressez l'archive dans votre projet (par exemple le répertoire "uploadify"). Dans votre page, faites référence aux scripts de base :

<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>

Dans le code HTML, créez un DIV pour contenir le contrôle et assignez lui un ID unique. Ça peut être tout simplement quelque chose comme ceci :

<div id="fileUpload"></div>

Créez ensuite un bouton qui servira à lancer le transfert :

<input type="button" id="buttonSubmit" value="Envoyer" />

Pour terminer, initialisez le contrôle et attachez l'événement au bouton. Dans fileUpload, chaque propriété permet de personnaliser le comportement du contrôle :

• uploader : le contrôle Flash qui permet la sélection des fichiers
• script : le script qui prend en charge l'enregistrement des fichiers. Il y en a un de base fournit par défaut qu'on peut utiliser et modifier au besoin.
• folder : le répertoire où déposer les fichiers
• cancelImg : l'icône du X pour annuler la sélection d'un fichier
• buttonText : le texte sur le bouton. J'en profite pour le mettre en français
• multi : excellent, je peux choisir plusieurs fichiers à la fois!

Lorsqu'on cliquera sur le bouton buttonSubmit, on lancera la fonction fileUploadStart() qui débutera le transfert.

<script type="text/javascript">
  function initialize() {
      $('#"fileUpload"').fileUpload({
          'uploader': 'uploadify/uploader.swf',
          'script': 'uploadify/upload.php',
          'folder': 'uploaded_files',
          'cancelImg': 'uploadify/cancel.png',
          'buttonText': 'Choisir un fichier',
          'multi': true
      });
   
      // attacher l'événement au bouton
      $('#buttonSubmit').click(
          function() {
              $("#filepicker").fileUploadStart();
          }
      );
  }

  $(document).ready( initialize );
</script>

Facile, n'est-ce pas ? Enfin, presque. J'ai quand même quelques conseils à vous donner pour finaliser l'installation :

• Si vous voulez voir tout l'interface dans une langue autre que l'anglais, il faudra apporter au moins une modification au fichier source jquery.uploadify.js. Dans la version non compressée, il faudra changer certaines traductions car elles ne sont pas encore personnalisables. Je viens justement d'écrire à l'auteur pour lui faire la proposition.
  
  - Ligne 175, la phrase "Do you want to replace the file"
  - Ligne 216, le terme "Completed"
  - Les unités de mesures KB et MB, entre les lignes 130 et 140
  
  
• Comme mon serveur est configuré avec des répertoires virtuels, j'ai dû changer l'utilisation des fichiers proposés upload.php et check.php pour ne pas tenir compte de la variable $_SERVER['DOCUMENT_ROOT']
• Ne pas oublier de placer le CSS, sinon vous ne verrez pas apparaître la barre de progression :-)
  
  <link type="text/css" href="uploadify/uploadify.css" rel="Stylesheet" />