PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 15/03/2014 16:31:12

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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/
Télécharger le plugin

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

Dernière modification par bazooka07 (19/11/2015 11:43:12)

Hors ligne

#2 16/03/2014 10:36:03

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 205
Site Web

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

Ca marche bien chez moi. Bravo.  smile


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#3 16/03/2014 13:14:11

brar2010
Membre
Lieu : AGADIR
Inscription : 21/08/2011
Messages : 132
Site Web

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

Merci!!


--------------------
Palestine souffre


Je suis la http://www.yanplus.eb2a.com/

Hors ligne

#4 19/03/2014 13:09:33

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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=P … +officiels

Hors ligne

#5 19/03/2014 19:24:09

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

ça marche super bien (chez OVH en tout cas) et c'est super pratique l'envoi par lots et drag'n drop !

Hors ligne

#6 20/03/2014 11:48:48

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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

Hors ligne

#7 21/03/2014 10:36:09

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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

Hors ligne

#8 21/03/2014 14:57:54

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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 !

Hors ligne

#9 21/03/2014 18:12:26

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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

Hors ligne

#10 24/03/2014 12:30:56

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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 ?

Hors ligne

#11 24/03/2014 13:58:51

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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.

Hors ligne

#12 24/03/2014 15:19:56

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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

Hors ligne

#13 25/03/2014 11:21:51

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

Je ne suis pas codeur plus que ça, mais j'ai fait quelques modifs dans le plugin html5uploader...

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

version 1.01-bis

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

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

Dernière modification par Rohirrim (25/03/2014 17:13:25)

Hors ligne

#14 25/03/2014 13:32:24

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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

Hors ligne

#15 25/03/2014 15:23:59

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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 !

Hors ligne

#16 25/03/2014 17:03:27

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

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

Hors ligne

#17 25/03/2014 18:56:32

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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

Hors ligne

#18 26/03/2014 10:27:47

Rohirrim
Membre
Inscription : 01/10/2010
Messages : 160

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

Merci !
en même temps, pour IE ( roll ), 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 ?

Dernière modification par Rohirrim (26/03/2014 10:31:30)

Hors ligne

#19 27/03/2014 01:07:02

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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

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

Dernière modification par bazooka07 (27/03/2014 01:08:21)

Hors ligne

#20 19/11/2015 01:20:30

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

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+

Hors ligne

#21 19/11/2015 08:42:22

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

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

Bonjour
@bazooka
impeccable comme toujours, Bravo

Hors ligne

#22 19/11/2015 11:38:37

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

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

Bonjour,
petite correction mineure pour améliorer le confort utilisateur.
(correction dans l'event dragover en javascript)
A++

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés