Cant update profile picture using Microsoft Graph API and Angular 4

Question

I need to update the profile picture by uploading it from local and then update it using the MICROSOFT GRAPH API, I tried the below code

<input type="file" accept=".jpg, .jpeg, .png"(change)="uploadImage($event.target.files)">

uploadImage(files) {
    let file = files[0];
    if (file) {
        this.getBase64(file).then(data => {

            const headers = new Headers({
                'content-Type': 'image/jpeg',
                'Authorization': 'Bearer ' + token
            });
            const options = new RequestOptions({ headers: headers });

            this._http.patch('https://graph.microsoft.com/v1.0/me/photo/$value', data, options)
                .subscribe(res => {});
        });
    } 
}

getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }

I get the following error

{
  "error": {
    "code": "ErrorInternalServerError",
    "message": "An internal server error occurred. The operation failed., The value is set to empty\r\nParameter name: smtpAddress",
    "innerError": {
      "request-id": "2532c086-a844-4d80-87e8-ad96545396c4",
      "date": "2018-03-15T11:38:33"
    }
  }
}

It is based on the doc https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/profilephoto_update

How do I update the profile using Microsoft Graph API from my Angular App, how the Binary Data for Image can be obtained. Thanks in advance

Marc LaFleur Marc LaFleur · Accepted Answer · 2018-03-15T17:59:07

The reason you're getting an error regarding the smtpAddress being "set to empty" is that this user doesn't have an Exchange Online mailbox. You can only upload profile photos to users with a valid Exchange Online mailbox. Users with an on-prem mailbox or Outlook.com are not supported.

From the documentation:

A profile photo of a user, group or an Outlook contact accessed from Exchange Online. It's binary data not encoded in base-64.

Also, you need to send the raw binary file, not a base64 encoded representation of the image.

Cant update profile picture using Microsoft Graph API and Angular 4

1 Answers