Visualizza l'immagine DAM in Forms adattivo

Un caso d'uso comune è quello di visualizzare le immagini che risiedono 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 sottostante il componente pannello è identificato dal nome della classe CSS del foto-upload. La funzione JavaScript fa parte della libreria client associata ai moduli adattivi. Questa funzione viene chiamata nell'evento initialize 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, il campo nascosto ImageName viene popolato con il nome immagine selezionato. Questo nome 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

In questa pagina