Display DAM image in Adaptive Forms

A common use case is to display the image(s) residing in the crx repository inline in an Adaptive Form.

Add placeholder image

The first step is to prepend a placeholder div to the panel component. In the code below the panel component is identified by its CSS class name of photo-upload. The JavaScript function is part of client library that is associated with the adaptive forms. This function is called in initialize event of the file attachment component.

/**
* 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>");
}

Display inline image

After the user has selected the image, the hidden field ImageName is populated with the selected image name. This image name is then passed to the damURLToFile function which invokes the createFile function to convert a URL to a Blob for 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);

  }

Deploy on your server

• Download and install the client library and sample images on your AEM instance using AEM Package Manager.
• Download and install the sample form on you your AEM instance using AEM package manager.
• Point your browser to FielInspectionForm
• Select one of the fixture
• You should see the image displayed in the form

Business.Adobe.com resources