Blogs

Liferay  Image Editor is  one of the built in feature provided by Liferay for editing and updating the images, to know more about this please refer. Many times we come up with requirements of having image editor in our custom module. To use Image Editor in our custom code we can do the following steps :

1. Load the Liferay Image Editor  
2. Save the Updated Image

1. Load the Liferay Image Editor :
We need to select an image to be edited, as in my example i have uploaded an image in document and media. Referring it in Custom Module, also we will be requiring a few variables which i have updated in the below code :

@Override
    public void doView(RenderRequest renderRequest, RenderResponse renderResponse)
            throws IOException, PortletException {

      HttpServletRequest _httpServletRequest = PortalUtil.getOriginalServletRequest(PortalUtil.getHttpServletRequest(renderRequest));
      ThemeDisplay themeDisplay = (ThemeDisplay) renderRequest.getAttribute(WebKeys.THEME_DISPLAY);
      LiferayPortletResponse liferayPortletResponse = PortalUtil.getLiferayPortletResponse(renderResponse);       
      
      // Fetch the Portlet Id of Image editor Module
      String imageEditorPortletId = PortletProviderUtil.getPortletId(Image.class.getName(),
                PortletProvider.Action.EDIT);

       // Fetch the Uploaded Image
       FileEntry fileEntry = _dlAppLocalService.getFileEntry(themeDisplay.getScopeGroupId(), 0L, "Sample Image");
      
       // Image Editor URL for Loading the Liferay Image Editor
       PortletURL imageEditorURL = PortletURLFactoryUtil.create(_httpServletRequest, imageEditorPortletId,
                PortletRequest.RENDER_PHASE);
       imageEditorURL.setParameter("mvcRenderCommandName", "/image_editor/view");
       imageEditorURL.setWindowState(LiferayWindowState.POP_UP);
       
       
       // Action URL for saving the Image after editing
       PortletURL editURL = liferayPortletResponse.createActionURL();
       editURL.setParameter(ActionRequest.ACTION_NAME, "uploadEditImage");   
       editURL.setParameter("fileEntryId", String.valueOf(fileEntry.getFileEntryId()));

       //Variable Defined
       renderRequest.setAttribute("editItemURL", imageEditorURL.toString());
       renderRequest.setAttribute("fileEntryFilename", fileEntry.getTitle());
       renderRequest.setAttribute("uploadItemURL", editURL.toString());
       renderRequest.setAttribute("fileEntrySrc", DLUtil.getPreviewURL(fileEntry, fileEntry.getFileVersion(), themeDisplay, ""));
       renderRequest.setAttribute("fileEntryMimeType", fileEntry.getMimeType());

        super.doView(renderRequest, renderResponse);
    }

    @Reference
    private DLAppLocalService _dlAppLocalService;

Once we define the required variable, we will be rendering the Image editor in our view.jsp .

//Displaying Current Image
<img src="${fileEntrySrc }"  />

//Button for loading the Image editor
<aui:button onClick="editWithImageEditor('${editItemURL}', '${uploadItemURL}', '${fileEntryFilename}', '${fileEntrySrc}', '${fileEntryMimeType}')" value="edit-image" />

<aui:script>
function editWithImageEditor(
    editItemURL, uploadItemURL, fileEntryFilename, fileEntrySrc, fileEntryMimeType) {    
    Liferay.Util.editEntity(
        {
            dialog: {
                destroyOnHide: true,
                zIndex: 100000
            },
            id: 'dlImageEditor',
            stack: false,
            title: '${editLanguageKey} ' + fileEntryFilename,
            uri: editItemURL,
            urlParams: {
                entityURL: fileEntrySrc,
                saveMimeType: fileEntryMimeType,
                saveParamName: 'imageEditorFileName',
                saveURL: uploadItemURL
            }
        },
        AUI().bind('<portlet:namespace/>_onSaveEditSuccess', this)
    );
}
function <portlet:namespace/>_onSaveEditSuccess() {
    Liferay.Portlet.refresh('#p_p_id<portlet:namespace/>');
}
</aui:script>

Once we add the above code and click on edit-image button, we will be seeing  the Liferay Image Editor as shown below : 

2.  Save the Updated Image : 
Once we edit the image and click on the save button, the updated image needs to be saved. For that we need to add the action method as below :

public void uploadEditImage(ActionRequest actionRequest, ActionResponse actionResponse)
            throws IOException, PortletException {   
     UploadPortletRequest uploadPortletRequest = PortalUtil.getUploadPortletRequest(actionRequest);
     
     long fileEntryId = ParamUtil.getLong(uploadPortletRequest, "fileEntryId");
     String sourceFileName = uploadPortletRequest.getFileName("imageEditorFileName");
     ServiceContext serviceContext = ServiceContextFactory.getInstance(actionRequest); 

     // Fetch the updated Image
     File file = uploadPortletRequest.getFile("imageEditorFileName");

     // Fetch the Existing File to update the Meta Data
     FileEntry oldFileEntry = _dlAppLocalService.getFileEntry(fileEntryId);  

     // Updating the File entry
     _dlAppLocalService.updateFileEntry(serviceContext.getUserId(), fileEntryId, sourceFileName,
                oldFileEntry.getMimeType(), oldFileEntry.getTitle(), oldFileEntry.getDescription(), StringPool.BLANK,
                DLVersionNumberIncrease.MINOR, file, serviceContext);  

     // Send the Success message
     JSONObject jsonObject = JSONUtil.put("success", Boolean.TRUE);
     JSONPortletResponseUtil.writeJSON(actionRequest, actionResponse, jsonObject);
    }
    
    @Reference
    private DLAppLocalService _dlAppLocalService;

Note - Above example is done on Liferay 7.3