AEM Cloud Service - Assets Open PDF in new browser tab | AEM Community Blog Seeding

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

6.0K

Likes

1.1K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

6.0K

Likes

1.1K

Correct Reply

1.1K
kautuk_sahni
Community Manager

21-03-2021

BlogImage.jpg

AEM Cloud Service - Assets Open PDF in new browser tab by Sreekanth Choudry Nalabotu

Abstract

Goal
AEM Cloud Version : 2021.3.5026.20210309T210727Z-210225 (March 09, 2021)

Add a button Open PDF in Tab to the Assets Console tool bar for inline opening the selected PDF in a new browser tab (please stress test it for larger PDFs as the getStream() function might cause performance issues)

Solution
1) Add a proxy servlet apps.experienceaem.assets.core.servlets.PDFProxyServlet to set the content disposition of PDF stream to inline, so user can view the PDF pages in browser...

package apps.experienceaem.assets.core.servlets;

import com.day.cq.dam.api.Asset;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

@Component(
name = "Experience AEM Proxy Servlet",
immediate = true,
service = Servlet.class,
property = { "sling.servlet.methods=GET", "sling.servlet.paths=/bin/eaem/proxy" })
public class PDFProxyServlet extends SlingAllMethodsServlet {
private static final Logger log = LoggerFactory.getLogger(PDFProxyServlet.class);

@Override
protected final void doGet(final SlingHttpServletRequest request, final SlingHttpServletResponse response)
throws ServletException, IOException {
try {
final String pdfPath = request.getParameter("path");

if (StringUtils.isEmpty(pdfPath)) {
return;
}

Resource pdfRes = request.getResourceResolver().getResource(pdfPath);

streamPDF(response, pdfRes);
} catch (final Exception e) {
log.error("Could not get response", e);
response.setStatus(SlingHttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}
}

private void streamPDF(final SlingHttpServletResponse response, final Resource pdfRes) throws Exception {
String fileName = pdfRes.getPath().substring(pdfRes.getPath().lastIndexOf("/") + 1);

response.setContentType("application/pdf");
response.setHeader("Content-disposition", "inline; filename=" + fileName);

Asset asset = pdfRes.adaptTo(Asset.class);
final InputStream in = asset.getOriginal().getStream();

final OutputStream out = response.getOutputStream();

IOUtils.copy(in, out);

out.close();

in.close();
}
}

2) Create the button configuration in /apps/eaem-assets-open-pdf/clientlibs/open-pdf-new-tab/open-pdf-but

3) Create a clientlib /apps/eaem-assets-open-pdf/clientlibs/open-pdf-new-tab/clientlib with categories=dam.gui.actions.coral for adding the button in Assets Console action bar and open the PDF in new tab when clicked
(function ($, $document) {
"use strict";

var _ = window._,
initialized = false,
ASSETS_PAGE = "/assets.html", $openPDFBut,
BESIDE_ACTIVATOR = "cq-damadmin-admin-actions-create-activator",
PROXY_PDF_URL = "/bin/eaem/proxy?path=",
OPEN_PDF_BUT_URL = "/apps/eaem-assets-open-pdf/clientlibs/open-pdf-new-tab/open-pdf-but.html";

if (!isAssetsPage()) {
return;
}

$document.on("foundation-contentloaded", addActionBarButtons);

$document.on("foundation-selections-change", ".foundation-collection", enableOpenPDFButton);

function enableOpenPDFButton(){
if(!$openPDFBut){
return;
}

var $selections = $(".foundation-selections-item");

if ($selections.length !== 1) {
$openPDFBut.addClass("foundation-collection-action-hidden");
return;
}

var mimeType = $selections.find(".foundation-collection-assets-meta").data("asset-mimetype");

if(mimeType !== "application/pdf"){
return;
}

$openPDFBut.removeClass("foundation-collection-action-hidden");
}

function addActionBarButtons(){
if (initialized) {
return;
}

initialized = true;

$.ajax(OPEN_PDF_BUT_URL).done(addOpenPDFButton);
}

function addOpenPDFButton(html) {
html = html || "";

if(!html.trim()){
return;
}

var $eActivator = $("." + BESIDE_ACTIVATOR);

if ($eActivator.length == 0) {
return;
}

$openPDFBut = $("" + html + "")
.insertAfter($eActivator.closest("coral-actionbar-item"));

$openPDFBut = $openPDFBut.find("button");

$openPDFBut.click(openPDFInNewTab);
}

function openPDFInNewTab() {
var $selections = $(".foundation-selections-item"),
assetPath = $selections.data("foundationCollectionItemId");

window.open(PROXY_PDF_URL + assetPath, '_blank');
}

function isAssetsPage() {
return (window.location.pathname.indexOf(ASSETS_PAGE) >= 0);
}
}(jQuery, jQuery(document)));

Read Full Blog

AEM Cloud Service - Assets Open PDF in new browser tab

Q&A

Please use this thread to ask the related questions.

AEM AEMEBlogSeeding Experience Manager