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">&nbsp;</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

Popular posts from this blog

How to find the companyId in Liferay.

How to add portlet in liferay theme.

How to create soap client for ofbiz service or ofbiz service invocation from another application.