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";
  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|[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!