Image handling in Richtext/SMTP queries

App Building
1

Hi all,

I have an SMTP resource that targets an MS Outlook mailbox. This resource is used to send outgoing email messages originating within my Retool app. I wish to create the body of the email via a richTextEditor component. I have constructed my email body and inserted an image using the image insertion tool of the Richtext component. This is then referenced in the SMTP query using the resource mentioned above.

When the email is sent the image does not render correctly on receipt, but is displayed as raw data commencing with this text "<img src="data:image/png;base64,". If the received message is pasted into the body field of the SMTP query and Previewed, the message and image are correctly formatted just as they appeared in the Richtext editor.

My goal is to send emails in which images are correctly formatted as images on all email clients.

Any and all assistance will be gratefully received...

2

So, here's where I'm up to.

The rich text component converts images to the Base64 data format which Outlook does not like. Having surfed around, it seems that Outlook could be persuaded to display the image if only the data could be formatted as a Blob (this is at least 50% my conjecture, but it seemed like a promising line of enquiry).

Having spent a little while in the world of blobiness I discover that the js command 'new Blob' is acceptable to Retool, but produces an empty blob (a 'vacuole' perhaps). No doubt for this reason, 'createObjectURL' is a 'blob too far' and is undefined.

I would seem to be at the end of my quest, unless some other brave soul has found an alternative solution. To summarise my end-state, it seems that I can connect to an Outlook mailbox and induce it to send emails but that I cannot embed images within these emails.

Now I'm off to check the attachment functionality ... :dragon: :person_fencing:

3

OK. For the benefit of others, here's my solution.

I have set up my templates with 'merge tags'. These can be whatever you like so long as they can be reliably recognised and replaced by a js transformer. I am using ~tagname~ where the tag name identifies text to be merged into the html. So far so good and I now have a mail merge function going on. As far as images are concerned, they need to be hosted somewhere - a webpage works fine - and then the url pointing at the image can be merged into the html of the message by the 'mail merge transformer'. Et voila, images in your email!

Here's the transformer (notice that the image is clickable too):

return {
body: {{ table11.selectedRow ? table11.selectedRow.body : "" }}
.replace(/~companyname~/g, {{ textInput42.value }})
.replace(/~contactname~/g, {{ textInput36.value }})
.replace(/~agentfullname~/g, {{ select8.value }})
.replace(/~agentemail~/g, {{ select6.value }})
.replace(/~logobloc~/g, 'Logo)
};

4

A couple of notes:

  1. Here's the ~logobloc~ replace statement made visible:

.replace(/~logobloc~/g, '<a href="http://www.???.co.uk/" class="link" *
<img src="https://drive.google.com/uc?id=???" alt="Logo" class="logo" *</a *')

Replace the three instances of " *" with > to 'activate'.

  1. All of my templates are stored in a data table that is accessed via {{table11.selectedRow.body}}. You can put yours wherever you like!

  2. The performance of this system relies on the 'image host' to serve the images in a timely fashion. Beware a potential bottleneck if you're using GoogleDrive and many of your emails are being opened simultaneously or if your images are large.