Notaduck / blog

BSD Zero Clause License
0 stars 0 forks source link

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

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@atomya cool! Where is the site deployed?

atomyah commented 2 years ago

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

Notaduck commented 2 years ago

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

atomyah commented 2 years ago

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 commented 2 years ago

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

atomyah commented 2 years ago

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

Notaduck commented 2 years ago

@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 commented 2 years ago

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.