Thiết kế website giá rẻ

Question

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}`);
});

Thiết kế website giá rẻ

Danh mục

Get a PDF File with nodemailer via a html form