Upload And Set Office 365 Profile Image Using Microsoft Graph API

N Vinodh
SharePoint MVP
Published On :   06 Feb 2019
Visit Count
Today :  3    Total :   202

In this article, I have explained how to change your profile image in Office 365 and set it into Office 365 from SharePoint online using Microsoft Graph API.

In my previous article, I explained how to fetch access tokens to consume Graph API. In this article, we will discuss how to change Office 365 profile image from SharePoint using Microsoft Graph API.

My previous articles related to Microsoft Graph API from the below links.

Update User Profile Photo

Users are able to update the Office 365 from the following endpoints. You can use either PATCH or PUT operations for updating the profile picture.
Graph API endpoint: https://graph.microsoft.com

PUT https://graph.microsoft.com/me/photo/$value

PUT https://graph.microsoft.com/users/{user id | user Principalname}/photo/$value

PUT https://graph.microsoft.com/groups/{id of the office 365 group}/photo/$value

PUT https://graph.microsoft.com/contacts/{ id }/photo/$value

PUT https://graph.microsoft.com/users/{user id | userpricipalname}/contacts/{id}/photo/$value

PUT https://graph.microsoft.com/users/{user id | userpricipalname}/contactfolders/{contactFolderId/contacts/{id}/photo/$value

PATCH https://graph.microsoft.com/me/photo/$value

PATCH https://graph.microsoft.com/users/{user id | user Principalname}/photo/$value

PATCH https://graph.microsoft.com/groups/{id of the office 365 group}/photo/$value

PATCH https://graph.microsoft.com/contacts/{ id }/photo/$value

PATCH https://graph.microsoft.com/users/{user id | userpricipalname}/contacts/{id}/photo/$value

PATCH https://graph.microsoft.com/users/{user id | userpricipalname}/contactfolders/{contactFolderId/contacts/{id}/photo/$value


Retrieve user photo user.readwrite, user.readwriteall

Retrieve the group photo group.readwrite

Retrieve the contact photo contact.readwrite

So now, I am going to create a function named "requestToken()" to fetch the access token passed into the AJAX request header to authorize the API request.


 function requestToken() {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie    
            "method": "POST",  
            "headers": {  
                "content-type": "application/x-www-form-urlencoded"  
 	           "data": {  
 	               "grant_type": "client_credentials",  
 	               "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id    
 	               "client_secret": "DxSF1K+JKl7LWJK8+3Ibg4il5JM4qUvdwOtShsYNvEA=", //Provide your secret    
 	               "scope ": "https://graph.microsoft.com/.default"  
 	           success: function(response) {  
 	               token = response.access_token;  

In the console window, you are able to see the success response that looks like below.


In the next step, we are going to create a function "uploadPhoto()" to upload a photo to Office 365.

 	<div class="upload-btn-wrapper">  
 	  <button class="btn" type="button" onclick=" UploadPhoto();">Upload a file</button>  
 	  <input type="file" name="myfile" id="testFile" />  


 function uploadPhoto(){  
     var file = document.getElementById('testFile').files[0];  //FETCH THE FILE FROM FILE UPLOAD CONTROL
             method: 'PATCH',   
             url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/photo/$value",  
             data:  file,                       //pass DATA from the variable file
             processData: false,   
             headers: {  
 	                'Authorization': 'Bearer ' + token,          // THE ACCESS TOKEN HERE ALREADY RECEIVED WHEN REQUEST TOKEN FUNCION CALLS
 	                 'Content-Type': 'image/jpeg'                // SET THE CONTENT TYPES AS IMAGE/JPEG
 	        }).success(function (response) {  
 	            alert("Photo uploaded successfully");  
 	        //  retriveuserPhoto();  
 	        }).error(function (error) {});  

Now, add a Content Editor Web Part and render the HTML.



After successfully picking the image file, click "Upload a file" button.


Now, I am going to create a function "retriveuserPhoto()" to retrieve the uploaded photo from Office 365.

GET https://graph.microsoft.com/users/{userid | userprincipalname} /size/photo/$value

A successful request returns the binary data of the image.


  1. <img id="office365" src=''> 


 function retriveuserPhoto(){  
             method: 'GET',  
             url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/48x48/photo/$value",  //url with size of the photo
             headers: {  
                 'Authorization': 'Bearer ' + token,   // pass the access token here
 	        }).success(function (image) {  
 	             var blob = new Blob(  
 	              {type : 'image/jpeg'}  Convert the response into blob with content type image/jpeg                      
 	var url = window.URL || window.webkitURL;  
 	var blobUrl = url.createObjectURL(blob);  // Use the javascript object to construct a blob image url
 	$('#office365').attr("src", blobUrl);  //bind the BLOB url into image tag
 	        }).error(function (error) {});  



Now, you are able to update and get photos from Office 365 using Microsoft Graph API.

Happy SharePointing!