SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 216 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Upload en html5 > Formulaire d’upload en html5

Formulaire d’upload en html5

27 avril 2015 – par Phenix – 77 commentaires

50 votes

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.

Voir en ligne : http://plugins.spip.net/uploadhtml5

Dernière modification de cette page le 27 mars 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 12 avril à 17:31, par formatec En réponse à : Formulaire d’upload en html5

    Salut Phenix,
    je tente d’utiliser ton plugin sur un site où plusieurs auteurs peuvent uploader sur une même page article.
    Ensuite je devrai manipuler et trier les documents par auteur.

    Est il possible dans l’état actuel du plugin de le faire ? jointure avec AUTEURS

    Ou existerait-il un constante de type _CREDITER_DOCUMENTS, qui à l’instar de _TITRER_DOCUMENTS donnerait le nom de l’auteur à la balise #CREDITS

    Ou autre solution à proposer ?
    d’avance merci et bravo pour ce plugin

    Répondre à ce message

  • Le 24 février à 18:45, par RealET En réponse à : Formulaire d’upload en html5

    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

  • Le 23 octobre 2016 à 13:10, par Yohooo En réponse à : Formulaire d’upload en html5

    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 :

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

    Télécharger

    Répondre à ce message

  • Le 5 septembre 2016 à 09:32, par RealET En réponse à : Formulaire d’upload en html5

    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 !

    • Le 17 septembre 2016 à 08:09, par Phenix En réponse à : Formulaire d’upload en html5

      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

  • Le 23 octobre 2015 à 12:47, par Artlogic En réponse à : Formulaire d’upload en html5

    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.

    • Le 24 octobre 2015 à 08:37, par Phenix En réponse à : Formulaire d’upload en html5

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

    • Le 24 octobre 2015 à 18:42, par Artlogic En réponse à : Formulaire d’upload en html5

      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 ?

    • Le 17 septembre 2016 à 00:32, par Olivier En réponse à : Formulaire d’upload en html5

      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 ?

    • Le 17 septembre 2016 à 08:07, par Phenix En réponse à : Formulaire d’upload en html5

      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.

    Répondre à ce message

  • Le 5 septembre 2016 à 21:57, par RealET En réponse à : Formulaire d’upload en html5

    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 :

    1. function formulaires_evenement_proposer_suite_charger_dist($id_groupe, $objet, $id_objet, $retour=''){
    2. $contexte = array();
    3. $contexte['id_groupe'] = explode(',', $id_groupe);
    4. $contexte['objet'] = $objet;
    5. $contexte['id_objet'] = $id_objet;
    6. $contexte['mots'] = cmots_mots_deja_associes($id_groupe, $objet, $id_objet);
    7. return $contexte;
    8. }

    Télécharger

    Et le formulaire appelle la saisie ainsi :

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

    Télécharger

    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 ?

    • Le 5 septembre 2016 à 22:06, par RealET En réponse à : Formulaire d’upload en html5

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

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

      Télécharger

    Répondre à ce message

  • Le 26 juin 2016 à 18:11, par alienwaves En réponse à : Formulaire d’upload en html5

    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.

    • Le 26 juin 2016 à 19:03, par Phenix En réponse à : Formulaire d’upload en html5

      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

  • Le 2 juin 2016 à 17:14, par Sib En réponse à : Formulaire d’upload en html5

    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.

    • Le 2 juin 2016 à 17:34, par Phenix En réponse à : Formulaire d’upload en html5

      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.

    • Le 2 juin 2016 à 19:09, par Sib En réponse à : Formulaire d’upload en html5

      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.

    • Le 2 juin 2016 à 19:16, par Phenix En réponse à : Formulaire d’upload en html5

      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

  • Le 1er février 2016 à 13:15, par Julien En réponse à : Formulaire d’upload en html5

    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

  • Le 16 décembre 2015 à 11:00, par JLuc En réponse à : Formulaire d’upload en html5

    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.

    • Le 17 décembre 2015 à 02:41, par Phenix En réponse à : Formulaire d’upload en html5

      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 ?

    • Le 24 décembre 2015 à 13:54, par JLuc En réponse à : Formulaire d’upload en html5

      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 )

    • Le 25 décembre 2015 à 10:58, par Phenix En réponse à : Formulaire d’upload en html5

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

    • Le 28 décembre 2015 à 09:41, par Mist. GraphX En réponse à : Formulaire d’upload en html5

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

    • Le 28 décembre 2015 à 11:08, par JLuc En réponse à : Formulaire d’upload en html5

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

    • Le 28 décembre 2015 à 13:47, par Phenix En réponse à : Formulaire d’upload en html5

      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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Court-circuit 2

    17 octobre 2011 – 77 commentaires

    Court-circuit 2 permet de rediriger certaines rubriques vers un article particulier. Vous pouvez configurer, dans l’espace privé, les règles de redirection à appliquer. Historique Court-circuit 2 est une évolution de Court-circuit 1, reprenant (...)

  • Créer des squelettes avec Zcore

    14 juillet 2015 – 19 commentaires

    Ou comment bien démarrer avec Zcore. Avec SPIP 3.0 est venu le plugin Zcore développé par un collectif de spipeurs. De plus en plus d’utilisateurs adoptent la mécanique de « Z » pour leurs squelettes. Un premier article a été écris pour expliquer la (...)

  • Envoyer des fichiers avec un formulaire Formidable

    2 janvier – 32 commentaires

    La version 3.0.0 du plugin Formidable permet de créer des formulaires comprenant des envois de fichiers. Cet article regroupe la documentation relative à cette fonctionnalité. Pour une présentation générale de Formidable, voir « Formidable, le (...)

  • Grappes 1.0

    23 novembre 2012 – 27 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • NoSPAM

    20 novembre 2008 – 277 commentaires

    Un plugin pour limiter le risque de spam dans les forums de SPIP.

Ça spipe par là