Liferay is easy: ImageSelector in Custom Portlet

Today we will how we can include image selector in our custom portlet . Here we create a custom portlet where we provide a Choose button as soon as user click on choose button a pop up will open where he can select the images from document and media portlet . Here i am using Liferay 7.3.

So lets start this step by step :-

Step 1:- Create a simple MVC Portlet

Create a simple Liferay module Project and provide the portlet name as ImageSelectorPortlet and paste this content:-

ImageSelectorPortlet.java

	package image.selector.portlet;

	import com.liferay.item.selector.ItemSelector;
	import com.liferay.item.selector.ItemSelectorReturnType;
	import com.liferay.item.selector.criteria.URLItemSelectorReturnType;
	import com.liferay.item.selector.criteria.image.criterion.ImageItemSelectorCriterion;
	import com.liferay.portal.kernel.portlet.RequestBackedPortletURLFactory;
	import com.liferay.portal.kernel.portlet.RequestBackedPortletURLFactoryUtil;
	import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet;
	import com.liferay.portal.kernel.util.ParamUtil;

	import java.io.IOException;
	import java.util.ArrayList;
	import java.util.List;

	import javax.portlet.ActionRequest;
	import javax.portlet.ActionResponse;
	import javax.portlet.Portlet;
	import javax.portlet.PortletException;
	import javax.portlet.PortletURL;
	import javax.portlet.RenderRequest;
	import javax.portlet.RenderResponse;

	import org.osgi.service.component.annotations.Component;
	import org.osgi.service.component.annotations.Reference;

	import image.selector.constants.ImageSelectorPortletKeys;

	/**
	* @author adit2
	*/
	@Component(
	immediate = true,
	property = {
	"com.liferay.portlet.display-category=category.Liferay Is Easy",
	"com.liferay.portlet.header-portlet-css=/css/main.css",
	"com.liferay.portlet.instanceable=false",
	"javax.portlet.display-name=ImageSelector",
	"javax.portlet.init-param.template-path=/",
	"javax.portlet.init-param.view-template=/view.jsp",
	"javax.portlet.name=" + ImageSelectorPortletKeys.IMAGESELECTOR,
	"javax.portlet.resource-bundle=content.Language",
	"javax.portlet.security-role-ref=power-user,user"
	},
	service = Portlet.class
	)
	public class ImageSelectorPortlet extends MVCPortlet {
	@Reference
	private ItemSelector _itemSelector;

	@Reference(unbind = "-")
	public void setItemSelector(ItemSelector itemSelector) {
	_itemSelector = itemSelector;
	}

	@Override
	public void doView(RenderRequest renderRequest, RenderResponse renderResponse) throws IOException, PortletException {
	List<ItemSelectorReturnType> itemSelectorReturnTypes = new ArrayList<>();
	itemSelectorReturnTypes .add(new URLItemSelectorReturnType());

	ImageItemSelectorCriterion imageItemSelectorCriterion = new ImageItemSelectorCriterion();
	imageItemSelectorCriterion.setDesiredItemSelectorReturnTypes(itemSelectorReturnTypes );

	RequestBackedPortletURLFactory requestBackedPortletURLFactory = RequestBackedPortletURLFactoryUtil.create(renderRequest);
	PortletURL itemSelectorURL = _itemSelector.getItemSelectorURL(requestBackedPortletURLFactory, "sampleTestSelectItem",imageItemSelectorCriterion);

	renderRequest.setAttribute("itemSelectorURL", itemSelectorURL.toString());

	super.doView(renderRequest, renderResponse);
	}

	public void itemActionURL(ActionRequest request,ActionResponse response) throws IOException,PortletException{
	String name = ParamUtil.getString(request, "fileName");
	System.out.println("Selected image : "+name);
	}

	}

view raw ImageSelectorPortlet.java hosted with ❤ by GitHub

Explanation :

At line number 65 we use eventName as sampleTestSelectItem . We use this same eventName in our jsp.

Step 2:- Change view.jsp

Open view.jsp and paste this content:-

view.jsp

	<%@ include file="/init.jsp" %>
	<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
	<portlet:actionURL name="itemActionURL" var="itemActionURL" />

	<aui:form action="<%= itemActionURL %>" method="post" name="fm" >
	<aui:button name="chooseImage" value="Choose"/><br/>
	<aui:input name="fileName" type="text" value=""/><br/><!-- make it hidden in real scenario -->
	<aui:input name="submit" type="submit" value="Submit"/>
	</aui:form>

	<%
	String itemSelectorURL =(String)request.getAttribute("itemSelectorURL");
	%>

	<aui:script use="liferay-item-selector-dialog">

	$('#<portlet:namespace />chooseImage').on(
	'click',
	function(event) {
	var itemSelectorDialog = new A.LiferayItemSelectorDialog(
	{
	eventName: 'sampleTestSelectItem',<!-- must be same which we mention in controller -->
	on: {
	selectedItemChange: function(event) {
	var selectedItem = event.newVal;

	if (selectedItem) {
	var itemValue = selectedItem.value;
	itemSrc = itemValue.url;
	document.getElementById("<portlet:namespace/>fileName").value=itemValue;

	}
	}
	},
	title: '<liferay-ui:message key="select-image" />',
	url: '<%= itemSelectorURL.toString() %>'
	}
	);
	itemSelectorDialog.open();
	}
	);
	</aui:script>