Archives par mot-clef : jQuery

Voilà déjà quelques temps que j’entretiens, en parallèle de mon script « toolbar BBcode » un script d’upload de fichiers. Il contient une interface d’administration bien complète, et l’interface utilisateur permet d’uploader facilement un ou plusieurs fichiers à la fois, en renommant, écrasant, sélectionnant un dossier particulier, et bien sûr la gestion des fichiers déjà uploadés permet d’en faire autant. Récemment, en apprenant des notions d’Ajax, j’ai même appris à faire des uploads sans rechargement de pages, c’est beaucoup plus zoulie !

Alors forcément, le jour où j’ai découvert Uploadify, un plugin d’upload super zoulie, super pratique, super rapide à installer, via jQuery, bah… oui, ça m’a fait un choc. Je l’ai testé aujourd’hui pour de vrai, et y a pas à dire : c’est cool ! Un script javascript (jQuery), et un fichier swf (i.e. flash) se chargent de l’interface et d’afficher une file d’attente des fichiers en cours d’uploads, et une petite barre de progression, pour la forme, bien entendu (pourquoi se contenter d’un petit gif de chargement… ? *soupir*) ! Reste à écrire le fichier PHP (ou autre. Un exemple sommaire est fournie avec le plugin) pour uploader vos fichiers comme vous voulez (création de miniatures et tout le tintouin) en renvoyant 1 si tout va bien, et 0 si ça bug.
Alors, c’est vrai que mon premier test n’est pas des plus jolies, mais en environ 30 minutes, j’ai réussi à installer le plugin (je ne connais quasiment pas jQuery), à le faire fonctionner, et ajouter une petite liste défilante pour modifier à la volée le dossier récepteur. Reste à améliorer le design, l’ergonomie, à pouvoir créer des répertoires à la volée, et surtout à améliorer le script d’uploads. (créations de miniatures, dézippage de fichiers compressés, etc, etc…)
Bref, un peu d’amusement en perspective ! Au passage, je n’ai pas réussi à le faire fonctionner en local. Le dossier de réception ne prenait pas en compte les alias que j’ai configuré sur mon EasyPHP. Hum, mouais, à voir… Voici les avantages/inconvénients que j’ai pu lister :

• Facile à installer et à configurer
• Facile à utiliser et vraiment jolie

Par contre :

• Brut de forme, les utilisateurs ayant désactivé Javascript ne peuvent utiliser le formulaire d’upload
• Pour des actions un peu poussé (choix d’un dossier différent pour chaque upload en cours par exemple), on peut se retrouver bloquer
• Le plugin est en anglais par défaut. Heureusement, Code18 (encore lui) nous explique comment changer ça. On espère avec lui que sa fonctionnalité sera ajouté dans les versions à venir. Have fun!

Comment faire

En relisant ce billet, je me suis aperçu qu’il ne servait pas à grand chose. Pourtant, il semble ressortir pas mal dans les recherches Google. Je me dois donc de l’agrémenter de quelques lignes, par exemple en présentant mon code, pour qu’il soit un peu plus utile. Le but est d’obtenir le résultat précédant. Commençons par le code HTML :

<div id="fileAttente"></div>
<input id="uploadify" type="file" name="uploadify" />
<select id="folder" name="folder" onchange="changeFolder(this)">
  <option value="data/media">Media</option>
  <option value="data/rss">RSS</option>
</select>

<a href="javascript:$('#uploadify').uploadifyUpload();">Lancer l'upload</a>
|
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">Effacer la liste</a>

On peut voir qu’il y a un div pour la file d’attente, un champ de type upload, un sélecteur de dossier, et des liens pour lancer l’upload et effacer la liste d’attente. Bref, en remplaçant les liens par des boutons cliquables, on a tout ce qu’il faut pour rendre l’upload accessible aux personnes ayant désactivées Javascript.

J’ai encore un onchange qui traine, mais c’est juste que je ne maîtrise toujours pas suffisamment jQuery pour le retirer. Bon maintenant, le code Javascript qui se trouve sur la même page :

<script type="text/javascript" language="javascript" src="./themes/global/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./themes/global/js/swfobject.js"></script>
<script type="text/javascript" src="./themes/global/js/jquery.uploadify-2.1.0.min.js">
</script>
/* ... */
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
  $("#uploadify").uploadify({
    'uploader': './include/classes/upload/uploadify.swf',
    'script' : './include/classes/upload/uploadify.php',
    'cancelImg' : './themes/global/img/cancel.png',
    'folder': 'data/media',
    'queueID' : 'fileAttente',
    'multi' : true,
    'buttonText' : 'Parcourir'
  });
});

function changeFolder(select) {
  var numero = select.selectedIndex;
  var valeur = select.options[numero].value;
  $('#uploadify').uploadifySettings('folder', valeur);
}
// ]]>
</script>

• uploader : correspond au fichier flash pour l’affichage de la barre de défilement
• script : c’est le script PHP qui se chargera de l’upload (et donc des vérifications, de la miniturisation, l’enregistrement en BDD, …)
• cancelImg : url vers l’image pour annuler une upload de la file d’attente (avant que celle-ci n’est démarrée)
• folder : c’est le dossier par défaut où seront uploadées les fichiers. C’est cette valeur que l’on changera avec changeFolder
• queueID : l’id de la balise pour la file d’attente
• multi : pour uploader plusieurs fichiers en même temps
• buttonText : Texte à afficher sur le bouton Parcourir

On a donc initialisé Uploadify. Et juste avant, dans le header, on a appelé les différents fichiers : le design CSS pour l’affichage, JQuery, le fichier Javascript Uploadify, et un fichier javascript swfobject pour régler un p’tit souci avec la gestion du flash en PHP et Javascript. Quant à la fonction changeFolder, elle est appelée dès qu’un utilisateur change la valeur du sélecteur de dossiers, et comme vous pouvez le voir, elle modifie la valeur de la variable folder. Bref, tout est là ! Si le fichier uploadify.php fonctionne correctement, les fichiers seront uploadés comme il faut au bon endroit !

Pour ma phase de tests, mon fichier d’upload était minimaliste :

if (!empty($_FILES)) {
  $tempFile = $_FILES['Filedata']['tmp_name'];
  $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
  $targetFile = str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
  move_uploaded_file($tempFile,$targetFile);
  echo "1";
}

Pour aller plus loin

• Site officiel
• Documentation
• Démos zoulies