Send mail with images

Hi out there.
Is it posible to send a email with 3 to 5 new images just taken with the camera??
I can only get one on the mail. I can not use the url to send. It have to be the images file some how???
Looking forward to hear from someone soon.
Thanks…

Hi @funhall,

I managed to send Emails with “sendgrid”. This is not a component in ThunkableX, but an external service that you can use with the “Web API” component. To use this service there are several steps necessary, if you need more information I can help you.

Roughly speaking it goes like this:

  • go to sendgrid.com, register (for free) and get an API key
  • then you have to follow the steps in sendgrid for “sender authentication”. AFAIK this works only if you own a domain. Sender authentication does not work with public email services
  • if all goes well you can compose emails with as many elements as you want and send them out with a web API call to sendgrid.

Hi Michael
Thank you so much fot this hint. I am trying to set that up. But have some problems with the DNS
This dosent look right.

.
So I really like if I could get a little help here.

Hi @funhall,

my DNS-settings look very similar. I followed the documentation of sendgrid, and then I also had two new CNAME entries with s1_domainkey etc.

It takes some time (minutes to maybe an hour) to propagate the new DNS settings into the internet. After that you should be able to send emails. Here is a sample code that worked for me (the API key must be set in the Web API component in “designer” mode: add a new entry under “Headers” with property = “Authorization” and value = “Bearer <YOUR_KEY>”):

The blocks could look like this:

grafik

and my code in the first textblock from the join looks like this:
"{“personalizations”: [{“to”: [{“email”: “DESTINATION@BLA.COM”}]}],“from”: {“email”: “YOUR SENDER EMAIL”},“subject”: “A nice test email”,“content”: [{“type”: “text/html”, “value”: “Hi,
do you like this picture:
<img src=”

You should test sending email and sendgrid with “curl”, which is an interactive Tool. It is available on nearly every OS like Linux, Windows10, MacOS etc. If curl does not work then your sendgrid-settings need some care.

Hope this helps!

Thanks Michael
Now it seems like it is okay.


Then I have created this send block. But the error is Network request failed.

The body is “{“personalizations”: [{“to”: [{“email”: “test@example.com”}]}],“from”: {“email”: “test@example.com”},“subject”: “Sending with SendGrid is Fun”,“content”: [{“type”: “text/plain”, “value”: “and easy to do anywhere, even with cURL”}]}”

Can you help to see what is wrong

Hi @funhall,

in the string you should use the “from”-field with your real address! The point is, that the sender authorization helps to prevent spam.

Example:
“{“personalizations”: [{“to”: [{“email”: “test@example.com”}]}],“from”: {“email”: “info@funhall.dk”},“subject”: “Sending with SendGrid is Fun”,“content”: [{“type”: “text/plain”, “value”: “and easy to do anywhere, even with cURL”}]}”

You could even send the Email to one of your email-accounts, like:
“{“personalizations”: [{“to”: [{“email”: “mail@funhall.dk”}]}],“from”: {“email”: “info@funhall.dk”},“subject”: “Sending with SendGrid is Fun”,“content”: [{“type”: “text/plain”, “value”: “and easy to do anywhere, even with cURL”}]}”

I recommend testing sendgrid with curl. If you manage to send the email with curl (without error) then you should be able to send the next email with your app!

There are maybe other sources of error: curl does not work behind a firewall / proxy.

Hi Michael.
I dont know what I am missing here. Because I still get the same error “Network request failed” so can yoy see if the settings i right in the pictures in last message please.
Where and how do I test with the Curl??
/Martin

Hi @funhall

sorry, sometimes I can’t see the forest because of the many trees… you forgot to set the URL for the Web_API component. Click on the Web_API, and enter the URL of the sendgrid API:
https://api.sendgrid.com/v3/mail/send
That should do the trick.

grafik

For testing:
I use Linux and Windows 10, I don’t know which one do you prefer. curl works on both of them. It goes like that:
Linux

  • open a term like xterm or a simple command shell. This should work on MacOS, because the underlying operating system is UNIX and should give you a command window.

Windows 10

  • open “cmd”. This also opens a terminal window.

The next steps are identical for both systems:

  • enter the command “curl”. It should give you something like “curl: try curl --help blablabla”. All ok
  • or it gives you something like “command not found” or so. In that case install it. curl is open source and available for all major operating systems.

If curl is up and running you can send an email with the following command:
curl --request POST
–url https://api.sendgrid.com/v3/mail/send
–header “Authorization: Bearer $SENDGRID_API_KEY”
–header ‘Content-Type: application/json’
–data ‘{“personalizations”: [{“to”: [{“email”: “test@example.com”}]}],“from”: {“email”: “info@funhall.dk”},“subject”: “Sending with SendGrid is Fun”,“content”: [{“type”: “text/plain”, “value”: “and easy to do anywhere, even with cURL”}]}’

The value $SENDGRID_API_KEY is not a part of this script for security reasons. It is an environment variable. You set is in the terminal, before you use curl, as following:

Linux:

  • “export SENDGRID_API_KEY=SG.xxxxxxxxxxxxxxxxx”

Windows:

  • set SENDGRID_API_KEY=SG.xxxxxxxxxxxxxx"

Don’t use spaces before and after the “=” sign!

curl is interactive. If you send this test-email, it gives you a response after some seconds.

1 Like

Thanks you so much. I didnt see I forgot the url also. I t dosent semms like curl is up and running. How do I do that?

image

Hi @funhall,

my windows 10 has curl pre-installed. In your case look for curl to download and install it.

now there is a little step forward. I dont get the same error but like on the picture below.
image

I can not get the curl installed so will go the way with app/thunkable until it works…

@funhall
hmmm, please send me your input to web_API.set body. I’ll have a look. It is not unlikely that the JSON has some errors in its syntax.

Hi @funhall,

the next part will be, how to send your pictures to sendgrid. In my app I send pictures, which are stored in airtable. In your case, the pictures are stored local on your phone and that way I think you can not insert them into the email. So the next step must be to use cloudinary, which is a simple block in thunkable. Have a look at the documentation for “media db” (https://docs.thunkable.com/media-db).

To compose an email the steps will be:

  • upload your locally stored pictures to cloudinary (and store the URLs for later use)
  • optinally use a default import filter in cloudinary to shrink the pictures. A resize function for pictures is missing in thunkable, but can be easily used in combination with cloudinary.
  • then compose your email with text and the pictures from cloudinary-URLs. You have the option to define a download filter.
1 Like

no problem to use airtable in this case.
I just need to have the plain email to work firstly. Have you got the body text?
Btw I am not sure if I need the httpS:\ or just http:\??

I use https://

http:// is qualified as insecure and can be rejected!


I recommend this tool…

Now i´m getting close.
But how do i get the picture showend in the mail intead of a link??

Hi @funhall, did you have success in sending a plain text email? Good, the syntax for sending pictures is as following. Let’s assume, the picture resides on cloudinary, and it’s URL is like “https://res.cloudinary.com/xyz/image/upload/c_limit,h_1024,w_1024/sample.jpg

Then in your app you set the string to:

'{"personalizations": [{"to": [{"email": "test@example.com"}]}],"from": {"email": "info@funhall.dk"},"subject": "Sent with SendGrid pt.2","content": [{"type": "text/html", "value": "<p>Dear Sir,<br>this is an email.</p><p><img src=\"https://res.cloudinary.com/dah8s9tpc/image/upload/c_limit,h_1024,w_1024/sample.jpg\"></p> "}]}'

Be careful with all the " signs and braces.

Of course you can compose an email with as many pictures as you like. The parameters “h_1024” and “w_1024” are for automatically resizing in cloudinary, so your email doesn’t get too large. I recommend the tutorials on cloudinary very much! There are many more parameters to play with.

Thanks alot. I will try that.
I have made a template in sendgrid. But how do I write the syntax for the sender_name to implement it in the template?
image

Hi,

I have not worked with Templates in sendgrid, sorry I cannot help here.