/blog/send-emails-with-gatsby-and-sendgrid

[utterances-bot]

How to send email with Gatsby functions and Sendgrid | Guldberglab

I believe that every personal blog and portfolo website should have a way to reach out to the owner of the website. It is utterly important…

https://guldberglab.info/blog/send-emails-with-gatsby-and-sendgrid

[atomyah]

Hi my friend, may I ask a question?

Which part of form calls /api/sendMail.js ? I think

tag needs something to call the api like the following "method=POST" and "action=[api path]", for example, <form onSubmit={onSubmit} method="POST" action="/api/sendMail">

[Notaduck]

@atomyah I'm so sorry! I accidently left that part out! and missed your comment.........

But, since we use react-hook-form we must implement that functionality in onSubmit(....) I'm not on my computer right now but is shold look something like this (simplified)

    const requestOptions = {
        method: 'POST',
        body: JSON.stringify(data)
    };

   const url = '/api/sendMail'; 
    fetch(url, requestOptions)
        .then(response => alert('Thanks for reaching out')
        .catch(data => alert('Something bad happened');

An with react hook form we can easily validate the fields in the form with Yup https://github.com/react-hook-form/resolvers

[atomyah]

wow, thanks for reply! And you installed @sendgrid/mail, right? npm install --save @sendgrid/mail You didn't modify gatsby-config.js after installing it?

[Notaduck]

@atomya yes I did :) I think I will rewrite the article soon!!! It was done way to quick.

And no, you don't have to add anything to gatsby-config at all.

Can I ask how you managed to find my blog and this article? I have not done anything to promote the site since it isn't ready.

[atomyah]

Hi, thanks again! I just google "gatsby functions contact form" and found your blog.

I also could make the contact form with Gatsby Functions and SendGrid thanks of you. But I cannot implement the sending the attachment. <input type="file"> Perhaps Gatsby Funcions alone is not enough to do it I wonder? In the case of Next "API Router", it seems that it can be achieved by installing some packages such as next-connect, etc ...

[Notaduck]

@atomya cool! Where is the site deployed?

[atomyah]

I just smoketested on gatsby develop. Not yet deployed to cloud.

[Notaduck]

@atomyah okay, do you use react-hook-form as well?

[atomyah]

No I didn't. Because it's just my demo site to teach my layman students so..

Do you not have any idea to send <input type="file"> ?

[Notaduck]

@atomyah maybe :) but I will need to see your code, do you have a link to the repo?

[atomyah]

I temporarily upload to github, https://github.com/atomyah/temp_SendGrid_test Form => src/pages/form.js Function => src/api/send.js

[Notaduck]

@atomyah roger, I will try to take a look at it in the evening. And you would like to be able to upload a file from the frontend, then add it is an attatchment right?

Should I make a PR or just point out what you should be doing?

[Notaduck]

Hi again @atomyah, since Gatsbyfunctions are serverless and are using node you should be able to upload a file to the endpoint. I took a quick look at your code and noticed the way you are using the handleChange doesn't differentiate between the types of inputs. I believe you should do something like this: example.

Another thing is that you use class instead of className you can't use class in react.

The last step in your API is to make sure or convert the file to a base64 encoding. I hope that gave you the answer you were looking for.