How To Update User Profile Picture Using PnpJS In SPFx


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.


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";  
  4. (async () => {  
  6.   /** Get blob of image from document library*/  
  7.   const blob = await sp.web.lists.getByTitle("Documents").rootFolder.files.getByName("MyProfile.jpg").getBlob();  
  9.   /**Set profile picture property*/  
  10.   await sp.profiles.setMyProfilePic(blob).then();  
  11.   console.log("Profile picture updated");  
  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|";  
  15.   const profile = await sp.profiles.getPropertiesFor(loginName);  
  16.   console.log(profile.PictureUrl);  
  17. })().catch(console.log);  


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!