I have a job application form. I tried to set the CV file attached as PDF to be downloadable or viewable in the e-mail, but I could not succeed.When the user uploads a PDF from the browser, only the name of the file path appears in the incoming e-mail.
These are my codes. Where am I doing wrong?
Form
<div class="row">
<div id="form-tagline" class="col-md-4">
<div class="form-tagline">
<i class="fa fa-envelope fa-5x"></i>
<h2>Internship Application Form</h2>
</div>
</div>
<div id="form-content" class="col-md-8">
<form
class="contact-form"
action="/"
method="POST"
enctype="multipart/form-data"
>
<div class="row form-group">
<div class="col-sm-3">
<input type="hidden" />
<label id="name-label" class="control-label" for="name"
>Name:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-name"
><i class="fa fa-user"></i
></span>
</div>
<input
id="name"
type="text"
class="form-control"
placeholder="Your Name"
name="name"
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label id="email-label" class="control-label" for="email"
>Email:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-email"
><i class="fa fa-envelope"></i
></span>
</div>
<input
type="email"
class="form-control"
id="email"
placeholder="Your Email Address"
name="email"
pattern="^[-+.w]{1,64}@[-.w]{1,64}.[-.w]{2,6}$"
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label id="number-label" class="control-label" for="phone"
>Phone Number:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-phone"
><i class="fa fa-phone"></i
></span>
</div>
<input
type="text"
class="form-control"
id="phone"
placeholder="Enter Your Phone Number"
name="phone"
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label class="control-label" for="internshipSubject"
>Internship Subject:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-internshipSubject"
><i class="fa fa-briefcase"></i
></span>
</div>
<input
type="text"
class="form-control"
id="internshipSubject"
placeholder="Enter Internship Subject"
name="internshipSubject"
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label class="control-label" for="internshipDuration"
>Internship Duration:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-internshipDuration"
><i class="fa fa-clock"></i
></span>
</div>
<input
type="text"
class="form-control"
id="internshipDuration"
placeholder="Enter Internship Duration"
name="internshipDuration"
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label class="control-label" for="internshipPeriod"
>Internship Period:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-internshipPeriod"
><i class="fa fa-calendar"></i
></span>
</div>
<input
type="text"
class="form-control"
id="internshipPeriod"
placeholder="Enter Internship Period"
name="internshipPeriod"
/>
</div>
</div>
<hr />
<div class="form-group row">
<div class="col-sm-3">
<label class="control-label" for="cvFile"
>Your CV File:</label
>
</div>
<div class="col-sm-9">
<input
type="file"
class="form-control"
id="cvFile"
name="cvFile"
accept=".pdf"
/>
<small class="form-text text-muted">Only PDF format</small>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label class="control-label" for="comment"
>Opinion/Message about Internship Period:</label
>
</div>
<div class="input-group col-sm-9">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-comment"
><i class="fa fa-comment"></i
></span>
</div>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12 submit-button">
<button
type="submit"
id="submit"
class="btn btn-default"
aria-pressed="true"
>
Submit Application
</button>
</div>
</div>
</form>
</div>
</div>
JS:
<script>
const contactform = document.querySelector(".contact-form");
let name = document.getElementById("name");
let email = document.getElementById("email");
let phone = document.getElementById("phone");
let internshipSubject = document.getElementById("internshipSubject");
let internshipDuration = document.getElementById("internshipDuration");
let internshipPeriod = document.getElementById("internshipPeriod");
let cvFile = document.getElementById("cvFile");
let comment = document.getElementById("comment");
contactform.addEventListener("submit", (e) => {
e.preventDefault();
let formData = {
name: name.value,
email: email.value,
phone: phone.value,
internshipSubject: internshipSubject.value,
internshipDuration: internshipDuration.value,
internshipPeriod: internshipPeriod.value,
cvFile: cvFile.value,
comment: comment.value,
};
let xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.setRequestHeader("content-type", "application/json");
xhr.onload = function () {
console.log(xhr.responseText);
if (xhr.responseText == "success") {
alert("Email Sent");
name.value = "";
email.value = "";
phone.value = "";
internshipSubject.value = "";
internshipDuration.value = "";
internshipPeriod.value = "";
cvFile.value = "";
comment.value = "";
} else {
alert("Something went wrong");
}
};
xhr.send(JSON.stringify(formData));
});
</script>
Server.js:
const express = require("express");
const app = express();
const nodemailer = require("nodemailer");
const multer = require("multer");
const upload = multer({ dest: "uploads/" });
const PORT = process.env.PORT || 5000;
// Middleware
app.use(express.static("public"));
app.use(express.json());
app.get("/", (req, res) => {
res.sendFile(__dirname + "/apply-to-us/internship-application.html");
});
app.post("/", upload.single("cvFile"), (req, res) => {
console.log(req.body);
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: "***@gmail.com",
pass: "***",
},
});
const mailOptions = {
from: req.body.email,
to: "***@gmail.com",
subject: `Internship Application Form`,
text: `
Name: ${req.body.name}
Email: ${req.body.email}
Phone: ${req.body.phone}
Internship Subject: ${req.body.internshipSubject}
Internship Duration: ${req.body.internshipDuration}
Internship Period: ${req.body.internshipPeriod}
Opinion/Message about Internship Period: ${req.body.comment}
`,
attachments: [
{
filename: req.file.originalname,
path: req.file.path,
},
],
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.send("error");
} else {
console.log("Email sent: " + info.response);
res.send("success");
}
});
});
app.listen(PORT, () => {
console.log(`server running on port ${PORT}`);
});
New contributor
Mert Duyar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.