Uploading a image and sending it using nodemailer

Question

I am trying to make a form where you can send images. I want these images to get send in the mail using nodemailer. I've figured out how to grab information from my form by using express and body parser and then putting that in my mail. This ofcourse didn't work for my images and either told me something was wrong in my app.js or it did send but gave undefined in the mail I recieved where the image should go.

I've tried looking for some kind of solution or answer but couldn't find one. So I would be grateful if someone could send me a link with a answer to my question or could help and explain it here to me.

Thanks!

My form:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<div class="contact">
<ul>
<h2 class="centerFormName">Form</h2>
{{msg}}
<form method="POST" action="send" enctype="multipart/form-data">
<label>Placeholder Image:</label>
<input type="file" name="file" id="file"/>
</p>
<p class="full">
<label>Message:</label>
<textarea class="inputcss" name="message" rows="5"></textarea>
</p>
<p class="full">
<button type="submit">Submit</button>
</p>
</form>
</ul>
</div>
</body>
</html>

My app.js

 const express = require('express');
 const fileUpload = require('express-fileupload');
 const bodyParser = require('body-parser');
 const exphbs = require('express-handlebars');
 const path = require('path');
 const nodemailer = require('nodemailer');

 const app = express();

// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));

// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
res.render('contact');
});

app.post('/send', (req, res) => {
//output
const output = `
<p>You have a new Mail</p>
<h3>Mail</h3>
<ul>  
  <li>Voornaam: ${req.body.name}</li>
  <li>Achternaam: ${req.body.achternaam}</li>
  <li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
//Trnasporter
const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
  type: 'OAuth2',
  user: 'xander@mail.com',
  clientId: '',
  clientSecret: '',
  refreshToken: '',
  accessToken: '',
 },
 });
//Mail options
let mailOptions = {
  from: 'Xander <Xander@mail.com>', // sender address
  to: req.body.email, // list of receivers
  subject: 'Hi', // Subject line
  html: output // html body
 };


transporter.sendMail(mailOptions, (error, info) => {
  if (error) {
      return console.log(error);
  }
  console.log('Message sent: %s', info.messageId);   

  res.render('contact', {msg:'Email has been sent'});
});
});

app.listen(3000, () => console.log('Server started...'));

Note I've made the form a bit shorter here.

When you upload an image you are sending a multipart/form-data request. You need multer to handle it. Check the accepted answer here to see how to use it. https://stackoverflow.com/questions/49029893/accessing-raw-post-data-in-express — Giannis Mp, Feb 28 '18 at 15:23

score 0 · Answer 1 · answered Mar 16 '18 at 10:24

There are two parts to it:

You need to send user uploaded images to your backend. Use multer and/or tempy for that.
See https://community.nodemailer.com/using-embedded-images/ You need to embed your images. i.e. in your message body and img tag, replace every image path with a unique_id, and put it something like below:

For every image present in your html/body, you need to provide attachments array with mapping of that unique_id to exact image. See above URL for details.

Hope it helps.

Uploading a image and sending it using nodemailer

1 Answers1