Update Profile Photo

6min
Scenario
Update a user's profile photo in Microsoft Graph using the media-field component in a  to select the photo. A Jigx REST function is used in the execute-entity action to make the update.
Resource links: 
﻿Update profilePhoto Graph documentation 
﻿Graph explorer﻿
﻿Configuring OAuth for MS Graph﻿ 
Required OAuth scope (least to most privilege):
User.ReadWrite
User.ReadWrite.All
Update profile photo
﻿
﻿Examples and code snippets﻿
﻿
General
index.jigx
name: ms-graph-demonstrator
title: MS Graph Demonstrator
description: A sample solution that uses the Microsoft Graph API. You can deploy and use this solution without any additional configuration.
category: business
widgets:
  - size: 2x2 # choose size of the widget on the home hub
    jigId: view-user-jigx
 
onFocus: 
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_REST
          entities:
            - entity: user-profile
              function: get-user-profile
              functionParameters:
                accessToken: microsoft.OAuth
            - entity: profile-picture
              function: get-profile-picture
              functionParameters:
                accessToken: microsoft.OAuth 
                userId: [email protected]   
name: ms-graph-demonstrator
title: MS Graph Demonstrator
description: A sample solution that uses the Microsoft Graph API. You can deploy and use this solution without any additional configuration.
category: business
widgets:
  - size: 2x2 # choose size of the widget on the home hub
    jigId: view-user-jigx
 
onFocus: 
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_REST
          entities:
            - entity: user-profile
              function: get-user-profile
              functionParameters:
                accessToken: microsoft.OAuth
            - entity: profile-picture
              function: get-profile-picture
              functionParameters:
                accessToken: microsoft.OAuth 
                userId: =@ctx.user.email   
﻿
Functions
MS Graph User function in GitHub.
update-profile-picture.jigx
provider: DATA_PROVIDER_REST
method: PATCH
url: https://graph.microsoft.com/v1.0/me/photo/$value
useLocalCall: true
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: microsoft.OAuth # Use manage.jigx.com to define credentials for your solution
  Content-Type:
    location: header
    required: true
    type: string
    value: image/jpeg # set the content type of the body
  file:
    location: body
    required: true
    type: image
conversions:
  - property: file
    from: local-uri
    to: buffer

provider: DATA_PROVIDER_REST
method: PATCH
url: https://graph.microsoft.com/v1.0/me/photo/$value
useLocalCall: true
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: microsoft.OAuth # Use manage.jigx.com to define credentials for your solution
  Content-Type:
    location: header
    required: true
    type: string
    value: image/jpeg # set the content type of the body
  file:
    location: body
    required: true
    type: image
conversions:
  - property: file
    from: local-uri
    to: buffer
﻿
Jigs
MS Graph User  in GitHub.
update-profile-picture.jigx
title: Update Profile Picture
description: Update a user's Microsoft Graph profile photo
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://support.content.office.net/en-us/media/f1c4b693-4670-4e7a-8102-bbf1749e83fe.jpg

children:
  - type: component.form
    instanceId: pictureForm
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.media-field
          instanceId: profilePicture
          options:
            label: New Profile Picture
            mediaType: image
            isMultiple: false
            imageQuality: 80 # optimized photo size with minimal quality loss
            
actions:
  - children:
      - type: action.execute-entity
        options:
          title: Submit Photo
          provider: DATA_PROVIDER_REST
          entity: profile-picture
          function: update-profile-picture
          functionParameters:
            accessToken: microsoft.OAuth
            Content-Type: image/jpeg
            file: [email protected] 
          method: functionCall
          onSuccess: 
            type: action.go-back

title: Update Profile Picture
description: Update a user's Microsoft Graph profile photo
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://support.content.office.net/en-us/media/f1c4b693-4670-4e7a-8102-bbf1749e83fe.jpg

children:
  - type: component.form
    instanceId: pictureForm
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.media-field
          instanceId: profilePicture
          options:
            label: New Profile Picture
            mediaType: image
            isMultiple: false
            imageQuality: 80 # optimized photo size with minimal quality loss
            
actions:
  - children:
      - type: action.execute-entity
        options:
          title: Submit Photo
          provider: DATA_PROVIDER_REST
          entity: profile-picture
          function: update-profile-picture
          functionParameters:
            accessToken: microsoft.OAuth
            Content-Type: image/jpeg
            file: =@ctx.components.profilePicture.state.value 
          method: functionCall
          onSuccess: 
            type: action.go-back
﻿
See Also
﻿Get User Profile & Photo﻿﻿
﻿
Updated 05 Nov 2024
Did this page help you?
Get User Profile & Photo
Graph Calendar
Update Profile Photo

Scenario

﻿Examples and code snippets﻿

General

Functions

Jigs

See Also

Examples and code snippets
