SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 236 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 – 74 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 2 novembre 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 23 octobre à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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 à 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

  • Le 9 novembre 2015 à 16:00, par Maïeul En réponse à : Formulaire d’upload en html5

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

    • Le 10 novembre 2015 à 17:43, par Phenix En réponse à : Formulaire d’upload en html5

      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 ?

    • Le 18 novembre 2015 à 20:39, par Philippe B. En réponse à : Formulaire d’upload en html5

      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 !

    • Le 18 novembre 2015 à 21:16, par Phenix En réponse à : Formulaire d’upload en html5

      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)

    • Le 18 novembre 2015 à 22:55, par Philippe B. En réponse à : Formulaire d’upload en html5

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

    • Le 19 novembre 2015 à 00:41, par Phenix En réponse à : Formulaire d’upload en html5

      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.

    • Le 21 novembre 2015 à 12:45, par Phenix En réponse à : Formulaire d’upload en html5

      Hello,

      La version 1.4.5 corrige ce problème :

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

    • Le 22 novembre 2015 à 18:37, par Philippe B. En réponse à : Formulaire d’upload en html5

      Super ! Merci pour la réactivité !

    Répondre à ce message

  • Le 16 juillet 2015 à 08:49, par ed_kaka En réponse à : Formulaire d’upload en html5

    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.

    • Le 16 juillet 2015 à 20:06, par Phenix En réponse à : Formulaire d’upload en html5

      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.

    • Le 17 juillet 2015 à 07:52, par ed_kaka En réponse à : Formulaire d’upload en html5

      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.

    • Le 17 juillet 2015 à 08:51, par Phenix En réponse à : Formulaire d’upload en html5

      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.

    • Le 17 juillet 2015 à 10:36, par ed_kaka En réponse à : Formulaire d’upload en html5

      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

    • Le 26 octobre 2015 à 10:13, par Spipmalion En réponse à : Formulaire d’upload en html5

      Bonjour,

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

      Y a t’il contre-indication ?

    • Le 26 octobre 2015 à 21:09, par Phenix En réponse à : Formulaire d’upload en html5

      Y a t’il contre-indication ?

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

      A tester !

    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

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Critère {mots}

    6 août 2009 – 316 commentaires

    Permettre de sélectionner facilement des objets SPIP ayant un ou des mots clefs en communs.

  • LinkCheck : vérificateur de liens

    13 février 2015 – 64 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Import ICS 2 (agenda distant)

    2 août – 39 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • GIS 4

    11 août 2012 – 1286 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

Ça spipe par là