Sending an image in an email using sendgrid

Jay

I'm using the file resource input field to send an image to xano, which I then want to send in an email alongside a message (as an attachment or in the message body).[image.png]
1.  Do I have to save it to the database to pass it into the email?
2. Is there a way to add it as an attachment?
3. If I can only add it to the body, how do I add it to the message? can it be "pasted" in so it doesn't have to be saved or do I have to save it and then use the URL in an tag in the message?


Thanks

Sean Montgomery

You need to send it as base64_encoded data.

If you already uploaded this to Xano and you have a URL, then you would want to do an API request on that URL to get the raw contents and then base64_encode that.

If you didn't upload it already and uploaded it in the same API that is being used to send the sendgrid email, then you would use Get File Resource Data from the Content Upload group.

Jay

 How do i add this encoded data to the email?

Sean Montgomery

You need to use the dynamic template version.

Jay

 [image.png]
I'm getting a bad request error:


{"request":{"url":"https://api.sendgrid.com/v3/mail/send","method":"POST","headers":["POST /v3/mail/send HTTP/1.1","Host: api.sendgrid.com","Accept-Encoding: gzip, deflate","Content-Type: application/json","Authorization: Bearer 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","Accept: application/json","Content-Length: 0"],"params":{"from":{"email":"hello@seabirdreader.com"},"personalizations":[{"to":[{"email":"feedback@seabirdreader.com"}],"dynamic_template_data":{"user":"jaymutzafi@gmail.com","type":"Bug","image":{"name":"Seabird_avatar.png","size":30354,"mime":"image/png","data":"PNG\r\n\u001a\n...TRUNCATED-SUPER-LONG-IMAGE-DATA...0000IENDB`"}}}],"template_id":"d-06c70d76883a4294a682bb7e8f5a3a7b"}},"response":{"headers":["HTTP/1.1 400 Bad Request","Server: nginx","Date: Fri, 07 Oct 2022 18:03:39 GMT","Content-Type: application/json","Content-Length: 63","Connection: keep-alive","Access-Control-Allow-Origin: https://sendgrid.api-docs.io","Access-Control-Allow-Methods: POST","Access-Control-Allow-Headers: Authorization, Content-Type, On-behalf-of, x-sg-elas-acl","Access-Control-Max-Age: 600","X-No-CORS-Reason: https://sendgrid.com/docs/Classroom/Basics/API/cors.html","Strict-Transport-Security: max-age=600; includeSubDomains"],"result":{"errors":[{"message":"Bad Request","field":null,"help":null}]},"status":400}}

Sean Montgomery

You need to base64 the data. 

See the "data": "PNG... block?

That should look like "data": "UE5H...

Jay

 I'm not sure what that means. I thought step 2 did that?
[image.png]is it just a matter of calling this path "data" instead of image?
[image.png]

Sean Montgomery

its using the base64_encode filter on imageData.

https://docs.xano.com/working-with-data/data-type-filters/conversion-filters#base64_encode

Jay

 Do i add it as a filter here? [image.png]Or on the get image data?[image.png]Or i need a third function to convert it to a text variable and then set it in the path as text? 

Sorry for being dense, this stuff isn't obvious to me. 

Sean Montgomery

no problem at all. Your intuition is correct. Your first screenshot is right.

Jay

 Getting a "Unable to base64_encode non-scalar data. Try converting to a string via json_encode."

If i add a json_encode before the base64 i get a "Unable to encode object as json."

Sean Montgomery

Come to office hours and we can debug. That error means that your imageData is not the binary data and an object or array instead. Or write in to support and someone may be able to help.