Visualizzare l’immagine DAM in Adaptive Forms

Un caso d’uso comune consiste nel visualizzare le immagini residenti nell’archivio crx in linea in un modulo adattivo.

Aggiungi immagine segnaposto

Il primo passaggio consiste nell’anteporre un div segnaposto al componente pannello. Nel codice seguente il componente pannello è identificato dal nome della classe CSS photo-upload. La funzione JavaScript fa parte della libreria client associata ai moduli adattivi. Questa funzione viene chiamata nell’evento di inizializzazione del componente file allegato.

/**
* Add Placeholder Div
*/
function addPlaceholderDiv(){

     $(".photo-upload").prepend(" <div class='preview'' style='border:1px dotted;height:225px;width:175px;text-align:center'><br><br><div class='text'>The Image will appear here</div></div><br>");
}

Visualizza immagine in linea

Dopo che l’utente ha selezionato l’immagine, nel campo nascosto NomeImmagine viene inserito il nome immagine selezionato. Questo nome di immagine viene quindi passato alla funzione damURLToFile che richiama la funzione createFile per convertire un URL in un BLOB per FileReader.readAsDataURL().

/**
* DAM URL to File Object
* @return {string}
 */
 function damURLToFile (imageName) {
   console.log("The image selected is "+imageName);
     createFile(imageName);
}
async function createFile(imageName){
  let response = await fetch('/content/dam/formsanddocuments/fieldinspection/images/'+imageName);
  let data = await response.blob();
    console.log(data);
  let metadata = {
    type: 'image/jpeg'
  };
  let file = new File([data], "test.jpg", metadata);
     let reader = new FileReader();
    reader.readAsDataURL(file);
     reader.onload = function() {
    console.log("finished reading ...."+reader.result);

  };
    var image  = new Image();
    $(".photo-upload .preview .imageP").remove();
    $(".photo-upload .preview .text").remove();
    image.width = 484;image.height = 334;
    image.className = "imageP";
    image.addEventListener("load", function () {
      $(".photo-upload .preview")[0].prepend(this);
    });

    console.log(window.URL.createObjectURL(file));
    image.src = window.URL.createObjectURL(file);

  }

Distribuisci sul server

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e