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
- Scarica e installa la libreria client e le immagini di esempio nell'istanza AEM tramite Gestione pacchetti AEM.
- Scarica e installa il modulo di esempio nella tua istanza AEM utilizzando Gestione pacchetti AEM.
- Puntare il browser a FileInspectionForm
- Selezionate uno degli staffaggi
- Dovresti visualizzare l’immagine nel modulo