Upload And Set Office 365 Profile Image 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.

• Fetch Access Token using jQuery AJAX
• Getting current user properties from GRAPH API using jQuery AJAX
• Send an email from SharePoint using Microsoft Graph API

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

 

Permissions

 

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.

 

Code

function requestToken() {

       $.ajax({
           "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) {
               console.log(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.

HTML

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

REQUEST

function uploadPhoto(){
    var file = document.getElementById('testFile').files[0];  //FETCH THE FILE FROM FILE UPLOAD CONTROL

            $.ajax({
            method: 'PATCH',
            url: "https://graph.microsoft.com/v1.0/users/[email protected]/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.

 

 HTML

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

Code

function retriveuserPhoto(){

            $.ajax({
            method: 'GET',

            url: "https://graph.microsoft.com/v1.0/users/[email protected]/48x48/photo/$value",  //url with size of the photo

            headers: {
                'Authorization': 'Bearer ' + token,   // pass the access token here

            },
        }).success(function (image) {
            console.log(image);
             var blob = new Blob(

              [image],

              {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) {});

      }

Output

 

 

 

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

 

Happy SharePointing!