Il y a environ 1 mois, j'ai présenté un plugin jQuery du nom de Uploadify qui permet de faire l'upload de fichiers multiples avec affichage d'une barre de progression en temps réel. Les développeurs, Ronnie Garcia et Travis Nickels, ont fait du beau travail mais moi, en tant que développeur québécois francophone, j'étais déçu de ne pas trouver de configuration pour pouvoir le faire afficher en français. La traduction dans différentes langues était tout simplement absente.
C'est pourquoi je me suis mis au travail et j'ai ajouté la fonctionnalité à la plus récente version 1.6.2. J'ai posté sur leur forum ma contribution en espérant qu'elle sera utile à plusieurs d'entre vous.
Comme je disais sur leur forum, la langue anglaise est encore celle par défaut. Donc il n'y a aucun changement dans l'implémentation si vous comptez utiliser l'anglais dans votre projet, à moins que vous ayez l'intention de remplacer un ou plusieurs termes ou que vous souhaitiez traduire les étiquettes.
À l'intérieur de l'objet original, j'ai créé un objet de traduction qui regroupe les différents textes de la librairie. Celui-ci utilisera ceux définis par défaut et si le programmeur décide d'en remplacer, il le fera à l'initialisation de l'objet où il pourra écraser le ou les champs spécifiés.
Dans la librairie jquery.uploadify.js, j'ai principalement effectué les changements suivants :
1. l'objet de traduction
J'ai créé une nouvelle propriété objet définie lors de l'initialisation. Les champs par défaut seront remplacés par ceux fournis par le programmeur à la dernière ligne (options.translations).
translations: $.extend({
browseButton: 'Browse',
error: 'An error occured',
completed: 'Completed',
replaceFile: 'Do you want to replace the file',
unitKb: 'KB',
unitMb: 'MB'
}, options.translations )2. les références pour i18nÀ l'interne, chaque texte appelle l'objet de la façon suivante : settings.translations.browseButton.
3. Comment implémenter
Les points 1 et 2 ne sont que de la mécanique interne et le programmeur n'a pas à s'en soucier (je l'explique pour les curieux). Lors de l'implémentation, tout se fait comme à l'ordinaire, sauf s'il souhaite faire la traduction (l'objet translations est optionnel, de même que chaque étiquette).
$(document).ready(function() {
$('#fileInput').fileUpload ({
'uploader' : 'uploader.swf',
'script' : 'upload.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads',
// nouveau!
translations: {
browseButton: 'Parcourir',
error: 'Une erreur s\'est produite',
completed: 'Terminé',
replaceFile: 'Voulez-vous remplacer le fichier',
unitKb: 'Ko',
unitMb: 'Mo'
}
});
});J'en profite pour faire remarquer que la propriété buttonText a été remplacée par la traduction browseButton. Les seuls éléments manquants que je n'ai pas pu configurer pour la traduction sont les types d'erreurs que retourne le composant Flash (par exemple errorObj.type : "File Size"). Pour le moment, ce n'est qu'un détail.J'ai soumis sur le forum d'Uploadify ma version complète du composant que j'ai étiquetté version 1.7 pour illustrer l'ajout de la nouvelle fonctionnalité. Cependant, je laisserai le soin aux auteurs et responsables du projet de choisir s'il veulent supporter officiellement les changements que j'ai suggéré.
Rendez-vous sur le forum pour obtenir le code source de jquery-uploadify.js qui contient les traductions.
Peut-on modifier le upload.php pour transférer vers un FTP plutôt qu'en interne sur le serveur?
Merci
Oui, mais ça se fera en deux étapes. D'abord le transfert local vers le serveur qui déposera le fichier au répertoire temporaire (obligatoire). Ensuite, au lieu d'utiliser move_uploaded_file() pour le déplacer, on transférera le fichier sur un serveur distant à l'aide des fonctions FTP de PHP. Par contre, je n'ai pas testé si la barre de progression représentera le pourcentage du transfert local ou FTP.
Je viens à l'instant de tester le transfert FTP et la barre de progression illustre l'envoi local seulement. À 100%, le transfert FTP commence et la barre disparaît une fois complété (lorsque le script upload.php atteint la fin).
Salut, je n'arrive pas a modifier le script PHP afin d'insérer une ligne dans ma BDD ( pour lier mon upload d'image a un id ).
J'ai l'impression que mon mysql_query n'est pas exécuter , il est également impossible de printer quoi que ce soit pour debug tout ça et comprendre comment ce script est exécuté..rien n'apparait dans firebug
Merci d'avance pour ton aide .
@vincent Le script PHP qui enregistre ton fichier est exécuté de façon asynchrone. Si tu fais des echo, print_r ou var_dump de tes variables, l'output se retrouvera le message de retour en Ajax, donc sous l'onglet Réseau de Firebug (Réseau / filtre XHR - XML Http Request). Tu verras dans la liste un POST avec un URL vers ta page PHP. Clique le + pour ouvrir le panneau. Tu verras ensuite d'autres onglets : Entêtes, Post, Réponse, HTML. Cliques sur Réponse, c'est là que tu devrais voir la valeur de tes variables, les messages d'erreurs PHP, etc.
Sinon, tu peux aussi essayer d'utiliser FirePHP qui s'ajoute à Firebug et qui facilite le débogage côté serveur en se servant de la console de Firebug.
Bonjour et merci de ta réponse rapide , mais je sais utiliser firebug avec l'ajax et c'est parce que je ne vois aucunes trace de l'appel du fichier uploadify.php que je posais ma question précédente :/
la seule chose que je vois c'est l'appel de l'image "cancel.png" qui sert a supprimer un élément ds la liste d'attente
aurais-tu une idée ? ...
@vincent En fait, je crois que tu as raison. Comme c'est le composant Flash qui s'occupe de faire l'appel au fichier PHP, il n'apparaît pas dans Firebug. Je te suggère de faire un test unitaire pour vérifier si ton fichier upload.php qui prend en charge l'enregistrement du fichier envoyé se fait sans erreur. Tu peux créer un formulaire HTML standard avec un input file qui pointe vers le fichier PHP. S'il y a une erreur, tu la verras apparaître. Ensuite, reconnectes le formulaire qui utilise Uploadify sur ce fichier pour prendre avantage du Flash (upload multiple et progress bar). Vérifie dans la configuration JavaScript que le path vers le fichier PHP est OK et que l'appel à la fonction jQuery est bien initialisée au chargement (si tu vois pas la barre de progression apparaître versus si le fichier n'est pas sauvegardé).
As-tu les droits d'écriture sur le répertoire ? Tu peux les avoir sur ton serveur local de développement mais peut-être pas sur le serveur de production ?
Une autre approche serait de redirigier la trace (les echo et print) du fichier PHP en écriture vers un fichier de log texte plutôt qu'en sortie standard.
Si ça ne fonctionne toujours pas, tu peux m'envoyer par email un exemple de ton code et j'y jeterai un oeil.
Merci bcp pour ton idée, si seulement j'avais eu l'idée d'appeler le PHP directement par un bon vieux < form > ! :)
J'avais effectivement un pb de droit d'accès ... maintenant ça tourne nickel , j'ai même ajouté un petit script de création de miniature pour mes images au passage ^^
En tout cas merci beaucoup pour ta réactivité :p
bonne continuation !
Ça fait plaisir!
Bonjour,
Il me faudrait pouvoir utiliser ce script avec un envoie direct en FTP. Car je suis en mut. et souhaite transférer des PDF > à 2 Mo,
merci !
Ça ne sera jamais un upload direct. Tu dois d'abord les envoyer par HTTP sur le serveur et c'est dans le script upload.php que tu pourras ouvrir une connexion FTP.
Si tes fichiers sont plus grands que 2 mo et que tu as une limitation côté serveur sur la taille des fichiers que tu peux transférer, tu peux ajuster le tout dans php.ini (upload_max_filesize et post_max_size selon ce que tu as besoin). Dans ce cas, peut-être que le FTP ne serait pas nécessaire.
Merci, très bonne idée, par contre, on en est à la version 2.1.4 actuellement et toujours pas de traduction implémentée! dommage!