SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 172 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 – 82 commentaires

51 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 24 octobre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 11 août à 14:38, par Ramina En réponse à : Formulaire d’upload en html5

    Bonjour,

    Ce plugin est magnifique. Bravo !

    J’ai juste un petit souci… Je l’ai rendu accessible sur la partie publique (avec accès restreint) et j’ai mis des limites de taille et de poids dans mes_options.php. Ça marche, mais quand Spip retaille des images, les vignettes du portfolio présentent un fond noir avec des petites images en haut à gauche qui n’occupent pas tout l’espace de la vignette. Après, quand on visionne dans la box, la vraie image est OK.

    Je ne sais pas si ce problème est lié au plugin ou à GD2 qui retaille les images… Mais si quelqu’un a une piste… merci de me dire.

    Ramina

    • Le 11 août à 22:30, par Phenix En réponse à : Formulaire d’upload en html5

      Bonjour Ramina,

      Ce que tu dis est assez confus. Le plugin ne s’occupe que de la partie upload des fichiers.

      Je ne vois pas ce que vient faire le plugin accès restreint dans cette histoire.

      Le plugin ne s’occupe pas de la partie affichage, c’est le squelette qui s’en charge.

    • Le 12 août à 12:33, par Ramina En réponse à : Formulaire d’upload en html5

      Bon, c’est pas grave. Mais en continuant mes tests je trouve un truc beaucoup plus embêtant.

      Je m’aperçois que pour pouvoir télécharger des images depuis l’espace public, on doit être logué comme administrateur. Dès lors, je ne vois pas bien l’avantage, puisque les administrateurs ont la possibilité d’aller le faire dans l’espace privé.
      Ce que je trouverais plus utile, c’est de donner la possibilité à des visiteurs inscrits de le faire. Mais ça ne va pas, puisqu’il faut alors leur conférer des droits d’administrateur, et du coup, la possibilité qu’ils aillent se promener dans l’espace privé.
      (C’est pour cacher les pages en question au grand public que j’utilise Accès restreint, mais je sais, c’est pas ici !)

      Merci d’avance

    • Le 12 août à 13:08, par Phenix En réponse à : Formulaire d’upload en html5

      Ce que je trouverais plus utile, c’est de donner la possibilité à des visiteurs inscrits de le faire.

      C’est possible, mais pour des raisons de sécurité, les autorisations de SPIP par défaut bloquent. Il s’agit là d’une opération à mûrement réfléchir car elle peut avoir des conséquences juridique pour la personne qui laisse tout à chacun uploader des données.
      Du coup, par défaut c’est bloqué.

      Un développeur peut surcharger, de mémoire, l’autorisation « joindre_document » et autoriser d’autres à uploader.

    • Le 12 août à 17:32, par Ramina En réponse à : Formulaire d’upload en html5

      Oui, en effet, cela peut avoir des conséquences juridiques mais aussi et surtout pour la sécurité du site.

      J’ai quand même essayé de surcharger la fonction, mais sans y parvenir. Tant pis, je me contenterai de l’upload par l’espace privé.

      Merci quand même.

    Répondre à ce message

  • 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

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

  • cimobile : plugin « détection et aiguillage des téléphones mobiles »

    20 septembre 2011 – 113 commentaires

    Le plugin « cimobile » détecte les téléphones mobiles et les aiguille vers le jeu de squelettes correspondant. Pour détecter un mobile, il prend en compte le « User-Agent », un cookie, un paramètre d’URL, une URL spécifique pour mobile. Il n’utilise pas (...)

  • ScolaSPIP 4

    19 janvier 2016 – 276 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • SPIP 3, Agenda et FullCalendar

    6 août 2012 – 317 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • Couleur de Rubrique

    9 juin 2012 – 58 commentaires

    Le plugin Couleur de rubrique est maintenant adapté à SPIP3. Il permet d’attribuer une couleur par rubrique de façon très simple : un bloc est ajouté sur la page rubrique de l’administration de votre site, qui vous permet de déterminer une couleur, de (...)

  • Passer un site SPIP sous https://

    23 février – 15 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)