Skip to content

Instantly share code, notes, and snippets.

@cpilsworth
Created August 10, 2022 15:19
Show Gist options
  • Save cpilsworth/b1cde93d5e2970cfe959e1d52182e380 to your computer and use it in GitHub Desktop.
Save cpilsworth/b1cde93d5e2970cfe959e1d52182e380 to your computer and use it in GitHub Desktop.
AEM Asset Picker
<!DOCTYPE html>
<html>
<head>
<script>
const host = 'http://localhost:4503';
const rootPath = '/content/dam/mycompany';
window.addEventListener("message", (event) => {
if (event.origin !== host) {
return;
}
const selection = JSON.parse(event.data);
const {
path,
src
} = selection.data[0];
document.getElementById('selected').innerHTML = path;
document.getElementById('thumb').src = `${host}${path}`;
document.getElementById('code').innerText = JSON.stringify(selection, null, 2);
}, false);
</script>
</head>
<body>
<h2>AEM Asset Picker</h2>
<p>This is an example of how the AEM DAM asset picker can be used to select assets from the AEM DAM and pass back information to some third-party application such as a CMS. See details of the <a href="https://experienceleague.adobe.com/docs/experience-manager-64/assets/managing/asset-selector.html?lang=en#">Asset Picker</a> for more details. </p>
<hr>
<p><span>Path: </span><code id="selected">No asset currently selected</code></p>
<img id="thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" alt="thumbnail of selected image" style="max-width: 500px;" />
<hr>
<button onclick="window.open(`${host}/aem/assetpicker.html${rootPath}?assettype=images`, '_new'); ">Select Asset</button>
<button onclick="window.open(`${host}/aem/assetpicker.html${rootPath}?assettype=images&viewmode=search`, '_new'); ">Search for Asset</button>
<hr>
<pre id="code" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment