Images intégrées dans les formulaires adaptatifs

Il est arrive souvent d’afficher l’image chargée en tant qu’image intégrée dans un formulaire adaptatif. Par défaut, l’image chargée s’affiche sous forme de lien et cette expérience peut être améliorée en affichant l’image dans le formulaire adaptatif. Cet article décrit les étapes à suivre pour afficher une image intégrée.

Ajouter une image d’espace réservé

La première étape consiste à ajouter une balise div d’espace réservé au composant de pièce jointe. Dans le code ci-dessous, le composant de pièce jointe est identifié par son nom de classe CSS, photo-upload. La fonction JavaScript fait partie de la bibliothèque cliente associée aux formulaires adaptatifs. Cette fonction est appelée dans l’événement d’initialisation du composant de pièce jointe.

/**
* Add Placeholder Image
* @return {string}
 */
function addTempImage(){
  $(".photo-upload").prepend(" <div class='preview'' style='border:2px solid;height:225px;width:175px;text-align:center'><br><br><div class='text'>3.5mm * 4.5mm<br>2Mb max<br>Min 600dpi</div></div><br>");

}

Afficher une image intégrée

Une fois que l’utilisateur ou l’utilisatrice a chargé l’image, la fonction répertoriée ci-dessous est appelée dans l’événement d’engagement du composant de pièce jointe. La fonction reçoit l’objet de fichier chargé en tant qu’argument.

/**
* Consume Image
* @return {string}
 */
function consumeImage (file) {
  var reader = new FileReader();
    console.log("Reading file");
  reader.addEventListener("load", function (e) {
    console.log("in the event listener");
    var image  = new Image();
    $(".photo-upload .preview .imageP").remove();
    $(".photo-upload .preview .text").remove();
    image.width = 170;image.height = 220;
    image.className = "imageP";
    image.addEventListener("load", function () {
      $(".photo-upload .preview")[0].prepend(this);
    });
    image.src = window.URL.createObjectURL(file);
  });
  reader.readAsDataURL(file);
}

Déployer sur votre serveur

  • Téléchargez et installez la bibliothèque cliente sur votre instance AEM à l’aide du gestionnaire de packages AEM.
  • Téléchargez et installez l’exemple de formulaire sur votre instance AEM à l’aide du gestionnaire de packages AEM.
  • Pointez votre navigateur sur Ajouter une image intégrée.
  • Cliquez sur le bouton « Joindre votre photo » pour ajouter une image.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e