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 plugin n’est plus utile et n’est plus maintenu à partir de SPIP 4.0.0 qui intègre BigUp qui peut le remplacer.

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 :

#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éfaut, il ne les 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).

Autorisations

Pour se faire, le téléversement doit être compatible avec les autorisations définies pour le site. Au besoin, vous pouvez surcharger les autorisations définies par défaut. Les autorisations impliquées sont :
-  joindredocument
-  associerdocuments

Crédit

Icône par Philipp Süß sur thenounproject.

Plugin alternatif à préférer

Un autre plugin pour uploader des gros fichiers est désormais intégré à SPIP-dist et il faut donc préférer l’utiliser : git.spip.net/spip/bigup/

Discussion

31 discussions

  • Salut Phenix,

    Une idée qui pourrait compléter de manière géniale ce plugin, c’est d’y rajouter l’upload via copié/collé d’image.
    Gmail le fait et c’est juste pratique.

    J’ai fait une petite recherche et j’ai trouvé :

    Donc, si ça te tente...

    Répondre à ce message

  • 1

    Dans la dernière version du plugin, il faut ajouter dans uploadhtml5_pipelines.php ligne 34 des conditions pour éviter des erreurs html de la head du site :

    	if ( find_in_path('css/dropzone/dropzone.css') ) {
    	    $flux .= '<link rel="stylesheet" href="'.find_in_path('lib/dropzone/dropzone.css').'" type="text/css" media="screen" />';
    	}
    	if ( find_in_path('css/saisie_upload.css') ) {
    	    $flux .= '<link rel="stylesheet" href="'.find_in_path('css/saisie_upload.css').'" type="text/css" media="screen" />';
    	}

    Répondre à ce message

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

    Répondre à ce message

  • 4

    Hello,

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

     [(#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 :

      #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 :

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

      que j’appelle avec :

      <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 :

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

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

    Répondre à ce message

  • 1

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

    J’ai un formulaire appelé par :

    #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);

    Répondre à ce 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.

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

    #FORMULAIRE_JOINDRE_DOCUMENT_PERSO{new,#ID_ARTICLE,article}

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

     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

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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