cpilsworth/assetpicker.html

## assetpicker.html
<!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>
	<!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>