AEM: Access JS File in DAM using JavaScript Use-API

Question

I have a certain JS File in DAM, that contains a JSON. I would like to access that file in the helper JS using any methods of JavaScript USE API in Sightly. I know it can be done using Java quite easily, but I would like to do it in a manner that I do not want to touch any Java Code.

I tried things like below. But after that, an input stream is unavailable to convert it to a stream data.

request.resourceResolver.getResource("/path/to/dam/file.js");

AND

request.resourceResolver.getResource("/path/to/dam/file.js").adaptTo(com.adobe.granite.asset.api.Asset);

Random tip: if your file contains JSON then it should be a `.json` file not a `.js` ;) — theopendle, Oct 09 '19 at 08:26
thanks for the tip. Even I was thinking about that, but it's getting rendered from a third-party. I'll pass it on to them to use .json next time :D — Akshay Rathnavas, Oct 10 '19 at 12:34

score 3 · Accepted Answer · answered Oct 09 '19 at 04:43

I saw the answer posted just now. But I had used another similar method before I saw this.

Here is it. It is very similar to the answer but with a few extra steps.

asset = request.resourceResolver.getResource(jsonPath).adaptTo(com.day.cq.dam.api.Asset);
rend = asset.getOriginal().adaptTo(com.day.cq.dam.api.Rendition);

OR DIRECTLY

rend= request.resourceResolver.getResource(jsonPath+"/jcr:content/renditions/original").adaptTo(com.day.cq.dam.api.Rendition);

AND THEN

inputStream = rend.adaptTo(java.io.InputStream);
var is;
var c = '';
var flag = false;
try {
// reads till the end of the stream
while ((is = inputStream.read()) != -1) {
      c = c + String.fromCharCode(is);
}

 } catch (e) {
   // if any I/O error occurs
   log.debug("Input Stream Error " + e)
 }

score 2 · Answer 2 · answered Oct 09 '19 at 00:40

I am not sure if there are pure JS Use API methods which allow you to do it. However, since the JS Use API allows you to use Java classes and methods in it, you should be able to use them to fetch the information.

Since your file is stored as an asset in DAM, you need to access the data from the original rendition. One way of doing it is to use the com.day.cq.dam.api.Asset API to get the original rendition. The com.adobe.granite.asset.api.Asset doesn't have a direct way of accessing the original rendition, hence using the other one.

Working sample custom.js

use(function (data) { 
    var asset = request.resourceResolver.getResource("/content/dam/we-retail/en/data.js").adaptTo(com.day.cq.dam.api.Asset);
    var is = asset.getOriginal().adaptTo(java.io.InputStream);
    var jsonData = JSON.parse(org.apache.commons.io.IOUtils.toString(is, "UTF-8"));
    console.log(jsonData);
    return jsonData;
});

The contents of the file in DAM

{
    "fname": "abc",
    "lname": "xyz"
}

The HTL file

<sly data-sly-use.custom="custom.js">
    ${custom.fname} --> ${custom.lname}
</sly>

score 1 · Answer 3 · answered Jan 29 '20 at 16:44

1

While trying the existing solutions posted here, I had issues reading an arbitrary text file from the DAM; the resource didn't want to be adapted to Asset or Rendition.

After messing around a bit, I found that the resource could be adapted directly to an InputStream. Here's what I came up with:

function readFileToString(location)
{
    var inputStream = request.resourceResolver.getResource(location).adaptTo(java.io.InputStream);
    var data = org.apache.commons.io.IOUtils.toString(inputStream, "UTF-8");

    return data + "";
}

answered Jan 29 '20 at 16:44

Kevin Laity

2,489
1
27
34

Was the `return data + "";` concatenation necessary? I'm assuming it's for identifying the EOF (end-of-file) or something? Or was it just in case the `data` would be null? – chamberlainpi Nov 30 '20 at 21:01
@bigp It's because I wanted the return value to be a javascript string instead of a reference to a java string. That conversion would have happened automatically later, but I've gotten in the habit of forcing the conversion as soon as possible. I find it makes bugs easier to track down. – Kevin Laity Dec 08 '20 at 15:44

AEM: Access JS File in DAM using JavaScript Use-API

3 Answers3