Sending a base64 encoded file using #SMTP.js
SMTPjs.com is a javascript library that allows you send email through Javascript. – You still need access to a outgoing mail (SMTP) server, but this makes life a little easier for your JS apps.
Today, we released v2.0.1 of the library, which has a few important fixes
- The message body is no longer limited in size
- There is now an optional callback parameter, that allows your code continue after the email is sent.
- Attachments can be sent in base 64 format (dataURI) to the library.
Previous versions of the library will continue to be functional, but we recommend upgrading to the latest version.
Callback feature:
Depending on whether you use a stored token, or send your SMTP credentials with every request, then you use one of the two following blocks of code:
Email.send(“from@you.com”,
“to@them.com”,
“Subject”,
“Body”,
“smtp.server.com”,
“username”,
“password”,
function done(message) { alert(“sent”) }
);
or, when using stored credentials;
Email.send(“from@you.com”,
“to@them.com”,
“Subject”,
“Body”,
{
token: “your-token”,
callback:function done(message) { alert(“sent”) }
});
DataUri Attachments
Previously, in order to send an attachment with this script, then the file you needed to send needed to be already hosted online. This, may not be ideal, if you wanted your user to select a file from their device, or otherwise dynamically generate the file to be sent.
So, let’s imagine we want the user to select a file to be sent from their device, we add a form element as follows;
<input type=”file” id=”fileupload” onchange=”uploadFileToServer()” />
Then define the function uploadFileToServer as follows:
function uploadFileToServer() {
var file = event.srcElement.files[0];
console.log(file);
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function () {
var datauri = “data:” + file.type + “;base64,” + btoa(reader.result);
Email.sendWithAttachment(“from@you.com”,
“to@them.com”,
“Subject”,
“Body”,
“smtp.server.com”,
“username”,
“password”,,
datauri,
function done(message) { alert(“Message sent OK”) }
);
};
reader.onerror = function() {
console.log(‘there are some problems’);
};
}
Network Programming in .NET 
Hi this is a great tool!
I’m but new to JS and am trying to build a function with the attachment option. It’s not working, can you spot where the issue is? Thanks in advance.
function sendmail(email,subject,body,attachment){
Email.sendWithAttachment(
“info@corestats.biz”,
email,
subject,
body,
attachment,
{
token: “fa58eea8-c88c-41cf-8dd5-21c9ddf8e344”,
callback: function done(message) { alert(“sent”) }
}
);
}
LikeLike
If your attachment is not user-provided, but is pre-existing on your server, then you can also use this technique to send attachments:
https://blog.dotnetframework.org/2017/05/04/send-email-with-attachments-from-javascript/
Otherwise, can you post more of your code, it’s not clear from the snippet.
LikeLike
Thanks for the quick reply. I’m trying to get the attachment of base64 format in the attachment. See some more of the code here: https://codeshare.io/ame0K0
LikeLike
I cannot make the base64 attachment (an image) go through when I am trying to use a token syntax like so:
Email.sendWithAttachment(
“info@corestats.biz”,
email,
subject,
body,
attachment,
{
token: “fa58eea8-c88c-41cf-8dd5-21c9ddf8e344”,
callback: function done(message) { alert(“sent”) }
}
);
}
The attachment never arrives, I’e tried putting it everywhere, before and after the token etc. It doesn’t go through.
If on the other hand I don’t use the token and just use this ordinary syntax, my image gets sent without a problem:
Email.sendWithAttachment(“from@you.com”,
“to@them.com”,
“Subject”,
“Body”,
“smtp.server.com”,
“username”,
“password”,,
attachment,
function done(message) { alert(“Message sent OK”) }
);
but I would really rather not expose my credentials like that. Do you have any idea what I am doing wrong?
LikeLike
I am also having the same problem @hark, are you able to solve it?
LikeLike
Here’s how to send an attachment while still using a token:
Email.sendWithAttachment(“info@you.com”,
“them@email.com”,
“Some subject”,
“this is the body”,
{
token: “TOKEN”
}, “”, “”, “https://attachmenturl”,
function done(message) { alert(message) });
LikeLike
Yes, use this way, I can send email with attachment succeed, but after get the email, the attachment file name is always “file.txt”, do you know how can I set the attachment file name?
LikeLike
How can I set the name of attachment in the email? In my case, it always is file.txt.
LikeLike
Here are my post data to stmp.aspx page:
From: qiannianyu123@hotmail.com
to: v-qiha@microsoft.com
Subject: How to send email via SmtpJS
Body:
Hi Jimmy, Emily, Yulong, Betty,
Please ignore this email, it’s a test about how to send email via javascript in Share Point Online!
Thanks,
Qiang,
Attachment: data: text/plain; base64, dXNpbmcgU3lzdGVtOw0KDQpuYW1lc3BhY2UgTmV0Q29yZUNMSQ0Kew0KICAgIGNsYXNzIFByb2dyYW0NCiAgICB7DQogICAgICAgIHN0YXRpYyB2b2lkIE1haW4oc3RyaW5nW10gYXJncykNCiAgICAgICAgew0KaWYoYXJncy5MZW5ndGggPiAwKXsNCglDb25zb2xlLldyaXRlTGluZSgkIkhlbGxvIHthcmdzWzBdfSIpOw0KfQ0KZWxzZSB7DQoJQ29uc29sZS5Xcml0ZUxpbmUoJCJIZWxsbyBXb3JsZCEiKTsNCn0NCiAgICAgICAgICAgIENvbnNvbGUuV3JpdGVMaW5lKCJGaWJvbmFjY2kgTnVtYmVycyAxLTE1OiIpOw0KZm9yKGludCBpID0gMDsgaSA8IDE1OyBpICsrKXsNCkNvbnNvbGUuV3JpdGVMaW5lKCQie2kgKyAxfToge0ZpYm9uYWNjaU51bWJlcihpKX0iKTsNCn0gDQogICAgICAgIH0NCg0Kc3RhdGljIGludCBGaWJvbmFjY2lOdW1iZXIoaW50IG4pew0KaW50IGEgPSAwOw0KaW50IGIgPSAxOw0KaW50IHRtcDsNCg0KZm9yKGludCBpID0gMDsgaSA8IG47IGkrKyl7DQp0bXAgPSBhOw0KYSA9IGI7DQpiICs9IHRtcDsNCn0NCg0KcmV0dXJuIGE7DQoNCn0NCg0KDQogICAgfQ0KfQ0K
SecureToken: ******************************************
Action: SendFromStored
cachebuster: 417834
It can send the email succeed, but the attachment file name is always “file.txt”.
So I want to know how can I set it to the correct file name?
LikeLike
Hello!Can we send emails so that the sender is “John Snow” and not johnsnow4ever@gmail.com?
LikeLike
Can i send multiple attachements?? if so how??
LikeLike
Just a quick note to say that I was having trouble using sendWithAttachment and a token. If you’re wondering how to get this to work, you need to supply two blank variables as placeholders for what would have been the email address and password in normal SMTP details.
You end up with:
Email.sendWithAttachment(
“from@email.com”,
“to@email.com”,
“Subject”,
“Body”,
{token:”your-token”},
“”, // these are the blank
“”, // placeholders
“attachment”
);
Hope that helps someone else.
LikeLike
Hi!
When every I try to send an email with attachment, the email arrives OK but, it arrives with nothing. I already followed the tutorial from the page but got no luck. Does anyone have an idea of what is going on?
var reader = new FileReader();
var file = filesArr[0];
reader.readAsBinaryString(file);
reader.onload = function () {
fileLocation[0] = “data:” + file.type + “;base64,” + btoa(reader.result);
}.bind(fileLocation);
Email.sendWithAttachment(“energias.renovables.pagina@gmail.com”,
“jm.beauregard26@gmail.com”,
“This is a subject”,
“this is the body with attachments?”,
“smtp.elasticemail.com”,
“energias.renovables.pagina@gmail.com”,
“60e3ab85-9333-4387-8ec9-0fa5ebf787d7”,
“”,
“”,
fileLocation[0],
function done(message) { message == “Ok” ? formSuccess() : submitMSG(false, message) }
);
Thanks!
LikeLike