xpage csjs code not sending inline images and attachment in proper format email thru gmail api

Question

My xpage has following fields

1. Xpage with evo:InputRichtext ckeditor from this snippet:
2. I'm using gmail api to send email.
3. I'm adding formatted text, inline images and files in Ckeditor
4. Using button to get values from To, Subject and Ckeditor component using csjs.
5. Message sent thru gmail server but not receiving wysiwyg format. The image is not displayed and only file name appears.

I know it is cross platform encoding issue and I don't know what is that.

Here is button code:

var to = XSP.getElementById("#{id:To}").value;
var subject = XSP.getElementById("#{id:Subject}").value;
var richCKEditor = CKEDITOR.instances["#{id:inputRichText1}"]; 
var dt=richCKEditor.getData();
var content = richCKEditor.dataProcessor.toHtml(dt);

 console.log(to);
 console.log(subject);
 console.log(content);

var email ="From: 'm' <"+to+">\r\n"+
"To:  "+ to +"\r\n"+
"Subject: "+subject+"\r\n"+"\r\n"+
"MIME-Version: 1.0\n"+
//"Content-Type:  text/html; charset=\"UTF-8\"\n" +
"Content-Type:  multipart/mixed; \n" +
content;
console.log(email);
auth();
send(email);

Here gmail api function I'm using with existing authentication from gmail api site

function send(email) {
console.log(email);
sendMessage(email, function (response) {
                //console.log("Handed to Gmail API for sending");
                 {console.log(response)}
            });
            alert("Message sent");
        }

 function sendMessage(email, callback) {
            //auth();
            gapi.client.load('gmail', 'v1',function(){
                var base64EncodedEmail = btoa("MIME-Version: 1.0\n"+
                        "Content-Type:  text/html; charset=\"UTF-8\"\n" +
                    //  "Content-Type:  multipart/mixed; \n" +

                        //"Content-length: 5000\n" +
                        //"Content-Transfer-Encoding: message/rfc822\n"+
                        email).replace(/\//g,'_').replace(/\+/g,'-');
                 // alert("Message sending\n" + base64EncodedEmail.toString());
                console.log(base64EncodedEmail);
                  var request = gapi.client.gmail.users.messages.send({
                    'userId': 'me',
                    'resource': {
                      'raw': base64EncodedEmail
                    }
                  });
                  request.execute(callback);
            });


        }

Answer 1

When you send a Mime email with attachments and inline images, it is contained of many parts.

• The HTML will be the text/html part.
• The images will be something like a image/jpeg or image/png part
• The attachments will be something like a application/pdf part

They are all tied together in a multi-part structure.

The inline images, should be located as siblings to a parent 'multipart/related' mime part. If there are attachments, they are located under a 'multipart/mixed' parent.

If you were to send a mime email with attachments and inlines it would be in the following structure

• multipart/mixed
  • multipart/related
    • text/html
    • image/jpeg
    • image/jpeg
  • application/pdf

When you call the getData function of the CKEditor, you are only getting the text/html mime part. Within the html is some tags that are referencing an image somewhere. And it will contain absolutely no information about the attachments.

The image can be referenced 3 different ways

1. As a href to some location of the internet. ie. href="http://someserver.com/someimage.gif" If you are sending emails you probably do not want this unless you are happy with the person receiving the email to have to click 'show images in this email'. And also that you can be sure the image is not a link to some intranet server that is not accessible to the email receiver.

2. As a Data URI. https://en.wikipedia.org/wiki/Data_URI_scheme This is where all the image data is actually located in the html within the img src tag. The CKEditor will actually allow you (in firefox) to paste in an image in this format, however If you are sending emails you do not want to allow this format either, as it is not supported by every email client. Gmail will not show images in this format.

3. As an embedded image. This is where the image is stored as a sibling to the text/html in the mime structure as I have described above. The image will have the content-disposition of 'inline' and it will have a Content-ID If you are sending emails this is the format that you really want as you can be sure the receiver will be able to see them.

If you must do everything client side, then you will need to find some way to get the embeddedimage and attachment data from the server to include in your call. Otherwise you are better off trying to do this server-side but in any case you will need to get the server involved somehow.