skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

dimanche 17 mai 2009

Traductions pour Uploadify

Publié par Infinite Loop, à 11 h 00 12 commentaires

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.


Tags: JavaScript

12 réponses à "Traductions pour Uploadify"

  1. Unknown a dit...
    26 juin 2009 à 10 h 50

    Peut-on modifier le upload.php pour transférer vers un FTP plutôt qu'en interne sur le serveur?

    Merci

    Infinite Loop a dit...
    26 juin 2009 à 17 h 13

    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.

    Infinite Loop a dit...
    26 juin 2009 à 18 h 17

    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).

    Unknown a dit...
    30 avril 2010 à 10 h 39

    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 .

    Infinite Loop a dit...
    30 avril 2010 à 11 h 31

    @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.

    Unknown a dit...
    5 mai 2010 à 04 h 16

    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 ? ...

    Infinite Loop a dit...
    5 mai 2010 à 06 h 47

    @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.

    Unknown a dit...
    5 mai 2010 à 11 h 50

    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 !

    Infinite Loop a dit...
    5 mai 2010 à 14 h 21

    Ça fait plaisir!

    Unknown a dit...
    4 septembre 2010 à 16 h 22

    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 !

    Infinite Loop a dit...
    4 septembre 2010 à 17 h 33

    Ç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.

    uplodify_man a dit...
    7 décembre 2011 à 19 h 21

    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!


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ▼  mai 2009 (37)
        • Obtenir le Page Rank Google en PHP ou Perl
        • Citation no. 32 sur Windows
        • Google Talk chatback badge
        • Images volantes en JavaScript
        • ASP vs PHP
        • Intervalles de dates sous PostgreSQL et SQL Server
        • Ordre de chargement avec Prototype
        • Pouvez-vous lire ceci ?
        • Service ReCaptcha en français
        • Citation no. 31 sur la lune
        • Google killers
        • Configurer Zend_Tool en CLI
        • Quelques logos intéressants
        • Créer un WSDL facilement avec Zend Framework
        • XSS sur Wikio... et Archambault Musique
        • Encryption de données en PHP
        • Virtualiser les fureteurs avec Xenocode
        • Traductions pour Uploadify
        • Citation no. 30 sur la force
        • ASCII Art avec GIMP
        • Fonction JavaScript à paramètres variables
        • The Mythical Man-Month - Loi de Brooks
        • Fichier en attachement avec Zend_Mail
        • Konami Code sur jQuery et Facebook
        • Star Trek
        • 3 façons de lire du XML en PHP
        • Citation no. 29 sur l'infini
        • Déboguer avec FirePHP
        • 99 bouteilles de bière
        • Étude de cas Zend Solutions
        • Zend_Service_Twitter
        • Devinette mathématique classique
        • Obtenir l'extension d'un fichier
        • Récupérer une image sur Amazon avec Zend Framework
        • Citation no. 28 sur un jour de travail productif
        • Modifier l'entête Server d'Apache
        • Contrôler le téléchargement d'un fichier
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft