Sending 2 page HTML email with SendGrid

[Yurii Orishchuk]

Hi Bruce,

The solution above works with 'text' type of file. You have binary type with base64 encoding.

For this case - you should use following approach:

1. Add new JS asset.

2. Populate it with following JS code:
   Details: http://prntscr.com/5f530x/direct

   precode

   function b64toBlob(b64Data, contentType, sliceSize) {
   contentType = contentType '';
   sliceSize = sliceSize 512;

   var byteCharacters = atob(b64Data);
   var byteArrays = [];

   for (var offset = 0; offset < byteCharacters&#46;length; offset += sliceSize) {
   var slice = byteCharacters&#46;slice(offset, offset + sliceSize);

   Code: Select all

    var byteNumbers = new Array(slice.length); 
    for (var i = 0; i < slice&#46;length; i++) { 
        byteNumbers[i] = slice&#46;charCodeAt(i); 
    } 
   
    var byteArray = new Uint8Array(byteNumbers); 
   
    byteArrays&#46;push(byteArray); 

}

Code: Select all

 var blob = new Blob(byteArrays, {type: contentType}); 
 return blob; 

}

/code/pre

1. Replace following JS code(from implementation above):

   pre

   &#47;&#47;Here you can specify needed fileContent&#46;
   var fileContent = 'Hi';
   &#47;&#47;where "testFileName&#46;txt" is your attach file name&#46;
   var fileName = 'ZZZ&#46;txt';
   var blob = new Blob([fileContent], { type: "text/xml"});

   /pre

   with below one:

   pre

   &#47;&#47;Here you can use your base64 content&#46; Note: there is no "data:image/jpeg;base64," part&#46;
   var base64Content = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4&#47;&#47;8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
   var fileBlob = b64toBlob(base64Content, "image/png");

   /pre

   So in this part of code you will create blob from base64 binary. Note, you should use base64 without "data:image/jpeg;base64," also you should pass file type to second line of the code.

   Regards.

[Bruce Stuart]

Yurii,

Thanks. This will be invaluable in sending my images (not sure I could have ever done this without the snippet you provided so thanks much)!!

Three questions (I started with only 2...) :

1. I believe I understand that the base64Content - should have the 'data:image/jpeg;base64,' stripped from it - correct ? That's the header information that needs to be removed - before attaching it to the email...??

2. when you say "you should pass file type to second line of the code - you mean this line :

   var fileBlob = b64toBlob(base64Content, "image/png");

   always comes after declaring what's in the base64Content ? - if I have multiple attachments (from 1-3 ) - I'm looping through this code for as many attachments as I have.

3. IF i need to do this in server code to keep the transaction from timing out (i'm not sure if I have to but - just in case ... asking in advance) - Can I read my DB columns that have my images into memory vars in the server code (instead of to local storage - which is what I'm doing on the client side). ....and then process the image content exactly as described above??

[Bruce Stuart]

Update:

Amazingly - I got this to work on my client side process !!! Yurii - thank you.

To anyone wishing to send emails from their client - at least one tip to share that's not documented here:

If you want to read the attachments to a message - and there happen to be more than 1 of them in your files collection - or if you have a separate table where you are storing attachments - and they number more than 1 - if you want to read all of them - and then attach them to the same message ---- read them into a memory variable array (not to localStorage) ... since localStorage is slower - your query will timeout - and you'll end up scratching your head on what could possibly have gone wrong...

Follow on question - I need to be able to perform this same functionality in server code. The function below - atob is not available on the server side. Do you all happen to have a good server side replacement ???

In this code:

function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType '';
sliceSize = sliceSize 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

[Evgene Karachevtsev]

Bruce,

Please read this link http://stackoverflow.com/questions/24...
It looks like answer to your question.
Please let us know, does it help.