Inline Attachments + Transactional Templates = broken email

[thexeos]

Use case

Sending a transactional email (saved as Dynamic Template in SendGrid) with inlined images (to avoid remote images getting blocked by default on virtually 100% of modern email clients), such as header design, product images, logo in the footer.

Issue

When passing attachments and templateId in one call, the structure of the generated email is spec non-conforming and results in broken email with inline images showing as separate attachments.

sgMail.send({
  to: '[email protected]',
  from: '[email protected]',
  subject: 'Hello world',
  text: 'Hello plain world!',
  html: '<p>Hello HTML world! <img src="cid:img2" /></p>',
  templateId: 'd-f43daeeaef504760851f727007e0b5d0',
  dynamic_template_data: {
    subject: 'Testing Templates & Stuff',
    name: 'Some "Testing" One',
    city: '<b>Denver<b>',
  },
  attachments: [
    {
      content: textBuffered.toString('base64'),
      filename: 'img1.jpg',
      type: 'image/jpeg',
      disposition: 'inline',
      content_id: 'img1',
    },
    {
      content: textBuffered.toString('base64'),
      filename: 'img2.jpg',
      type: 'image/jpeg',
      disposition: 'inline',
      content_id: 'img2',
    },
  ],
})

Expected structure

multipart/alternative
├── text/plain
└── multipart/related
    ├── text/html
    ├── image/jpeg (inline image 1)
    └── image/jpeg (inline image 2)

Actual structure

multipart/related
└── multipart/alternative
    ├── text/plain
    └── text/html
├── image/jpeg (inline image 1)
└── image/jpeg (inline image 2)

Known workarounds

• Storing email HTML/Text in your application codebase and passing them together with attachments to API for every email
• Doing the same as above, plus formatting the email for SMTP delivery and using SendGrid SMTP to send your email
• Sending emails from your own MTA

Additional comments

Since Transactional Templates don't support inline image attachments (for some reason) it's already inconvenient enough for developers that inline images must be passed via an API parameters. Now with this issue, Transactional Templates completely lose value and it puts developers one step away from constructing their own email and using "pure MTA" service instead.