I'm newbie in NextJs/ReactJs. I'm trying to send email as an enquiry form in which a candidate can fill up the form and submit it and once he/she submits the form then email should come to us. An attachment is also there with the form which also should come but unfortunately attached file is not coming. here is the form:
Careerform.js
import { useState } from 'react';
import Dropzone from 'react-dropzone';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { Form, Row, Button, Col, FormControl } from 'react-bootstrap';
import fileToArrayBuffer from 'file-to-array-buffer';
export default function Careerform() {
const initialData = { jname: '', jemail: '', jmobile: '', jlinkedin: '', jmessage: '' };
const schema = Yup.object().shape({
jname: Yup.string().required('Name is required.'),
jemail: Yup.string().required('Email is required.'),
jmobile: Yup.string().required('Mobile is required.'),
jlinkedin: Yup.string().required('Url is required.'),
jmessage: Yup.string().required('Message is required.'),
});
const [fileName, setfileName] = useState('');
const [file, setfile] = useState({});
const handleDrop = (acceptedFiles) => {
const reader = new FileReader();
reader.addEventListener('load', () => {
setfile(reader);
});
fileToArrayBuffer(
acceptedFiles[0]
).then((reader) => {
console.log(reader)
setfile(reader);
setfileName(acceptedFiles[0].name);
})
};
const handleSubmit = async (jobData) => {
console.log(file);
fetch('/api/send-job-enquiry', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: jobData.jname, emailId: jobData.jemail, mobile: jobData.jmobile, linkedIn: jobData.jlinkedin, jobMessage: jobData.jmessage, file: file, fileType: file.type, fileName: fileName }),
});
};
return (
<div className='container'>
{/* Apply Form */}
<Formik initialValues={initialData} validationSchema={schema} onSubmit={handleSubmit}>
{({
values,
errors,
handleChange,
handleSubmit,
/* and other goodies */
}) => (
<Form noValidate onSubmit={handleSubmit} className='js-validate'>
<Row>
<Col xs={6}>
<Form.Group>
<Form.Label>
Your Name<span className='text-danger'>*</span>
</Form.Label>
<Form.Control type='text' name='jname' placeholder='Your Name' value={values.jname} onChange={handleChange} isInvalid={!!errors.jname} />
<Form.Control.Feedback type='invalid'>{errors.jname}</Form.Control.Feedback>
</Form.Group>
</Col>
<Col xs={6}>
<Form.Group>
<Form.Label>
Your Email<span className='text-danger'>*</span>
</Form.Label>
<Form.Control type='text' name='jemail' placeholder='Your Email' value={values.jemail} onChange={handleChange} isInvalid={!!errors.jemail} />
<Form.Control.Feedback type='invalid'>{errors.jemail}</Form.Control.Feedback>
</Form.Group>
</Col>
<Col xs={6}>
<Form.Group>
<Form.Label>
Mobile<span className='text-danger'>*</span>
</Form.Label>
<Form.Control type='text' name='jmobile' placeholder='Mobile' value={values.jmobile} onChange={handleChange} isInvalid={!!errors.jmobile} />
<Form.Control.Feedback type='invalid'>{errors.jmobile}</Form.Control.Feedback>
</Form.Group>
</Col>
<Col xs={6}>
<Form.Group>
<Form.Label>
Linkedin URL<span className='text-danger'>*</span>
</Form.Label>
<Form.Control type='text' name='jlinkedin' placeholder='Linkedin URL' value={values.jlinkedin} onChange={handleChange} isInvalid={!!errors.jlinkedin} />
<Form.Control.Feedback type='invalid'>{errors.jlinkedin}</Form.Control.Feedback>
</Form.Group>
</Col>
<Col xs={12}>
<Form.Label>
Resume/CV and Cover Letter<span className='text-danger'>*</span>
</Form.Label>
<Dropzone onDrop={handleDrop}>
{({ getRootProps, getInputProps }) => (
<div className='dropzone js-dropzone dz-dropzone dz-dropzone-boxed' {...getRootProps()} style={{ flexDirection: 'column', alignItems: 'center' }}>
<input {...getInputProps()} />
<span className='d-block mb-1'>Browse your files</span>
<p className='d-block text-muted'> Maximum file size is 1MB</p>
<b>{fileName?.length > 0 ? fileName : ''}</b>
</div>
)}
</Dropzone>
<br />
</Col>
<Col xs={12}>
<Form.Group>
<Form.Label>
In a few words...<span className='text-danger'>*</span>
</Form.Label>
<Form.Control as='textarea' name='jmessage' placeholder='How did you hear about company?' value={values.jmessage} onChange={handleChange} isInvalid={!!errors.jmessage} />
<Form.Control.Feedback type='invalid'>{errors.jmessage}</Form.Control.Feedback>
</Form.Group>
</Col>
</Row>
<div className='text-center'>
<Button type='submit' className='btn btn-primary transition-3d-hover'>
Submit Application
</Button>
</div>
</Form>
)}
</Formik>
{/* End Apply Form */}
</div>
);
}
Another file is here sendEmail.js
import fetch from 'node-fetch';
const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send';
const SENDGRID_API_KEY = 'mysendgridapi';
const sendJobEmail = async ({ name, emailId, mobile, linkedIn, jobMessage, file, fileName, filetype }) => {
console.log({ file });
await fetch(SENDGRID_API, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${SENDGRID_API_KEY}`,
},
body: JSON.stringify({
personalizations: [
{
to: [
{
email: 'myemail@xyz.com',
},
],
subject: 'A Career form has been submitted on your website',
},
],
from: {
email: 'noreply@xyz.com',
name: 'Careers Form',
},
attachments: [
{
content: file.toString('base64'),
filename: fileName,
type: filetype,
disposition: 'attachment',
// content: '',
},
],
content: [
{
type: 'text/html',
value: `A Career form has been submitted on your website. Below are the details:
<p><strong>Name: </strong> ${name}</p>
<p><strong>Email: </strong> ${emailId}</p>
<p><strong>Phone: </strong> ${mobile}</p>
<p><strong>LinkedIn: </strong> ${linkedIn}</p>
<p><strong>Message: </strong> ${jobMessage}</p>
<p><strong>Resume: </strong> ${fileName}</p>
`,
},
],
}),
}).catch((error) => {
console.log(error);
});
};
export { sendJobEmail };
Another file is here send-job-enquiry.js
import { sendJobEmail } from '../../utils/sendEmail';
export default async (req, res) => {
if (req.method === 'POST') {
const { name, emailId, mobile, linkedIn, jobMessage, file, fileName, filetype } = req.body;
await sendJobEmail({ name, emailId, mobile, linkedIn, jobMessage, file, fileName, filetype });
return res.status(200).end();
}
return res.status(404).json({
error: {
code: 'not_found',
messgae: "The requested endpoint was not found or doesn't support this method.",
},
});
};
My emails are not coming. I'm not storing resume anywhere that's the reason maybe it is not coming. When it comes to storage so I don't have any storage and I want to store that resume on local storage as in folder in my app only.