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.

Plugin alternatif

Un autre plugin pour ulpoader des gros fichiers
https://gitlab.com/magraine/bigup

updated on 2 October 2019

Discussion

29 discussions

  • 1

    Bonjour,

    Est-ce que tu pourrais documenter comment utiliser la saisie dans un squelette côté public ?

    Et question subsidiaire : est-ce qu’il est possible d’utiliser cette saisie dans un formulaire de création d’un objet (donc avec id_objet=new) et que l’association avec l’objet créé se fasse comme il faut à l’enregistrement ?

    Merci d’avance !

    • Yop !

      Pour le moment, j’ai pas vraiment le temps de mettre à jour cette documentation, d’autant que la saisie est vraiment très expérimentale comme code, la documenter avant qu’elle ne passe en “test” n’a pas de sens...

    Reply to this message

  • 4

    Hello,

    Je me demandais s’il étati possible de télécharger des logos sur un auteur?
    J’ai tenté :

    1.  [(#FORMULAIRE_UPLOADHTML5{auteur,#ID_AUTEUR,auto,inc/inc_avatar_modif})]

    ...sans succès. Merci de vos réponses.

    • Bonjour,

      Pour activer la fonction d’upload de logo, il faut le mentionner comme ceci:

      1. #FORMULAIRE_UPLOADHTML5{objet,id_objet, auto, mon_bloc, #ARRAY{logo, oui}}

      Ce n’est pas encore documenté clairement.

      Ensuite, tu utilises mal la fonction ajaxReload. Il faut lui passer le “nom ajax” d’un bloc (voir la doc).

    • Merci de ta réponse, j’ai mis ceci dans une inclusion :

      1. [(#FORMULAIRE_UPLOADHTML5{auteur,#ID_AUTEUR, auto, avatarlogo, #ARRAY{logo, oui}})]

      que j’appelle avec :

      1. <INCLURE{fond=inc/inc_avatar_modif}{id_auteur}{ajax=avatarlogo}{env}>

      Rien à faire. L’image se charge visuellement sur la barre de progression animée mais le logo n’est toujours pas changé. NB: Le même formulaire fonctionne par ailleurs et nous permet d’ajouter des docs sur des articles.

      Une idée?

    • Bonjour je butte sur ce problème. J’ai testé plusieurs solutions

      #FORMULAIRE_UPLOADHTML5{auteur,id_auteur, auto, mon_bloc, #ARRAY{logo, oui}}

      et même plus simplement

      #FORMULAIRE_UPLOADHTML5{objet,id_objet, auto, mon_bloc, #ARRAY{logo, oui}}

      sans succès.

      Comment changer les logos des auteurs ?

    • Bonjour Olivier,

      Il faut bien entendu remplacer id_auteur par un nombre (5 pour l’auteur 5).
      Si tu es dans une boucle AUTEURS :

      1. [(#FORMULAIRE_UPLOADHTML5{auteur,#ID_AUTEUR, auto, avatarlogo, #ARRAY{logo, oui}})]

      Sinon, il me faudrai plus de détail pour comprendre ton problème.

    Reply to this message

  • 1

    Je n’arrive pas à faire rajouter un fichier à un événement.

    J’ai un formulaire appelé par :

    1. #FORMULAIRE_EVENEMENT_PROPOSER_SUITE{#GET{groupes},evenement,#ENV{id_evenement},#SELF|parametre_url{merci,oui}}

    La fonction charger contient :

    function formulaires_evenement_proposer_suite_charger_dist($id_groupe, $objet, $id_objet, $retour=''){
    	$contexte = array();
    	$contexte['id_groupe'] = explode(',', $id_groupe);
    	$contexte['objet'] = $objet;
    	$contexte['id_objet'] = $id_objet;
    	$contexte['mots'] = cmots_mots_deja_associes($id_groupe, $objet, $id_objet);
    	return $contexte;
    }

    Et le formulaire appelle la saisie ainsi :

    		<ul>
    			<li class="editer editer_uploaddoc[ (#ENV**{erreurs}|table_valeur{uploaddoc}|oui)erreur]">
    				<label for="uploaddoc">Joindre un document</label>[
    				<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{uploaddoc})</span>
    				]#SAISIE{upload, objet=#ENV{objet}, id_objet=#ENV{id_objet}, dz-message=Déposer un document ici, nom=uploaddoc}
    			</li>
    		</ul>

    L’upload se passe “bien” : les fichiers sont bien sur le serveur et même visibles dans la médiathèque (statut non publié), mais il ne sont pas rattachés à l’événement.

    Qu’y a-t’il de plus à faire ?

    • Ben voilà, il fallait rajouter dans la partie traiter de mon formulaire :

      	include_spip('inc/saisie_upload');
      	saisie_upload_traiter($objet, $id_objet);

    Reply to this message

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

    Reply to this 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.

    Reply to this 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.

    Reply to this 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 :)

    Reply to this 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.

    • Philippe B.

      Super ! Merci pour la réactivité !

    Reply to this message

  • 6
    ed_kaka

    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.

    • ed_kaka

      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.

    • ed_kaka

      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 !

    Reply to this message

  • Spipmalion

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

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom