This content originally appeared on Level Up Coding - Medium and was authored by Olaf Wrieden
The 5-Step Guide to Sending Blob Attachments with SendGrid (using Dynamic Email Templates)
At the heart of every notification system lays a great email. This article demonstrates how you can send beautifully templated emails with SendGrid via a blob-triggered — serverless function, and attach the blob to the email.
Introduction
Imagine you are implementing an event-driven architecture for your next project. Blob triggers are one of many event types your solution may “listen out for” before running your business logic in response to the event.
This story shows how easy it is for you to replicate this form of email automation with the click of a few buttons.
🛠 What You’ll Need
- An Azure Function App (serverless function offering)
- A Storage Account (cloud storage for our files)
- A SendGrid instance (existing instance or SaaS offering via Azure)
To save time, I have provided an 1-click deployment script with a detailed breakdown of what happens. More on this in the next section…
🖼 What You’ll Build
Step 1: Deployment
Let’s begin by creating our 3 resources:
- A Storage Account with a container called “files” which will act as a trigger for our emailing function.
- A Function App with a SendGrid output binding that will attach and send the uploaded file to one or more email addresses. During deployment, I chose the Node.js language option (but others also support SendGrid).
- A SendGrid instance (or use your own) for sending the email.
✅ Checkpoint: This is what your resource group should look like afterwards. Note, the App Service Plan was automatically created during the deployment of the Function App, therefore no additional deployment steps are required.
Step 2: Creating an Email Template
In SendGrid, under the Email API section, select Dynamic Template and give it a name.
Now you need to copy the Template ID which will be referenced in your function later. Proceed by clicking Add Version.
If you have a template already, choose it, otherwise click Blank Template and Code Editor, then copy my HTML snippet from the bottom of this article.
Upon careful inspection of the HTML template, you might notice {{name}} {{filename}} and {{url}} placeholders. The Test Data tab can help you visualise what your email will look like once these variables are supplied.
✅ Checkpoint: So far we have deployed our resources, created an email template in SendGrid and are now ready to send emails programmatically.
Step 3: Optional — Generate a SAS Token
If an email attachment isn’t enough and you wish to access your file directly, you can create a Shared Access Signature (time-bound) and append it to your URL.
To generate a SAS token, go to the Storage Account > files container > Shared access tokens to generate a new SAS token. You want to copy the Blob SAS token for later.
Step 4: The Function Logic
This step is straightforward. Imagine an input, in our case a blob-trigger, some logic in the middle (we’ll get to this in a minute), and an output (or email).
Using Node.js (this works identically for Python or other languages), we can access the blob context and blob itself to perform additional checks such as whether the file has a certain extension and only email us if it is an image.
Looking at this in more detail, we see that the real work is really in the second half of this function where the SendGrid-compatible output is defined.
✨ Takeaway: SendGrid Bindings in Azure Functions support the same specs as the SendGrid API would if we called it manually or via the SDK.
📄 Sending Attachments
Because we want to make our file accessible to the recipient (or recipients) of the email, we chose to attach it to the email via the attachments: [] option.
A better way would be to generate a Shared Access Signature (SAS token) to our file (or container), and link it in the email. Should we wish to time-bound the access to the file, or revoke it all together, it is easily done.
If you completed Step 3, you can append this SAS token on line 19, and whenever somebody clicks on the Open File button, they are taken to the blob with a read-only permission.
If the attachment is enough, a recipient can simply open it right away, because we attached it to the email.
Step 5: The SendGrind Binding
With the “logic in the middle” done, we can finally take a closer look at our accompanying function.json file, where inputs and outputs to and from the function are specified.
- Input: The input to this function is a Blob Trigger, listening for a file in the files container. Easy!
- Output: The output from the function is a SendGrid API call which takes in the return data from the function and fires it off to SendGrid.
✨ Takeaway: Advanced details on configuring SendGrid bindings, including in languages other than JavaScript can be found here: SendGrid Bindings Documentation
A word on API Keys & Environment Variables
You may notice that the above bindings contain both a connection string (for Storage Account) and API key for SendGrid. Both should be created as an Application Setting in the Configuration tab of the Function App.
✅ Checkpoint: We now have a working Azure Function that sends an email on every file that is uploaded to the files container — attaching the file.
Voilà! — The Result
Thank you 👏🏼
Do you enjoy content like this? Drop me a comment, follow for similar articles or connect with me on LinkedIn to stay in touch.
HTML Template Code
The 5-Step Guide to Sending Blob Attachments with SendGrid + Azure (using Dynamic Email Templates) was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Olaf Wrieden
Olaf Wrieden | Sciencx (2022-04-26T13:27:57+00:00) The 5-Step Guide to Sending Blob Attachments with SendGrid + Azure (using Dynamic Email Templates). Retrieved from https://www.scien.cx/2022/04/26/the-5-step-guide-to-sending-blob-attachments-with-sendgrid-azure-using-dynamic-email-templates/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.