Post
Ask Question

How To Attach A File While Sending Email Using Graph API In SharePoint Framework (SPFx)

Introduction

 
Before we get started please take a look at my previous article about how to send Email using Graph API in SharePoint Framework (SPFx) which will help you to be in sync about the topics we are going to see here.
 
We may get two types of requirement as below,
  1. Send one document in mail as an attachment using Graph API
  2. Send an image in the mail body content using Graph API.
Let’s see how to meet both of these requirements.
 

Sending document in email as an attachment using Graph API

 
We need a base64 format of your file to send it as an attachment in the email of Graph API.
 
Use the below code snippet to generate email attachment object, 
  1. {  
  2.   "@odata.type": "#microsoft.graph.fileAttachment",  
  3.   "name": "NameOfFile",  
  4.   "contentBytes": "contentBase64"  
  5. }  
Generate an array of objects and add it in the email post object under attachments section.
 

Sending image in email as an inline body content using Graph API

 
This can also be achieved with the same attachment object like we do above, but since it goes inline, we need to add two additional parameters as below,
 
contentId – Id of the image content that will be replaced in the mail body
 
isInline – A Boolean flag denoting that this specific attachment should go as an inline body content.
 
Apart from the above parameter changes we need to add the inline attachment content information as a html markup in our mail body with the content id that we use in the attachment object as mentioned above. Below is a sample markup to add an image content in the mail body, 
  1. <img src='cid:id_team_pic' alt='Team Picture' />  
The source parameter in the image tag with cid is the key relation between our body content and the attachment.
 
Below is a sample code snippet with both the attachment and inline contents in a single mail object, 
  1. let emailPostBody: any = {    
  2.         “message”: {    
  3.           “subject”: “Mail Subject”,    
  4.           “body”: {    
  5.             “contentType”: “HTML”,    
  6.             “content”: “<p>Hi, this is my team’s picture</p>    
  7.                         <img src='cid:id_team_pic' alt='Team Picture' />”    
  8.           },    
  9.           “toRecipients”: [    
  10.             {    
  11.               “emailAddress”: {    
  12.                 “address”: “[email protected]”    
  13.               }    
  14.             }    
  15.           ],    
  16.           “ccRecipients”: [    
  17.             {    
  18.               “emailAddress”: {    
  19.                 “address”: “[email protected]”    
  20.               }    
  21.             }    
  22.           ],    
  23.        “attachments”:[    
  24.             {    
  25.                "@odata.type": "#microsoft.graph.fileAttachment",    
  26.                "name": "NameOfFile1",    
  27.                "contentBytes": "content1Base64"    
  28.             },    
  29.             {    
  30.                "@odata.type": "#microsoft.graph.fileAttachment",    
  31.                "name": "NameOfFile2",    
  32.                "contentBytes": "content2Base64"    
  33.            },    
  34.            {    
  35.                "@odata.type": "#microsoft.graph.fileAttachment",    
  36.                "name": "NameOfFile3InlineContent",    
  37.                "contentBytes": "content2Base64",    
  38.                "contentId": "id_team_pic",    
  39.                "isInline": true    
  40.            }    
  41.          ]    
  42.         }    
  43.       };     

Conclusion

 
I hope this article helps you to get an understanding about how to send a file as an attachment or in line body content in email using Graph API in SharePoint Framework (SPFx). If you have any questions/issues about this article, please let me know in the comments.


Similar Articles