Skip to content

Instantly share code, notes, and snippets.

@olafwrieden

olafwrieden/function.json

Last active April 25, 2022 05:23
Show Gist options
  • Save olafwrieden/26d3bc87391adcd5fc10f1a1c2334125 to your computer and use it in GitHub Desktop.
Save olafwrieden/26d3bc87391adcd5fc10f1a1c2334125 to your computer and use it in GitHub Desktop.
Download ZIP
Azure Function SendGrid Binding - HTML Email
Raw
function.json
{
"bindings": [
{
"name": "file",
"type": "blobTrigger",
"direction": "in",
"path": "files/{name}",
"connection": "AzureWebJobsStorage"
},
{
"name": "$return",
"type": "sendGrid",
"direction": "out",
"apiKey": "SendGrid_API_Key",
"from": "me@example.com"
}
],
"scriptFile": "../dist/EmailOnNewBlob/index.js"
}
Raw
index.ts
import { AzureFunction, Context } from "@azure/functions";
const blobTrigger: AzureFunction = async function (context: Context, file: any): Promise<any> {
// Log Filename to Console
const filename = context.bindingData.name;
context.log(`New file detected: ${filename}`);
// Get Content Type (eg. 'image/jpeg' or 'image/png')
const filetype = context.bindingData.properties.contentType;
context.log(`The file has the ${filetype} file type`);
// Return SendGrid Data to Output Binding
return {
personalizations: [
{
dynamic_template_data: {
name: "Olaf Wrieden",
filename: filename,
url: `${context.bindingData.uri}?sp=r&st=2022-04-25T...[SAS_TOKEN]`,
},
to: [{ email: "me@example.com" }],
},
],
from: { email: "me@example.com" },
subject: "New Upload!",
template_id: "d-46f964cf8e374c97bee2d275f3c39471",
attachments: [
{
content: file.toString("base64"),
filename: filename,
type: filetype,
disposition: "attachment",
contentId: filename,
},
],
};
};
export default blobTrigger;
Raw
template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {width: 600px;margin: 0 auto;}
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body, p, div {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
}
body {
color: #000000;
}
body a {
color: #000000;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table.wrapper {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img.max-width {
max-width: 100% !important;
}
.column.of-2 {
width: 50%;
}
.column.of-3 {
width: 33.333%;
}
.column.of-4 {
width: 25%;
}
ul ul ul ul {
list-style-type: disc !important;
}
ol ol {
list-style-type: lower-roman !important;
}
ol ol ol {
list-style-type: lower-latin !important;
}
ol ol ol ol {
list-style-type: decimal !important;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table.wrapper-mobile {
width: 100% !important;
table-layout: fixed;
}
img.max-width {
height: auto !important;
max-width: 100% !important;
}
a.bulletproof-button {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.columns {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.social-icon-column {
display: inline-block !important;
}
}
</style>
<style>
@media screen and (max-width:480px) {
table\0 {
width: 480px !important;
}
}
</style>
<!--user entered Head Start--><!--End Head user entered-->
</head>
<body>
<center class="wrapper" data-link-color="#000000" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#e8fcff;">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#e8fcff">
<tr>
<td valign="top" bgcolor="#e8fcff" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if mso]>
<center>
<table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">
<tr>
<td role="modules-container" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" bgcolor="#ffffff" width="100%" align="left"><table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
<tr>
<td role="module-content">
<p></p>
</td>
</tr>
</table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="7bf3c8d1-3ee5-43af-91f2-1ef67b1f878c">
<tbody>
<tr>
<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">
<img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/b54e937a5adaa0bc/9373fad8-0050-4fa3-9a2b-b75924c6893e/1280x640.png">
</td>
</tr>
</tbody>
</table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="14e285f2-2d7c-47db-9d9d-f271535c1fa2">
<tbody>
<tr>
<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">
<img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="">
</td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="b35b8ff4-8b3c-4b35-9ed3-f9f25170affc" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:40px 20px 18px 20px; line-height:28px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: center"><span style="color: #0088ad; font-size: 28px; font-family: &quot;lucida sans unicode&quot;, &quot;lucida grande&quot;, sans-serif"><strong>NEW FILE NOTIFICATION</strong></span></div><div></div></div></td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="f758d404-9b02-4e87-937f-cccaa46787a6" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:18px 60px 18px 60px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: center"><span style="color: #273159; font-size: 16px; font-family: &quot;lucida sans unicode&quot;, &quot;lucida grande&quot;, sans-serif">Hey {{name}}!</span></div>
<div style="font-family: inherit; text-align: center"><br></div>
<div style="font-family: inherit; text-align: center"><span style="color: #273159; font-size: 16px; font-family: &quot;lucida sans unicode&quot;, &quot;lucida grande&quot;, sans-serif">A new file with the name <i>{{filename}}</i> just landed in your container.</span></div><div></div></div></td>
</tr>
</tbody>
</table><table border="0" cellpadding="0" cellspacing="0" class="module" data-role="module-button" data-type="button" role="module" style="table-layout:fixed;" width="100%" data-muid="3757586a-ce69-48ba-bd9a-0c0b7937a616">
<tbody>
<tr>
<td align="center" bgcolor="" class="outer-td" style="padding:0px 0px 40px 0px;">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile" style="text-align:center;">
<tbody>
<tr>
<td align="center" bgcolor="#ffea05" class="inner-td" style="border-radius:6px; font-size:16px; text-align:center; background-color:inherit;">
<a href={{url}} style="background-color:#ffea05; border:1px solid #ffea05; border-color:#ffea05; border-radius:30px; border-width:1px; color:#000000; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:12px 40px 12px 40px; text-align:center; text-decoration:none; border-style:solid; font-family:lucida sans unicode,lucida grande,sans-serif;" target="_blank">Open File</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="e0ad1356-3f19-4c37-ae2e-99dd8cd572ce" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:18px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: center">This is an automated email built with <span style="color: #ff0000">♥</span> by <a href="https://linkedin.com/in/olafwrieden"><u>Olaf Wrieden</u></a></div><div></div></div></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
</center>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment