« Back

Visual Preview in Liferay DXP: Custom Portlet

General Blogs December 8, 2017 By Sandeep Sapra

Liferay provide OOTB features for Preview of Documents (PDF,  Word, Image), Media (Audio and Video) in Document and Media Portlet.  The same is available after installing following components

  • ImageMagick -  To convert into images for preview
  • Ghostscript  - Dependency of ImageMagick
  • Xuggler  - For Audio and Video.  Has to be included as jar file in case not available in DXP
  • Open Office - This is required for Word document

Post installation , their path needs be added and enabled in Liferay ( Server Administration --> External Services).  If we need to develop this in custom portlet , here is the solution for the same.

Custom Portlet Solution:

1. Create Portlet and write custom code to check what type of file it is ( Doc or Video etc.)

For PDF and Images

boolean hasPDFImages = PDFProcessorUtil.hasImages(fileVersion);

For Audio : 

boolean hasAudio = AudioProcessorUtil.hasAudio(fileVersion);

2. Generate preview URL for different file types

For Audio: 

previewFileURLs[j] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString + "&type=" + PropsUtil.getArray(PropsKeys.DL_FILE_ENTRY_PREVIEW_AUDIO_CONTAINERS)[j]);
 
For PDF and Image

previewFileURLs[0] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString)

3. Use preview URLs on JSP  ( used angular js in our case)

For Audio:

<div class="lfr-preview-audio" id="<portlet:namespace />previewFile{{$index}}">
<div class="lfr-preview-audio-content" id="<portlet:namespace />previewFileContent{{$index}}"></div>
</div>
 
4.  Generating preview when action is taken 
For Audio
AUI().use("aui-audio","liferay-preview", function(A){
new A.Audio({
contentBox:"#<portlet:namespace />previewFileContent"+index,
fixedAttributes:{allowfullscreen:"true",wmode:"opaque"},
oggUrl:"http://localhost:8080/documents/20143/0/SampleAudio_0.4mb.mp3/844cc37b-5130-7097-feda-48b48eeea76a?version\x3d1.0\x26audioPreview\x3d1\x26type\x3dogg",
url:refFileURLStr.url
}).render();
});
 
Screenshots:
For PDF:
 
For Audio:
 
For Video:
No comments yet. Be the first.