function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Pranav ChitransPranav Chitrans 

change profile picture in cusom vf page via community

I want to chnage the user community profile picture (The logged in user) and there are multiple user with different login and password.
I tried but it only change the admin login profile picture but while doing for community it shows and error while saving insufficient privilages. 
global class profile 
{
    global String profileImageUrl { get; set; }
    List<user> lstuser;   
    global profile () 
    {
         lstuser = [select FullPhotoUrl from User where Id =: UserInfo.getUserId()];
         profileImageUrl=lstuser[0].FullPhotoUrl; 
    }
    
    global Document document 
    {
        get 
        {
          if (document == null)
          document = new Document();
          return document;
        }
        set;
     }

     public void upload() 
     {
       Blob b;  
       document.AuthorId = UserInfo.getUserId();
       document.FolderId = UserInfo.getUserId(); // put it in running user's folder
       try
       {
          document.type = 'jpg'; 
          document.IsPublic = true;
          //insert document;
         // ImageId = '06990000001HnuB';
          b = document.Body;
          //ConnectApi.ChatterUsers newPhoto = new ConnectApi.ChatterUsers();  
       } 
       catch (DMLException e) 
       {
          ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading file'));
       } 
       finally 
       {
          document.body = null; // clears the viewstate
          document = new Document();
       }
       ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'File uploaded successfully : '+b));
       String communityId = null;
       String userId= UserInfo.getUserId();
       // ID fileId = ImageId;
       // Set photo
       ConnectApi.Photo photo = ConnectApi.ChatterUsers.setPhoto(communityId, userId,new ConnectApi.BinaryInput(b,'image/jpg','userImage.jpg'));
    }
}
VISUAL FORCE COMPONENT(For header) 
<apex:component controller="profile" >
   <html>
   <apex:attribute name="loginuser" type="String" description="LoginUser"/>
   <meta name="viewport" content="width=1050, initial-scale=1.0"/>
   <link href="{!URLFOR($Resource.bootStrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<body>
  <header>   
  
                         
         <div style="float:right;" width="20%">
            <p style="color:#ffffff;margin-left:-2px;margin-top: 9px;"><b>Welcome : {!LoginUser}</b></p>  
         </div>
         
          <div style="float:right;" width="15%">            
            <apex:outputLink onclick="window.open('https://ccc-infotech-developer-edition.ap1.force.com/FileUploadTimeLog','target=_parent','width=500,height=500'); return false;">
                 <apex:image id="profileImage" url="{!profileImageUrl}" style="height:39px;width:39px;border-radius:19px;margin-right:22px"/>
             </apex:outputLink>
         </div>
     </div> 
   
    
      
 </header>
 </body>
  </html>
</apex:component>

on click of profile photo there will be on new vf [page will be opened in which there will be an option to change the profile photo and after saving the profile pic should get chnaged.
  
<apex:page controller="profile" sidebar="false" showHeader="false">
  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload Profile Photo">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>

      <apex:pageBlockSection showHeader="false" columns="2" id="block1">
       <apex:pageBlockSectionItem >
          <apex:outputLabel value="File" for="file"/>
          <apex:inputFile value="{!document.body}" filename="{!document.name}" id="file"/>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>

    </apex:pageBlock>
  </apex:form>
</apex:page>

 
Best Answer chosen by Pranav Chitrans
Pranav ChitransPranav Chitrans
Hi sslodhi,

I have got the solution.
Apex Class 
global class profile 
{
    global String profileImageUrl { get; set; }
 public blob blbImageBody { get; set; }
    List<user> lstuser;   
    global profile () 
    {
         lstuser = [select FullPhotoUrl from User where Id =: UserInfo.getUserId()];
         profileImageUrl=lstuser[0].FullPhotoUrl; 
         //blbImageBody = '';
    }
    

     public void upload() 
     {
     ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'File uploaded successfully : '+blbImageBody ));
       String communityId = null;
       String userId= UserInfo.getUserId();
       //res.AuthorId = UserInfo.getUserId();
       //res.FolderId = UserInfo.getUserId(); 
       //blob picContect = res.getBodyAsBlob();  


ConnectApi.BinaryInput fileUpload = new ConnectApi.BinaryInput(blbImageBody, 'image/jpg', 'userImage.jpg');  
ConnectApi.Photo photoProfile = ConnectApi.ChatterUsers.setPhoto(communityId, userId, fileUpload);
    }
}

Vf Page(Which to be opened on click of profile photo) 
<apex:page controller="profile" sidebar="false" showHeader="false">
  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload Profile Photo">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>

      <apex:pageBlockSection showHeader="false" columns="2" id="block1">
       <apex:pageBlockSectionItem >
          <apex:inputFile value="{!blbImageBody }"  id="file"/>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>

    </apex:pageBlock>
  </apex:form>
</apex:page>

Now my requirement is once the fike upload process gets complete,the fileUplaod vf page should close automatically and the homepage or user any page gets refrsh.Because after uploading the photo I have to manually close the popup browser then I have to refresh the page then the changes on profile pic gets change..I have to perform it automatically rerender the page automatically once the file uploaded succesfully and the popup browser should close automatcially with jquery concept..thinking on that how do that :(

All Answers

sslodhi87sslodhi87
Hi Pranav,

Please check below mentioned code if that helps you 
blob picContect = res.getBodyAsBlob();  
// get content into picContent(of Blog Type)

ConnectApi.BinaryInput fileUpload = new ConnectApi.BinaryInput(picContect,  
'image/jpg', '<<Pic Name>>');  
ConnectApi.Photo photoProfile = ConnectApi.ChatterUsers.setPhoto(<<communityId>>, userId, fileUpload);

 
Pranav ChitransPranav Chitrans
Hi sslodhi,

Where do i have to implent this code that you have written above.Do i have to remove my full class or to just add on this.... because i already use ConnectApi so I have to keep that or I have to remove that.Kinldy edit my class and show it to me...it will be my pleasure.I am getting confused.


Thanks.
sslodhi87sslodhi87
Hi Pranav,

Your code seems me same only.. but are you passing communityId to the method as in your code it seems me null.

Can you please query the community Id and pass that in the method.

Please let me know if it still not work..

I have done same in one of my project.. searching the code for that.

Thanks
 
Pranav ChitransPranav Chitrans
Hi sslodhi,

I have got the solution.
Apex Class 
global class profile 
{
    global String profileImageUrl { get; set; }
 public blob blbImageBody { get; set; }
    List<user> lstuser;   
    global profile () 
    {
         lstuser = [select FullPhotoUrl from User where Id =: UserInfo.getUserId()];
         profileImageUrl=lstuser[0].FullPhotoUrl; 
         //blbImageBody = '';
    }
    

     public void upload() 
     {
     ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'File uploaded successfully : '+blbImageBody ));
       String communityId = null;
       String userId= UserInfo.getUserId();
       //res.AuthorId = UserInfo.getUserId();
       //res.FolderId = UserInfo.getUserId(); 
       //blob picContect = res.getBodyAsBlob();  


ConnectApi.BinaryInput fileUpload = new ConnectApi.BinaryInput(blbImageBody, 'image/jpg', 'userImage.jpg');  
ConnectApi.Photo photoProfile = ConnectApi.ChatterUsers.setPhoto(communityId, userId, fileUpload);
    }
}

Vf Page(Which to be opened on click of profile photo) 
<apex:page controller="profile" sidebar="false" showHeader="false">
  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload Profile Photo">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>

      <apex:pageBlockSection showHeader="false" columns="2" id="block1">
       <apex:pageBlockSectionItem >
          <apex:inputFile value="{!blbImageBody }"  id="file"/>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>

    </apex:pageBlock>
  </apex:form>
</apex:page>

Now my requirement is once the fike upload process gets complete,the fileUplaod vf page should close automatically and the homepage or user any page gets refrsh.Because after uploading the photo I have to manually close the popup browser then I have to refresh the page then the changes on profile pic gets change..I have to perform it automatically rerender the page automatically once the file uploaded succesfully and the popup browser should close automatcially with jquery concept..thinking on that how do that :(
This was selected as the best answer