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

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

Explanation :

Here we create a simple form which contain choose button , a text box that save the path of document and submit button.

Also provide a entry in Language.properties

select-image=Please Select the Image

Note :- Before using this you must enable jQuery in Liferay. I already write a blog on how to enable jQuery in Liferay 7.3

Step 3:- Check output

Deploy your portlet and add to page.

  Click on Choose button 

Select the image and click Add

When you submit this . The path will be available in your portlet.

You can download the source code from  here.

Related Post:-

Make You Liferay DXP Application Configurable

Creating Rest API in Liferay 7 (JAX-RS Web Services)

JAX-RS Web Services with Spring in Liferay 7 (DXP)

Read Excel file using Apache POI in Liferay 7.3

Enable jQuery in Liferay 7.3

Access files of Document and Media Portlet

Create Your First Liferay Module Project??

Liferay DXP with MySql

Installation of Liferay DXP 7.2

Send Redirect in Liferay

Use Liferay AutoFields