How to change Portrait/Profile photo in liferay programitically.
Sometime liferay developer need to change profile/portrait photo programmatically . Here i want to share my experience. Create portlet action url and method as below:
In jsp file create action url:
<script type="text/javascript" src="<%= request.getContextPath()%>/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/jasny-bootstrap.min.css">
<portlet:actionURL name="updateProfile" var="updateProfileURL" windowState="normal"/>
<form action="<%=updateProfileURL %>" method="post" enctype="multipart/form-data" id='<portlet:namespace/>updateProfile'>
<input name="<portlet:namespace/>userEmail" id='<portlet:namespace/>userEmail' type="hidden" value="" />
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">First Name*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="text" class="form-control" placeholder="First Name" id="<portlet:namespace/>firstName" name='<portlet:namespace/>firstName' value="<%= user.getFirstName()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">Last Name*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="text" class="form-control" placeholder="Last Name" id="<portlet:namespace/>lastName" name='<portlet:namespace/>lastName' value="<%=user.getLastName()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">Email*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="email" class="form-control" placeholder="Email" id="<portlet:namespace/>email" name='<portlet:namespace/>email' value="<%=user.getEmailAddress()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-3 col-sm-3 col-md-3">
<span class="profile-label">Photo:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
<span>
<img height="auto" width="100%" src="<%=themeDisplay.getUser().getPortraitURL(themeDisplay) %>"
class="img-responsive" alt="Responsive image">
</span>
<span>Profile Photo</span>
</div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span> <input type="file" name='<portlet:namespace/>file'/> </span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label"> </span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div>
<a class="form-control btn btn-default" href="javascript:updateProfile()">
Save
</a>
</div>
</div>
</div>
</form>
<script>
function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}
function updateProfile(){
var firstName=$('#<portlet:namespace/>firstName').val();
var lastName=$('#<portlet:namespace/>lastName').val();
var email=$('#<portlet:namespace/>email').val();
if ($.trim(firstName).length == 0) {
alert('Please enter first name');
}else if($.trim(lastName).length == 0){
alert('Please enter last name');
}else if($.trim(email).length == 0){
alert('Please enter email address');
}else if(validateEmail(email)){ document.getElementById('<portlet:namespace/>updateProfile').submit();
}else {
alert('Please enter valid email address');
}
}
</script>
And process action method in portlet class :
@ProcessAction(name="updateProfile")
public void updateProfile(ActionRequest actionRequest, ActionResponse actionResponse){
ThemeDisplay themeDisplay = (ThemeDisplay)actionRequest.getAttribute(WebKeys.THEME_DISPLAY);
UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(actionRequest);
String firstName= uploadRequest.getParameter("firstName");
String lastName= uploadRequest.getParameter("lastName");
String email= uploadRequest.getParameter("email");
File file = uploadRequest.getFile("file");
if(file!=null){
try {
User user=themeDisplay.getUser();
user.setFirstName(firstName);
user.setLastName(lastName);
user.setEmailAddress(email);
UserLocalServiceUtil.updateUser(user);
InputStream inputStream = new FileInputStream(file);
byte[] bytes = FileUtil.getBytes(inputStream);
UserServiceUtil.updatePortrait(themeDisplay.getUser().getUserId(), bytes);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (PortalException e) {
e.printStackTrace();
} catch (SystemException e) {
e.printStackTrace();
}
}
}
In jsp file create action url:
<script type="text/javascript" src="<%= request.getContextPath()%>/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/jasny-bootstrap.min.css">
<portlet:actionURL name="updateProfile" var="updateProfileURL" windowState="normal"/>
<form action="<%=updateProfileURL %>" method="post" enctype="multipart/form-data" id='<portlet:namespace/>updateProfile'>
<input name="<portlet:namespace/>userEmail" id='<portlet:namespace/>userEmail' type="hidden" value="" />
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">First Name*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="text" class="form-control" placeholder="First Name" id="<portlet:namespace/>firstName" name='<portlet:namespace/>firstName' value="<%= user.getFirstName()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">Last Name*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="text" class="form-control" placeholder="Last Name" id="<portlet:namespace/>lastName" name='<portlet:namespace/>lastName' value="<%=user.getLastName()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label">Email*:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<input type="email" class="form-control" placeholder="Email" id="<portlet:namespace/>email" name='<portlet:namespace/>email' value="<%=user.getEmailAddress()%>">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-3 col-sm-3 col-md-3">
<span class="profile-label">Photo:</span>
</div>
<div class="col-xs-8 col-sm-5 col-md-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
<span>
<img height="auto" width="100%" src="<%=themeDisplay.getUser().getPortraitURL(themeDisplay) %>"
class="img-responsive" alt="Responsive image">
</span>
<span>Profile Photo</span>
</div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span> <input type="file" name='<portlet:namespace/>file'/> </span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="profile-label"> </span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div>
<a class="form-control btn btn-default" href="javascript:updateProfile()">
Save
</a>
</div>
</div>
</div>
</form>
<script>
function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}
function updateProfile(){
var firstName=$('#<portlet:namespace/>firstName').val();
var lastName=$('#<portlet:namespace/>lastName').val();
var email=$('#<portlet:namespace/>email').val();
if ($.trim(firstName).length == 0) {
alert('Please enter first name');
}else if($.trim(lastName).length == 0){
alert('Please enter last name');
}else if($.trim(email).length == 0){
alert('Please enter email address');
}else if(validateEmail(email)){ document.getElementById('<portlet:namespace/>updateProfile').submit();
}else {
alert('Please enter valid email address');
}
}
</script>
And process action method in portlet class :
@ProcessAction(name="updateProfile")
public void updateProfile(ActionRequest actionRequest, ActionResponse actionResponse){
ThemeDisplay themeDisplay = (ThemeDisplay)actionRequest.getAttribute(WebKeys.THEME_DISPLAY);
UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(actionRequest);
String firstName= uploadRequest.getParameter("firstName");
String lastName= uploadRequest.getParameter("lastName");
String email= uploadRequest.getParameter("email");
File file = uploadRequest.getFile("file");
if(file!=null){
try {
User user=themeDisplay.getUser();
user.setFirstName(firstName);
user.setLastName(lastName);
user.setEmailAddress(email);
UserLocalServiceUtil.updateUser(user);
InputStream inputStream = new FileInputStream(file);
byte[] bytes = FileUtil.getBytes(inputStream);
UserServiceUtil.updatePortrait(themeDisplay.getUser().getUserId(), bytes);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (PortalException e) {
e.printStackTrace();
} catch (SystemException e) {
e.printStackTrace();
}
}
}
Comments
Post a Comment