Browse file from document library in custom portlet

Reference Link:

https://www.liferay.com/web/priti/blog/-/blogs/open-document-library-popup-in-custom-portlet


I used the same and made some changes for liferay 6.2 and to close popup on selection of image

Step 1 : Create Document Library URL in your jsp

<%

long dlScopeGroupId = themeDisplay.getScopeGroupId();
LiferayPortletURL documentLibURL = PortletURLFactoryUtil.create(request,          
PortletKeys.DYNAMIC_DATA_MAPPING, themeDisplay.getPlid(), PortletRequest.RENDER_PHASE);
documentLibURL.setWindowState(LiferayWindowState.POP_UP);
documentLibURL.setPortletMode(PortletMode.VIEW);
/* Struts action path is taken from server/../root/web-inf/struts-config.xml */
documentLibURL.setParameter("struts_action","/dynamic_data_mapping/select_document_library");
documentLibURL.setParameter("groupId", String.valueOf(dlScopeGroupId));

%>


Step 2:Add Below div in your jsp

<label class="fl">Image</label>
<div class="image-data">
<a style="text-decoration: none;cursor: pointer;"
onclick="javaScript:<portlet:namespace/>showImages()" >
<aui:button class="blue-btn-common" name="Browse" value="Browse"/></a>
</div><br>
<div class="profile-image">
<img class="journal-image" hspace="0" id="<portlet:namespace/>article-image" src=""   
           style="width:82px;height:83px" vspace="0" />
</div>

Step 3:Add Script in your jsp

/*Here On selecting the image in popup.It will display the image and popup will be closed.*/

<aui:script>
Liferay.provide(window,'_166_selectDocumentLibrary',function(url){
document.getElementById("<portlet:namespace/>cardImage").value = url;
$(".journal-image").css("display", "block");
var pic1 = document.getElementById("<portlet:namespace/>article-image");
pic1.src = url;
Liferay.fire(
'closeWindow',
{
id:  'documentDetails'
}
);
});

function <portlet:namespace/>showImages()
{
var url = '<%= documentLibURL %>';
Liferay.Util.openWindow(
{


id: 'documentDetails',
title: 'Inspect card',
uri:url
}
);
}
</aui:script>