'Add pics from Google Drive to html email body
Is it possible to add a png / gif file from the google disk to the email htmlbody generated by the google script? I have the code as below, the document is publicly shared, Drive API and Gmail API are enabled. Is this a problem sharing the file from the disk or an error in my code, please help
function sendaEmail(){
var templ = HtmlService
.createTemplateFromFile('template');
var message = templ.evaluate().getContent();
MailApp.sendEmail({
to: '[email protected]',
subject: "subject",
htmlBody: message
});
}
<!DOCTYPE XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src= <?= DriveApp.getFileById("1tKxUgeX_B27vnpNNpKy1jF_0zOxrBhmL").getAs("image/gif");?> alt="Creating Email" width="300" height="230" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Solution 1:[1]
yuri's answer is correct but I found a much simpler way. First you change the files sharing settings to 'Anyone with the link' then pull out the file ID and paste here: https://drive.google.com/uc?id=FILEID. And place the link to html code.
Solution 2:[2]
First, you should be calling getUrl(), instead of getAs(), getAs() method returns a binary object not an Url, as you should be adding an URL over the src attribute of the HTML tags.
But, anyway, if you try it, it won't work specifically with the Google Drive links, because the DriveApp Urls are not canonical ones and are not intended to be attached as such on gmail services.
So, how we attach inline image on an email from drive?
The simplest way to do it is as follow:
function sendaEmail(){
var templ = HtmlService
.createTemplateFromFile('template');
var message = templ.evaluate().getContent();
var imageId = DriveApp.getFileById("YOURIMAGEID");
var imageBlob = imageId.getBlob();
MailApp.sendEmail('[email protected]', "Subject", "Hi", {htmlBody: message, inlineImages: {image: imageBlob}});
}
So, what you're doing here is attaching the image object directly, JS will handle this, how? First we have to modify the HTML template:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src= "cid:image" alt="Creating Email" width="300" height="230" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this will do, there are other ways but this is fairly simple.
Here you'll find some info about the several ways for embedding images on emails: https://blog.mailtrap.io/embedding-images-in-html-email-have-the-rules-changed/
If you need to add more images, proceed as follow:
var imageId2 = DriveApp.getFileById("15FhCLXu6bQE70iNRCXVAve0TyyoeoUTA");
var imageBlob2 = imageId2.getBlob();
MailApp.sendEmail('[email protected]', "Subject", "Hi", {htmlBody: message, inlineImages: {image: imageBlob, image2: imageBlob2}});
And now add another tag on the html
<img src= "cid:image2" alt="Creating Email" style="display: block;" />
Solution 3:[3]
function sendImageWithEmail(imageName) {
var imageName=imageName||'default.png';
var imgFldrId='folderId';
var imgs=DriveApp.getFolderById(imgFldrId).getFilesByType(MimeType.PNG);
while(imgs.hasNext()) {
var ifile=imgs.next();
if(ifile.getName()==imageName) {
var blob=ifile.getBlob();
var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
break;
}
}
if(b64Url) {
GmailApp.sendEmail('[email protected]', 'An Image','' , {htmlBody:Utilities.formatString('<h1>The Image</h1><img src="%s" />',b64Url)});
}else{
SpreadsheetApp.getUi().alert('Houston. We have a problem');
}
}
This is the original message body:
<h1>The Image</h1><img src=3D"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASA=
BIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAQECAQEBAgICA=
gICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgICAgICAgICAgICAgICAgIC=
AgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQU=
BAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMU=
EGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTV=
FVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5=
usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQA=
AAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMo=
EIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZ=
GVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbH=
yMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8l/8Aggr/AMG+a/8=
ABRbTh+1B+1Lq/iHwZ+ynpGvtpfhbwr4an/svxd8b9T0a7Vdeij10gt4W8DQTRSWU1zbqdQu5nn=
FpJYrbxXNz/ch4I/4Ie/8ABILwJ4Z0jwppn7Av7P2uWuj2cNpHqnjbwqfHXie+8pFX7Tq/ifxZd=
3d7qd45G5pJp2yzHAAwB7r/AME9vhf4a+Dv7D/7KXw58HQSW/hvQPgP8NZdMhnO+aKHWvDGn660=
EswGbl45NTePzWO+QRBnO4mvta2twccDPrznv3A9vzFAH5xf8OZ/+CSh6f8ABO/9lLnp/wAWn8O=
E/iBb59aef+CMn/BJbt/wTw/ZSx7/AAm8Of8Axj0x+dfprBZ5GMdPqADk+/XP8vrV8abuA49M8Z=
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3D=3D" />
It displays at comcast.net but not on Gmail. I don't know why? Sorry
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | vipmaciej |
| Solution 2 | |
| Solution 3 |