How to attach file using Nodemailer in React.js

Question

I am using React with Nodemailer to send emails from a user input form, the user should be able to attach a file (a PDF for example) through the form and the content of the form will be sent as an email using Nodemailer. My issue comes with not knowing how to attach the file to the email. Here is a list and examples of properties that can be used using Nodemailer. What properties can I extract from the object inputted through the file input to the event.target.files to use to attach to the email, can I get the path of the inputted file for example?

Code:

const [file, setFile] = useState(null);

const handleSubmit = async(e) => {
e.preventDefault();

try {
  await axios.post("http://localhost:4000/send_form", { file });
}
catch (error) {
  console.log(error);
}
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="file"
      onChange={(e) => setFile(e.target.files[0])}
      required/>
    <button type="submit">Send</button>
  </form>
);

Server:

app.post("/send_form", cors(), async (req, res) => {
  let { file } = req.body;

  await transport.sendMail({
    from: "from@sender.com",
    to: "to@receiver.com",
    subject: "Subject",
    html: `<h1>Hello</h1>`,
    attachments: [{
      filename: "",
      path: ""
    }]
  })
});

Answer 1

You don't need axios to upload the file, just POST it as FormData with the Fetch API.

async function handleSubmit(event) {
  event.preventDefault();

  let fd = new FormData();
  fd.append('myfile', file);

  fetch('http://localhost:4000/upload', {
    method: 'POST', body: fd
  }).catch(err => {
    console.error(err);
  });
}

If you have other data to submit along with your image it can also be append to the FormData object.

fd.append('name', 'Joe');
fd.append('age', 40);
// etc...

Or, you can simply capture all fields from any HTMLFormElement. Just make sure to set the enctype attribute to be multipart/form-data.

let form = document.querySelector('#your-form');
let fd = new FormData(form);

Then, on the server you can use the multer middleware to stream the file buffer to the nodemailer attachment:

import express from 'express';
import multer from 'multer';
import transport from './your_app.js'

const app = express();

const upload = multer({
  storage: multer.memoryStorage()
});

app.post('/upload', upload.single('myfile'), (req, res) => {
  transport.sendMail({
    from: "from@sender.com",
    to: "to@receiver.com",
    subject: "Subject",
    html: `<h1>Hello</h1>`,
    attachments: [{
      filename: req.file.originalname,
      content: req.file.buffer
    }]
  })
});

app.listen(4000);

If you have other middleware you need to use on this route, they can be passed in as an array:

import cors from 'cors';

let middleware = [
  cors(),
  upload.single('myfile')
];

app.post('/upload', middleware, handler);

Note that the key used in the following two statements must match. This key corresponds to the name attribute of the file input.

In handleSubmit() :

fd.append('myfile', file);

In app.post() :

upload.single('myfile')

Multer also allows for multiple file uploads if needed. You can either capture several files from a single input with the multiple attribute:

upload.array('myfile', 3)

Or you could use several file inputs:

upload.fields([
  { name: 'myfile', maxCount: 1 },
  { name: 'another-file', maxCount: 8 }
])

If you do this, you will need to access the uploaded file data from the req.files property instead of the singular req.file.

The rest of your form data will be available in the req.body object:

req.body.name == 'Joe'
req.body.age == 40;