Post
Ask Question

How To Update User Profile Picture Using PnpJS In SPFx

Introduction

 
In this article, we will see how to get user profile properties and how to ser user profile pictures of a user using PnPjs in spfx. 
 
so let's see step-by-step implementation.
 

Implementation

 
For testing purposes, we will use SP Editor Extension which is a very cool extension to test PnP js queries. After adding an extension to Chrome you can see the SharePoint tab in developer tools and we will run a query in PnPjs Console.
  • upload a profile image in the SharePoint Document library for eg. I have uploaded an image in the Documents library.
  • Open a developer tool (F12) > Go to the SharePoint tab > Open PnPjs Console
Now we will implement a logic to set a profile picture as below,
  1. /** It will set profile picture of current logged in user */  
  2. import { sp } from "@pnp/sp/presets/all";  
  3.   
  4. (async () => {  
  5.   
  6.   /** Get blob of image from document library*/  
  7.   const blob = await sp.web.lists.getByTitle("Documents").rootFolder.files.getByName("MyProfile.jpg").getBlob();  
  8.   
  9.   /**Set profile picture property*/  
  10.   await sp.profiles.setMyProfilePic(blob).then();  
  11.   console.log("Profile picture updated");  
  12.   
  13.   /**Now we will check if it is updated or not or how to get user profile properties */  
  14.   const loginName = "i:0#.f|membership|[email protected]";  
  15.   const profile = await sp.profiles.getPropertiesFor(loginName);  
  16.   console.log(profile.PictureUrl);  
  17. })().catch(console.log);  

Summary 

 
In this article, we have seen how to update the user profile picture and get user profile properties by user login name.
 
Hope this helps!
 
Sharing is caring!