Formulaire d’upload en html5

Un formulaire d’upload en html5 pour l’interface admin de SPIP.

Ce plugin ajoute un système d’upload moderne à SPIP. Il peut être utilisé pour l’upload de masse.

Ce système est basé sur dropzonejs.

Utilisation

Espace privé de SPIP

Dans l’espace d’administration de spip, le plugin doublonne par défaut chaque formulaire de téléversement de logo natif par celui qu’il propose.

Une option permet toutefois de totalement remplacer le formulaire natif par celui proposé par le plugin.

Dans vos squelettes

Le plugin propose un formulaire spip qui peut être appelé de manière classique, en plus de son intégration dans l’interface d’administration de SPIP :

  1. #FORMULAIRE_UPLOADHTML5{objet, id_objet, mode, ajaxReload}

Le formulaire prend 4 paramètres :

  • Un objet SPIP (article, rubrique, brève,...)
  • L’identifiant de l’objet. Les documents seront alors attaché à cet objet.
  • (Optionnel) le mode d’attache. (version >= 1.2.6)
  • (Optionnel) le nom d’un bloc ajax à recharger après l’upload d’un document. (version >= 1.2.7)

Paramétrages

Page de configuration
Les options du plugin sont accessible via la page de gestion des plugins.

Elles règlent :
-  l’activation du plugin sur les pages publiques (par défaut : non).
-  le fait que le plugin remplace ou non les formulaires de téléversement de logo d’objet, dans la partie privée de spip. Par défauit, il ne remplace pas mais les doublonne.
-  la taille maximale de fichiers téléversés
-  le nombre maximal de fichiers téléversés (par défaut : pas de limite).

Constantes

Le téléversement avec uploadhtml5 prend également en compte les constantes php suivantes, à définir dans mes_options.php :
-  _IMG_MAX_WIDTH et _IMG_MAX_HEIGHT utilisées par SPIP pour définir la largeur et la hauteur maximale d’un document image, lorsqu’elles sont définies et non nulles. Si une image téléversée est plus grande, elle est automatiquement redimensionnée à cette taille (cf http://www.spip.net/4645).
-  _TITRER_DOCUMENTS : lorsque cette constante est définie et non nulle, le titre des documents joints est automatiquement pris à partir du nom du fichier (avec mediatheque) (cf http://www.spip.net/5674).

Crédit

Icône par Philipp Süß sur thenounproject.

Dernière modification de cette page le 8 juin 2018

Discussion

26 discussions

  • 1
    alienwaves

    Bonjour Phenix,

    J’ai une requête que je trouverais utile :
    J’aimerais faire un drag&drop de mes images dans le corps de l’article en lieu et place du formulaire.
    b_b sur irc m’a aimablement envoyé vers toi me disant que techniquement il n’y avait pas de soucis majeurs.
    En effet ce serait plus agréable dans une certaine mesure pour l’auteur et surtout plus rapide un drag&drop d’images dans le texte de l’article . Sans bien sûr forcément faire du wysiwyg
    Voilà.

    Cordialement.

    • Hello,

      C’est une idée intéressante, je la note sur ma todo liste.
      Après, que ce soit directement dans le corps de l’article ou depuis la boite à droite, cela ne change pas grand chose, il faudra quand même ajouter le modelès d’insertion dans l’article.

    Répondre à ce message

  • 3

    Bonjour,
    Concernant l’upload des logos par les visiteurs/auteurs à partir de la partie publique, peut-on réduire automatiquement leur taille ?
    J’ai réaliser quelques tests avec le code fourni à Artlogic. En insérant dans mes_options.php, define(’_IMG_MAX_HEIGHT’, 600), aucun redimensionnement automatique pour les logos, ce qui me semble logique. Avec define(’_LOGO_MAX_HEIGHT’, 600), SPIP semble reprendre le pas sur le plugin et refuse l’upload si la hauteur de l’image est plus grande, mais aucun message d’échec, ni redimensionnement automatique par le plugin.
    Bref, ce serait super si cela pouvait fonctionner ;) Merci.

    • Bonjour Sib !

      Je pense que tu mélanges un peu tout :

      Pour la constante _IMG_MAX, la doc dit bien que l’image sera redimensionnée.
      (http://www.spip.net/fr_article4645.html#_IMG_MAX_WIDTH)
      Par contre, pour les logos, la explique que l’image sera refusée (http://www.spip.net/fr_article5451.html#_LOGO_MAX_WIDTH)

      D’après ce que tu me dis, les logos ne sont pas affectés par les constantes _IMG_MAX. C’est donc un problème indépendant du plugin.

      Je te conseil d’ouvrir un ticket pour signaler l’anomalie : https://core.spip.net/projects/spip/issues/

      Le formulaire utilise les fonctions de SPIP pour gérer les images, tout devrait donc fonctionner comme dans SPIP.

    • Merci Phenix pour ta réactivité. Plus simplement, je pensais que le plugin prenait en charge le redimensionnement via dropzone (resize) + html5 (drawImage) ceci avant l’upload et avec les restrictions de mes_options.php.

    • Heu, non, pas du tout.

      Cela a été discuté, mais plusieurs problèmes ce pose, dont une perte de qualité de l’image générée par javascript.

    Répondre à ce message

  • 1

    Serait-il possible dans la prochaine mise à jours de rendre le plugin actif sur un formulaire personnalisé ?

    1. #FORMULAIRE_JOINDRE_DOCUMENT_PERSO{new,#ID_ARTICLE,article}

    En attendant j’ai mis ceci à la ligne 60 dans le pipelines (uploadhtml5_pipelines.php)

    1.  if ($flux['args']['form'] == 'joindre_document' || $flux['args']['form'] == 'joindre_document_perso')

    Julien.

    Répondre à ce message

  • 6

    Bonjour

    j’utilise ce plugin avec bonheur sur la partie publique d’un site.
    ça marche parfaitement bien... la plupart du temps, mais il arrive que parfois, les PDFs (et seulement eux) ne s’uploadent pas.
    -  quelque soit leur taille
    -  uniquement sur un poste (sur un autre poste ça marche bien).

    C’est arrivé il y a un mois pendant quelques jours, puis le problème a disparu, et là c’est réapparu. Je ne vois pas à quoi c’est lié. Il n’y a pas de message d’erreur et je ne vois pas de message de log. Mettre le plugin à jour n’a pas corrigé le problème.

    Aurais tu une idée de comment régler ce problème ?

    Au besoin je peux ajouter des logs pour en savoir plus, si tu m’indiques quoi précisément loger.

    • Hello,

      - uniquement sur un poste (sur un autre poste ça marche bien).

      Du coup, j’ai plutôt l’impression que ce serait la faute du poste en question non ? Il n’y a pas 36 possibilité : c’est soit l’ordinateur, soit la connexion internet, soit le serveur.
      Cela pourrait éventuellement venir du fichier, mais cela me semble plus compliqué.

      Cependant, est-ce que tu utilises la saisie ou bien le formulaire ?

    • En effet, peut être c’est la faute du poste. Je ne pense pas que ça vienne du fichier puisque sur un autre poste le fichier passe bien.

      En tout cas, c’est une saisie [(#SAISIE{input, file, type=file, multiple=1,label=<:uploadhtml5:upload:>})] dans un formulaire (ici http://spip.pastebin.fr/44611 )

    • C’est donc bien le formulaire « classique » et non pas la saisie « upload ».

      Si je me fie à ce que je vois, le plugin n’est pas à jour. Tu pourrais commencer par là ? Car j’ai mis à jour le script dropzone à un moment.

      Cela pourrai résoudre ton soucis (quoi ? On peut rêver :) )

    • Je vois la question en passant, juste pour dire j’ai eut un problème similaire sur un site, et j’ai perdu un temps pas possible alors que en fait l’utilisateur avait installé cette merde de AdBlock, qui supprimait mon script le prenant pour une bannière pub... Bref quand ça le fait sur un ordi et pas un autre, avec des navigateurs récent, bien vérifier que l’utilisateur n’as pas des modules complémentaires foireux.

      Voila, ptet une piste ...

    • @Phenix : le plugin est en 1.4.7 - dev et semble à jour. Pourquoi dis tu qu’il ne semble pas à jour ? C’est le code html du formulaire qui te fait dire ça ? Certaines modalités de l’utilisation du plugin ont évolués et devraient être corrigées dans mon code ?

      @Mist graphx : merci pour la piste adblock. Il y a aussi adblock sur les postes où ça marche, donc ce serait étonnant, mais au point d’étonnement où on en est, aucune piste de doit être exclue ! Je vérifierai lors des prochains problèmes.

    • Hello,

      Non, pas spécialement, mais le code du formulaire à changé par rapport à ce que tu utilises.

      S’il est en 1.4.7, tu as la dernière version de DropZone donc ça ne vient pas du script.

      Essaye avec un navigateur sans plugin pour voir ce que cela donne :)

    Répondre à ce message

  • 7

    on pourrait passer du statut « en developpement » à « en test » voir « stable » non ?

    • Hello,

      On pourrai, mais je viens d’ajouter la saisie upload, ce n’est peut être pas réaliste de la considérée d’emblée comme stable non ?

    • Bonjour,

      A noter que le fichier css saisie_upload.css est chargé côté publique sans que cela soit nécessaire !

      Et merci pour ce plugin !

    • Bonjour,

      La saisies upload a pour vocation d’être utilisé sur l’espace publique. Il me semble donc normale de charger le fichier css (qui normalement passera correctement dans le compresseur de SPIP)

    • Philippe B.

      Oui mais cela ne respecte pas l’option de configuration du plugin qui permet de choisir explicitement l’usage côté publique... Par défaut, le plugin s’utilise uniquement dans l’espace privé.

    • Effectivement, ce serait logique que le fichier css prenne en compte la config.
      De toutes façons la saisie ne fonctionnera pas avec un config non publique.

      Je vais modifier cela quand j’aurai le temps.

    • Hello,

      La version 1.4.5 corrige ce problème :

      http://zone.spip.org/trac/spip-zone/changeset/93051

    • Philippe B.

      Super ! Merci pour la réactivité !

    Répondre à ce message

  • 6

    Bonjour,

    j’utilise ce plugin depuis quelques temps pour uploader mes photos en masse.
    Outre le fait que cet excellent outil me facilite grandement ma tâche, je constate que les photos sont parfois chargées en ordre aléatoire ...
    ex. je sélectionne les photos 1,2,3,4,5 et j’obtiens après upload 1,2,4,5,3

    j’ai trouvé un semblant de solution mais comment l’adapter au plugin spip, car c’est pour moi de l’anglais-chinois ...

    par avance merci.

    • Hello,

      L’« ordre » des images est défini par la règle « qui finira son upload en premier ».

      Du coup la solution que tu proposes serai de ne faire qu’un seul upload à la fois, cela aurai un impact considérable sur les performances.

      Il serai plus judicieux, je pense, de trouver au manière d’ordonnée correctement les galeries.

    • en gros il me faut renommer correctement mes photos puis de faire tri sur ma boucle ...
      Encore merci pour ces éclaircissements et pour cet excellent plugin.

    • Hello,

      Jette un oeil à la constante _TITRER_DOCUMENTS.
      Cela devrait déjà faire une partie du boulot.
      Après oui, il faudra sans doute bidouiller la boucle.

    • merci pour l’info car je ne connaissais pas cette constante,ni beaucoup d’autres d’ailleurs !
      Ça fonctionne nickel lors de l’import des documents, photos ...
      En clair : rtfm, cqfd.

      Pour la boucle, j’ai ajouté un critère de sélection par documents.fichier pour trier l’existant que je n’ai pas encore renommé dans spip.

      Encore merci

    • Spipmalion

      Bonjour,

      Pourquoi ne pas utiliser Mosaique pour trier les photos ?
      http://contrib.spip.net/Mosaique

      Y a t’il contre-indication ?

    • Y a t’il contre-indication ?

      Pas que je sache, en théorie cela devrait fonctionner :)

      A tester !

    Répondre à ce message

  • Spipmalion

    Merci pour ce plugin, ça manquait cruellement à SPIP, c’est formidable !

    Répondre à ce message

  • 1
    Loïc HEROGUER

    Bonjour vous parler des modes d’attaches « (Optionnel) le mode d’attache. (version >= 1.2.6) », quels sont-ils, y a t’il une doc pour cela ? Je souhaiterai permettre de changer le logo d’un article via l’interface public. Merci d’avance pour vos informations et cet excellent plugin !

    • Bonjour,

      Les modes, sont les modes du Core de SPIP. Il me semble que les choix possible sont vignette, image, documents, auto. Cela conditionne aussi l’affichage des images dans le « portefolio ».

      Si tu ne sais pas pourquoi tu changes cette valeur, je te conseil de laisser « auto ».

      Pour changer le logo d’un objet, j’ai répondu Artiogic.

      Attention ! Comme c’est coté publique, les autorisations de SPIP devront peut être être adaptées !

    Répondre à ce message

  • 1

    Bonjour,

    merci pour ce plugin, il me semble que le formulaire ne fonctionne un uniqument quand on es logué, je me trompe ?

    Rainer

    • Oui et non.

      Les fonctions d’upload test les autorisations (de mémoire) joindredocument (pour les documents) et joindredocument + Iconifier pour les logos.

      Ce n’est donc qu’une histoire d’autorisation. Si tu les surcharges correctement cela marchera pour les utilisateurs anonymes.

    Répondre à ce message

  • 2

    Super pratique.
    Un truc bizare cependant : sur un spip 3.1 sur la page Configuration > Identité de la partie privée (ecrire/ ?exec=configurer_identite) le plugin doublonne le formulaire de téléversement d’un logo. Le nouveau apparait d’abord (celui avec uploadhtml5) puis l’ancien ensuite, l’un au dessus de l’autre, et l’ancien a un titre que les styles mettent en majuscule (ce qui d’ailleurs n’est pas joli).

    Juste au dessus il y a une notice :
    Notice : Undefined index : _header in xxxxxxx/plugins/auto/uploadhtml5/v1.3.2/formulaires/uploadhtml5.php on line 39

    • Hello,

      Pour la notice PHP, ce commit devrait corriger le problème.

      En ce qui concerne le double formulaire, c’est un comportement normal et voulu. Par défaut, le plugin offre une alternative aux formulaires de SPIP et donc ne les remplaces pas.

      Tu peux activer l’option « Remplacer le formulaire d’upload de logo de SPIP » dans la configuration du plugin si tu le souhaite.

    • Ok impec ! J’avais pas bien lu la doc mais elle n’en parlait pas ! J’ai donc complété par une partie sur le paramétrage et une sous partie sur la partie privée.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom