[Plugin] Html5Uploader : Drag and Drop les médias

bazooka07bazooka07 PluXml Lead Developer, Moderator
novembre 2015 modifié dans Plugins
Bonjour,

Dans le gestionnaire de médias, vous allez pouvoir utiliser le Drag and Drop (DnD) ou glissez-déposez.
Ouvrez le gestionnaire de médias dans votre navigateur et à côté votre explorateur de fichiers.
Dans ce dernier, sélectionnez un ou plusieurs fichiers médias, faites les glisser dans le tableau de fichiers médias du navigateur et lâchez tout.
Les fichiers sont envoyés vers le serveur Web et la liste des fichiers est réactualisée sans recharger la page.
Vous serez impressionné par la rapidité du procédé.

Utilise les technologies HTML5, Drap and Drop et Ajax.

Testé chez Free avec succès.

A télécharger ici : dernière version
N'oubliez pas de visiter mon entrepôt de plugins : http://kazimentou.fr/pluxml-plugins2/
[del]Télécharger le plugin[/del]

version 1.21

Fixe mineur pour améliorer le confort utilisateur (event over dans javascript)

version 1.2
18/11/15 : mise à jour pour Pluxml 5.4 - divers fixes

version 1.1
26/03/14: Compatible FF, Chrome, IE - Affiche limitations serveur
25/03/2014 bis: Correction Bug mineur : Fonctionne avec Chrome. Ne marche pas avec IE. Utiliser un navigateur respectueux des standarts du W3C.
25/03/2014 : Correction Bug: les rédacteurs peuvent sauver les médias dans leurs dossiers perso. + qq modifs CSS + traduction supp.
15/03/2014 : Version initiale

Réponses

  • Ca marche bien chez moi. Bravo. :)
  • Merci!!
  • JosJos Member
    Très beau travail, merci pour ta contribution. Pense à l'ajouter dans la page des plugins non officiel pour que les autres utilisateurs le trouve plus facilement :

    http://wiki.pluxml.org/index.php?page=Plugins+non+officiels
  • ça marche super bien (chez OVH en tout cas) et c'est super pratique l'envoi par lots et drag'n drop !
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Bonjour,

    Merci pour vos retours.
    Je l'ai aussi testé chez LWS.fr en mutu et chez FREE.fr avec leur vieille version de PHP (5.1.3RC4 !!)
  • Juste une suggestion, peut-être ...

    comme l'interface du gestionnaire de médias reste visuellement la même que le plugin soit chargé ou pas, ne serait-il pas possible d'inserer un "pavé visuel" indiquant clairement qu'on est dans du "drag and drop" (un peu comme dans le plugin spxtynimce...) ?
    ... et peut-être "grossir" la bordure rouge qui indique la zone de drop ?

    il serait encore plus top (tout en étant léger) !
  • Attention : si les noms de fichiers à envoyer ont des caractères accentués, ou particuliers, le plugin refuse de les traiter...

    Donc, rigueur "web" dans le nommage des fichiers !
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @Rohirrim,

    J'avais prévu d'afficher un message pendant quelques secondes en haut de l'écran lorsque la page des médias est affichée.
    En fait l'affichage était fugitif car la fonction setTimeout en javascript ne fonctionnait pas comme je j'espérai.
    Je viens de corriger le problème. Donc lorsque le plugin est actif :
    - à l'ouverture de la page des médias, un message s'affiche pendant environ 30 secondes vous invitant à déposer vos nouveaux médias sur la grille du tableau,
    - la bordure du tableau s'épaissit à 5 pixels au lieu de 1 pixel. Cela lève le problème de la bordure rouge trop fine.

    Pour les noms de fichiers avec lettres accentuées ou espaces, le transfert se fait bien, mais c'est Pluxml qui rejette les fichiers avec des noms non conformes. Le plugin affiche alors le message d'erreur généré par PluXml.

    Faites vos mises à jour en téléchargeant la version 1.01 avec le lien dans le post initial.
  • Merci bazooka07 pour cette modif ; c'est effectivement plus clair pour mes rédacteurs...

    Je ne suis pas codeur mais j'ai fait des modifs mineures dans ton plugin pour le rendre compatible avec ton plugin TinyMCE (entre autre pour que le message info "rentre" dans le pop-up "medias" tel qu'il apparait avec tinyMCE.

    Je souhaiterais que tu y jette un coup d'oeil pour voir si ça ne peux pas faire une MAJ de ton plugin; comment fais-je ? Je t'envoie ma version modifiée ou je le mets en partage direct et chacun voit ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Bonjour,

    Oui, il y avait un bug mineur dans pour aviser que php5uploader était actif dans le gestionnaire de médias.
    TinyMCE était écrit depuis un petit moment et je n'avais pas vérifié avec html5uploader.

    Recharge le plugin html5uploader. (Dans le dossier de plugins tu peux renommer le dossier tinyMCE en tinyMCE1 avant de charger la nouvelle version du plugin pour tester et effacer tinyMCE1 si c'est Ok).

    Si tu as d'autres modifs, mets les quelques part sur Internet et donne le lien.
  • Par contre, il me semble que quand j'utilise html5uploader, en tant que profil "redacteur", avec son propre dossier (tel que défini dans les paramètres de pluxml) ça ne fonctionne pas > le plugin semble placer le fichier à la racine générale du "dossier image" de pluxml, (et pas dans le dossier image du rédacteur)...
  • RohirrimRohirrim Member
    mars 2014 modifié
    Je ne suis pas codeur plus que ça, mais j'ai fait quelques modifs dans le plugin html5uploader...
    [list=*]
    [*]modification du message d'explication qui apparait dans le gestionnaire de médias (plus visible et reste plus longtemps) pour que les infos soient plus accessibles[/*]
    [*]ce même message est adapté pour qu'il soit compatible avec le plugin tinymce du même créateur (la dimension du message n'était pas adapté à la fenêtre de tinymce) [/*]
    [*]... icone du plugin modifié (désolé JP, je trouvais l'icone de base assez moche)[/*]
    [*]design de l'aide (responsive - un peu -)[/*]
    [/list]

    [del]version 1.01-bis[/del]

    [del]disponible ici >http://rohirrim.eu/ftp/html5uploader.zip[/del]

    - bug toutefois : semble ne pas fonctionner correctement quand on se logue en tant que rédacteur (le plugin uploade les fichiers à la racine générale du dossier image du site, et pas "dans" le dossier image du rédacteur...
    par contre en administrateur ça marche tres bien !

    remontez les erreurs si vous en trouvez...

    ... edit : Bazzoka07 ayant modifié son fichier, ma version 1.01-bis n'est plus d'actualité...
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @Rohirrim,

    Les rédacteurs peuvent maintenant sauvegarder les médias dans leurs dossiers perso. C'était déjà fait mais il restait un bug. Corrigé !
    (ligne 155 dans uploader.php)

    Pour les modifs, j'en ai pris quelques unes en compte mais pas toutes.
    Pour l'icône. Par défaut dans PluXml, les icônes de plugins ont une taille de 48px au carré. Bon, j'ai mis une autre icône.
    Dans ton archive, il y a un intrus. Bizarre !

    La mise à jour est en ligne. Voir 1er post.
  • Merci bazooka07 !

    effectivement, l'upload se fait maintenant dans le dossier de chaque rédacteur, qui n'a accès qu'a ses seuls fichiers à lui... c'était mon principal interet : un upload multiple en DnD qui "range" les fichiers dans le seul dossier du rédacteur... (en sachant toutefois que les admins ont accès à tous les fichiers et répertoires...
    Il se marie bien avec le plugin Tinymce, du même auteur
    Bien et pas lourd à installer !
  • Je crois avoir remarqué que sous Chrome et IE le plugin ne fonctionne pas...
    personnellement cela ne me gène pas, mais comme d'autres utilisent sans doute ces deux autres navigateurs, serait-il possible de le porter vers eux ?
    (et pourtant les versions que j'ai utilisé ne sont pas anciennes...)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @Rohirrim,

    Pour Chrome, c'est corrigé.
    FF est plus en avance que Chrome sur les évolutions de Javascript. Pour les curieux: Pb passage arguments par défaut dans les fonctions.

    Par contre, pour IE c'est un autre problème. Va falloir patienter.
  • RohirrimRohirrim Member
    mars 2014 modifié
    Merci !
    en même temps, pour IE ( :rolleyes: ), c'est pas grave

    ah ! un dernier détail : une "jauge de progression" pour faire patienter le rédacteur "impatient" permettrait peut-etre de le rassurer sur l'avancée de son upload, et lui éviter de recommencer car il se dit "ça marche pas" s'il ne voit pas la progression... (certains l'ont déjà fait !)

    de plus : je crois avoir remarqué qu'on charge 20 fichiers au maximum en simultané, ou je me trompe ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    mars 2014 modifié
    @Rohirrim,

    Ouais, c'est vrai que IE, c'est pas ce qui se fait de mieux. Enfin, on n'est pas rancunier non plus, malgré l' O.S. qu'on nous impose....

    @tous,
    Changement important sur la façon d'envoyer les fichiers sur le serveur.
    Du coup, c'est compatible Firefox, Chrome et Internet Explorer (version > 10.0 a priori)

    On affiche les limites imposées par le serveur via php.ini (enfin quand on nous le dit voir Free.fr).

    Et ça marche chez Free pour les fauchés :D

    @Rohirrim,
    Oui, il y a une limitation sur le nombre de fichiers. Mais c'est le serveur qui l'impose via php.ini
    Et pas que cela. Idem pour la taille totale des fichiers. Aussi la taille par fichier, mais ceci est connu en principe.

    Pour la barre de progression, c'est plus compliqué.
    Le transfert de fichiers se fait rapidement en principe. Un message indiquera sur l'écran la fin du transfert.
    Par contre, PluXml traite chaque image 3 fois : image à la taille de l'écran, une miniature et un aperçu.
    Et cela coûte du temps. Et pendant que PluXml bosse, il ne dit rien.
    Idéalement, il faudrait qu'il envoie un message ou un cookie sur le net à chaque fin de traitement de fichier.
    A voir si cela est faisable.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Mise à jour du plugin pour Pluxml 5.4

    Glisser et déposer plusieurs fichiers d'un coup sur son tableau de médias, ça facilite la vie.
    En américain, on appelle cela du "drag and drop" ou DnD en abrégé.

    A+
  • Bonjour
    @bazooka
    impeccable comme toujours, Bravo
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Bonjour,
    petite correction mineure pour améliorer le confort utilisateur.
    (correction dans l'event dragover en javascript)
    A++
Connectez-vous ou Inscrivez-vous pour répondre.