Work with inline images

*** This page is deprecated. Please click here for the new version ***

When you retrieve a draft in Gmail, the inline images files can be found among the attachments but there's no link between those attachments and the email body.

If you want to create a new email based on an old one (like in a mail merge), this add some difficulties.

The issue

For example, here's an email body retrieved with .getBody()

jtykuykyu</div><div><br></div><div><img src="?view=att&th=1401f70d4881e07f&attid=0.1&disp=emb&realattid=ii_1401f6e9df3a4b1c&zw&atsh=1" alt="Inline image 3" width="200" height="82"><br><div><br></div><div><br></div></div></div>

And here is the list of attachments for the email (among which are our inline images):

[13-07-30 08:28:08:378 CEST] Screen Shot 2013-07-12 at 1.54.31 PM.png

[13-07-30 08:28:08:379 CEST] Screen Shot 2013-07-23 at 5.38.51 PM.png

[13-07-30 08:28:08:380 CEST] Screen Shot 2013-07-25 at 9.05.15 AM.png

[13-07-30 08:28:08:381 CEST] test2.png

As you can see, there's no link between the name of those images and the information available in the img tags, so there's no safe way to rebuild a correct email with only those information.

The solution

How to solve that ? We can use the method .getRawContent() to get the actual email and parse it to get the information we need. Specifically, this method give us a relationship between the name of an attachment and the 'realattid' available in the email body:

Content-Type: image/png; name="Screen Shot 2013-07-25 at 9.05.15 AM.png"

Content-Transfer-Encoding: base64

Content-ID: <ii_1401f6e9df3a4b1c>

X-Attachment-Id: ii_1401f6e9df3a4b1c

Code snippet

Here's a code snippet to:

- Retrieve the body & attachments of an email
- Get all the img tags inside the body and see which ones are linked to attachments in the email
- Get the 'realattid' of each image and use .getRawContent() to link this 'realattid' to the right attachment
- Replace the img tag to correctly link it to the right attachment
- Indicate that this attachment is no longer a simple attachment but an inline image

Once all that is done you have all the data you need to send a copy of this email with the correct inline images displayed.

//////////////////////////////////////////////////////////////////////////////

// Get inline images and make sure they stay as inline images

//////////////////////////////////////////////////////////////////////////////

var emailTemplate = selectedTemplate.getBody();

var rawContent = selectedTemplate.getRawContent();

var attachments = selectedTemplate.getAttachments();

var regMessageId = new RegExp(selectedTemplate.getId(), "g");

if (emailTemplate.match(regMessageId) != null) {

var inlineImages = {};

var nbrOfImg = emailTemplate.match(regMessageId).length;

var imgVars = emailTemplate.match(/<img[^>]+>/g);

var imgToReplace = [];

if(imgVars != null){

for (var i = 0; i < imgVars.length; i++) {

if (imgVars[i].search(regMessageId) != -1) {

var id = imgVars[i].match(/realattid=([^&]+)&/);

if (id != null) {

var temp = rawContent.split(id[1])[1];

temp = temp.substr(temp.lastIndexOf('Content-Type'));

var imgTitle = temp.match(/name="([^"]+)"/);

if (imgTitle != null) imgToReplace.push([imgTitle[1], imgVars[i], id[1]]);

}

for (var i = 0; i < imgToReplace.length; i++) {

for (var j = 0; j < attachments.length; j++) {

if(attachments[j].getName() == imgToReplace[i][0]) {

inlineImages[imgToReplace[i][2]] = attachments[j].copyBlob();

attachments.splice(j, 1);

var newImg = imgToReplace[i][1].replace(/src="[^\"]+\"/, "src=\"cid:" + imgToReplace[i][2] + "\"");

emailTemplate = emailTemplate.replace(imgToReplace[i][1], newImg);

}

//////////////////////////////////////////////////////////////////////////////

var message = {

htmlBody: emailTemplate,

subject: selectedTemplate.getSubject(),

attachments: attachments,

inlineImages: inlineImages

}