Visual Preview in Liferay DXP: Custom Portlet

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:

Write a blog post too!

Write a deep dive into how you use Liferay projects in your technology stack. Or let people know useful tips and tricks for a particular functionality. The Liferay community needs you!

Login or Create an account