Sending email with plain text, attachments and html using gmail api in reactjs

Question

I am currently trying to send emails which consist of 3 components: plain text, attachments and html, using gmail api in reactjs. Using my code to send the email now, I am only able to receive the attachments and html. Below is the code I used to send the email:

    for (i=0; i<email.attachment.length; i++) {
        let content = email.attachment[i].data.split(",")[1];
        let attachment = ['--012boundary01\r\n',
                         'Content-Type: ' + email.attachment[i].type + '\r\n',
                         'MIME-Version: 1.0\r\n',
                         'Content-Transfer-Encoding: base64\r\n',
                         'Content-Disposition: attachment; filename=' + email.attachment[i].name + '\r\n\r\n',
                          content, '\r\n\r\n'].join('');
        console.log(attachment)
        attachments += attachment
     };

     let mail = [
        'Content-Type: multipart/mixed; boundary="012boundary01"\r\n',
        'MIME-Version: 1.0\r\n',
        'To: ' + email.to + '\r\n',
        'Subject: ' + email.subject + '\r\n\r\n',
        '--012boundary01\r\n',
        'Content-Type: multipart/alternative; boundary=012boundary02\r\n\r\n',
        '--012boundary02\r\n',
        'Content-Type: text/plain; charset=UTF-8\r\n\r\n',
        email.body + '\r\n\r\n',
        '--012boundary02\r\n',
        'Content-Type: text/html; charset=UTF-8\r\n',
        'Content-Transfer-Encoding: quoted-printable\r\n\r\n',
        '<h1>HELLO</h1>\r\n\r\n',
        '--012boundary02--\r\n',

        attachments,

        '--012boundary01--'
     ].join('');

The content variable is the base64 encoded string of my attachment.

The final mail variable will look something like this:

Content-Type: multipart/mixed; boundary="012boundary01"

MIME-Version: 1.0

To: angyangcheng99@gmail.com

Subject: test again

--012boundary01
Content-Type: multipart/alternative; boundary=012boundary02

--012boundary02
Content-Type: text/plain; charset=UTF-8

testing123

--012boundary02

Content-Type: text/html; charset=UTF-8

Content-Transfer-Encoding: quoted-printable

<h1>HELLO</h1>

--012boundary02--

--012boundary01

Content-Type: image/jpeg

MIME-Version: 1.0

Content-Transfer-Encoding: base64

Content-Disposition: attachment; filename=1x1_red_pixel.jpeg

(base64 encoded string here)

Answer 1

Answer:

Your plain text is being sent, but your mail application is able to display HTML so you are not seeing it.

More Information:

The plain text portion of an email is displayed in email clients that can not display more complex things , in your case, HTML.

If you go to the Gmail UI and look at the original message, then follow the ⋮ > Show original in the upper-right hand side of the message, you will see that your plain text is in the message as it should be.

As you have HTML as well, email clients that can display HTML will display this instead of the plain text, not alongside it.

Your code is working fine, if you want to see the plain text you will need to use either a non-HTML displaying client, or remove the HTML from the message.

I hope this is helpful to you!