How To Update User Profile Picture Using PnpJS In SPFx

In this article, we will see how to update the user profile picture using pnp js 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,

/** It will set profile picture of current logged in user */
import { sp } from "@pnp/sp/presets/all";

(async () => {

  /** Get blob of image from document library*/
  const blob = await sp.web.lists.getByTitle("Documents").rootFolder.files.getByName("MyProfile.jpg").getBlob();

  /**Set profile picture property*/
  await sp.profiles.setMyProfilePic(blob).then();
  console.log("Profile picture updated");

  /**Now we will check if it is updated or not or how to get user profile properties */
  const loginName = "i:0#.f|membership|[email protected]";
  const profile = await sp.profiles.getPropertiesFor(loginName);
  console.log(profile.PictureUrl);
})().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!