I’ve been working on a react form which receives some biodata input including three images, then programmatically generates a pdf from the entries in the form, and send this pdf along with the three images as an email to a given inbox. The API I used named Brevo seems to work fine with sending just texts in the mail, I’ve been able to do that, but I’m unable to send any attachments. I have read the documentation for their API over and over but i really cannot get what is the issue. Their API seems to have two methods of sending, which is the API method and SMTP relay, and i have tried both although i didn’t fully get the smtp relay structure. I really need to create this form without a backend.
This is a link to the documentation of the mailing API that uses api method:
https://developers.brevo.com/docs/send-a-transactional-email
This is a link to the part that uses SMTP relay the structure still seems the same:
https://developers.brevo.com/docs/smtp-integration
However it doesn’t quite correlate with this node smtp relay sample they documented here in terms of API/relay structure, this leaves me confused:
https://developers.brevo.com/docs/node-smtp-relay-example
This is what my code looks like:
import React, { useState } from "react";
import axios from "axios";
import {jsPDF} from "jspdf"; //this library helps in creating pdf from entries
const Body=()=>{
const [lastname, setLastname] = useState("");
const [othernames, setOthernames] = useState("");
const [address, setAddress] = useState("");
const [dob, setDOB] = useState("");
const [pob, setPOB] = useState("");
const [lga, setLGA] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [idImage, setIdImage] = useState(null);
const [idImageURL, setIdImageURL] = useState(null);
const [passport, setPassport] = useState(null);
const [passportURL, setPassportURL] = useState(null);
const [signature, setSignature] = useState(null);
const [signatureURL, setSignatureURL] = useState(null);
const Text = "New User Details"
//Upload images and make them show on the webpage
const handleIdImageUpload = (event) => {
const file = event.target.files[0];
setIdImage(file);
const reader = new FileReader();
reader.onload = () => {
setIdImageURL(reader.result);
};
reader.readAsDataURL(file);
};
const handleSignatureUpload = (event) => {
const file = event.target.files[0];
setSignature(file);
const reader = new FileReader();
reader.onload = () => {
setSignatureURL(reader.result);
};
reader.readAsDataURL(file);
};
const handlePassportUpoad = (event) => {
const file = event.target.files[0];
setPassport(file);
const reader = new FileReader();
reader.onload = () => {
setPassportURL(reader.result);
};
reader.readAsDataURL(file);
};
const submitForm = async (e) => {
e.preventDefault();
const doc = new jsPDF(); //new pdf document object
//create document that will be sent to API
doc.text(`
Gender: ${document.querySelector('select[name="gender"]')?.value}n
Last Name: ${lastname}n
Other Names: ${othernames}n
Date fo birth: ${dob}n
Address: ${address}n
Place of Birth: ${pob}n
LGA: ${lga}n
Email: ${email}n
Phone: ${phone}n
`, 10, 10)
doc.save('myPDF.pdf'); // Save the PDF with a specified name to my local storage, This is just for me to have a local copy and not used in the code.
const readerID = new FileReader();
const readerSignature = new FileReader();
const readerPassport = new FileReader();
const base64Images = [];
//convert images to base 64 to be sent; I honestly don't fully understand the working of this part
readerID.onload = () => {
const base64Image = readerID.result.split(',')[1];
base64Images.push(base64Image);
};
readerID.readAsDataURL(idImage);
readerPassport.onload = () => {
const base64Image = readerPassport.result.split(',')[1];
base64Images.push(base64Image);
};
readerPassport.readAsDataURL(passport);
readerSignature.onload = () => {
const base64Image = readerSignature.result.split(',')[1];
base64Images.push(base64Image);
};
readerSignature.readAsDataURL(signature);
sendEmailWithAttachment(doc, base64Images);
};
const sendEmailWithAttachment = async (pdfDoc, base64Images) => {
try {
const base64Pdf = pdfDoc.output('datauristring').split(',')[1];
const response = await axios.post(
'https://api.brevo.com/v3/smtp/email',
{
sender: {
name: 'Company Name',
email: '[email protected]'
},
to: [
{
email: '[email protected]',
name: 'Receivers name'
}
],
subject: 'New Customer Registeration',
htmlContent: `<html>${Text}</html>`,
attachment: [
{
content: base64Pdf,
name: 'userDetails.pdf',
},
{
content: base64Images[0],
name: 'idDocument.jpg',
},
{
content: base64Images[1],
name: 'passport.jpg',
},
{
content: base64Pdf[2],
name: 'signature.jpg',
},
]
},
{
headers: {
'accept': 'application/json',
'api-key': 'My-API-Key-goes-here',
'content-type': 'application/json'
}
}
);
console.log('Email sent', response.data);
} catch (error) {
console.error('Error sending email:', error);
}
};
return(
<div className="form" >
<form onSubmit={submitForm} method="POST">
<center>
<div className="item-container">
<label for="gender">Gender <span className="red-asteriks">*</span></label><br/>
<select name="gender" className="list" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<div className="item-container">
<label for="lastname">Last Name <span className="red-asteriks">*</span></label><br/>
<input type="text" name="lastname" id="lastname" className="entries" value={lastname} onChange={event =>setLastname(event.target.value)} placeholder="Enter Lastname" required/>
</div>
<div className="item-container">
<label for="othernames">Other Names <span className="red-asteriks">*</span></label><br/>
<input type="text" name="othernames" id="othernames" className="entries" value={othernames} onChange={event =>setOthernames(event.target.value)} placeholder="Enter one or more other names" required/>
</div>
<div className="item-container">
<label for="dob">Date of Birth <span className="red-asteriks">*</span></label><br/>
<input type="date" name="dob" id="dob" className="entries" value={dob} onChange={event =>setDOB(event.target.value)} required/>
</div>
<div className="item-container">
<label for="address">Address <span className="red-asteriks">*</span></label><br/>
<input type="text" name="address" id="address" className="entries" placeholder="Enter Address" value={address} onChange={event =>setAddress(event.target.value)} required/>
</div>
<div className="item-container">
<label htmlFor="pob">Place of Birth <span className="red-asteriks">*</span></label><br/>
<input type="text" name="pob" id="pob" className="entries" placeholder="Enter Place of Birth" value={pob} onChange={event =>setPOB(event.target.value)} required/>
</div>
<div className="item-container">
<label for="lga">LGA <span className="red-asteriks">*</span></label><br/>
<input type="text" name="lga" id="lga" className="entries" placeholder="Enter LGA" value={lga} onChange={event =>setLGA(event.target.value)} required/>
</div>
<div className="item-container">
<label for="email">Email <span className="red-asteriks">*</span></label><br/>
<input type="email" name="email" id="email" className="entries" placeholder="Enter Email" value={email} onChange={event =>setEmail(event.target.value)} required/>
</div >
<div className="item-container">
<label for="phone">Phone <span className="red-asteriks">*</span></label><br/>
<input type="number" name="phone" id="phone" className="entries" placeholder="Phone Number" value={phone} onChange={event =>setPhone(event.target.value)} required/>
</div>
<div id="images-subsection">
<div className="img-input-container">
<div className="item-container img-item">
<label for="id-img">Upload means of ID<span className="red-asteriks">*</span></label><br/>
<input type="file" accept="image/*" name="id-img" id="id-img" className="entries img-input" onChange={handleIdImageUpload} required/>
</div>
<div className="item-container img-item">
<label for="passport">Upload Passport Photograph<span className="red-asteriks">*</span></label><br/>
<input type="file" accept="image/*" name="passport" id="passport" className="entries img-input" onChange={handlePassportUpoad} required/>
</div>
<div className="item-container img-item">
<label for="signature">Upload Signature <span className="red-asteriks">*</span></label><br/>
<input type="file" accept="image/*" name="signature" id="signature" className="entries img-input" onChange={handleSignatureUpload} required/>
</div>
</div>
<div className="img-container">
{idImage? (
<div className="image">
<h3>Selected Image:</h3>
<img src={idImageURL} alt="Selected" width="200" height="200" id="imgx"/>
</div>
):
(<span className="select-image">
<h3 >Select an Image:</h3>
<div className="no image">No image selected</div>
</span>)}
{passport? (
<div className="image">
<h3>Selected Image:</h3>
<img src={passportURL} alt="Selected" width="200" height="200" id="imgx"/>
</div>
):
(<span className="select-image">
<h3> Select an Image:</h3>
<div className="no image">No image selected</div>
</span>)}
{signature? (
<div className="image">
<h3>Selected Image:</h3>
<img src={signatureURL} alt="Selected" width="200" height="200" id="imgx"/>
</div>
):
(<span className="select-image">
<h3 >Select an Image</h3>
<div className="no image">No image selected</div>
</span>)}
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" />
</center>
</form>
</div>
);
}
export default Body;
The code above gives a server error, but if i remove the API post object for the attachments (pdf and img) and input all entries into the variable text in the htmlContent object, the mail is delivered successfully with the entries as body of the mail.
I’d also like to mention that i tried EmailJS but I’m not certain as to whether their API accepts attachment transfer. Alternatively, if I could get another good mailing API with proper documentation and a free plan of about 200 mails per day, I’d really appreciate.