Jump to content

Uploading image &combo box selection from express frame work web form and receiving it as email using nodemailer.

Recommended Posts


I am using express framework form to get inputs from user and sending it as email by using node mailer. However i am unable to receive the image and system type (Combo box).I am new to node.kindly help.

### My HTML code


<div class="container">

<p style="font-size:24px;">ONLINE SUPPORT REQUEST</p>

<hr size="2%;"width="50%;">

<form role="form" name="myForm" onsubmit="return(validate());" action="" method="POST" >

<div class="form-group">

<label for="name">What is your name?</label>

<input type="text" class="form-control" id="text" name="fname" placeholder="name">


<div class="form-group">

<label for="cname">What is your company name?</label>

<input type="text" class="form-control" id="text" name="cname" placeholder="company name">


<div class="form-group">

<label for="email">What is your email address?</label>

<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">


<div class="form-group">

<label for="phone">What is your phone number?</label>

<input type="text" class="form-control" id="text" name="phone" placeholder=" phone number with area code">


<div class="form-group">

<label for="one">Is this an emergency? </label>

<input type="radio" class="form-control" id="text" name="emergency" value="No"> NO <input type="radio" class="form-control" id="text" name="emergency" value="Yes"> YES


<div class="form-group">

<label for="one">Do you require a phone call when we begin working on your ticket? </label>

<input type="radio" class="form-control" id="text" name="phonecall" value="No"> NO <input type="radio" class="form-control" id="text" name="phonecall" value="Yes"> YES


<div class="form-group">

<label for="combo" name="systemtype"> What is your system platform</label> <br>


<option value="volvo">Microsoft Windows</option>

<option value="saab">Mac OS X</option>

<option value="opel">Linux</option>

<option value="audi">IOS</option>

<option value="5">Android</option>

<option value="6">Others</option>



<div class="form-group">

<label for="uploadfile"> Please attach a screenshot if applicable.</label>

<input type="file" class="form-control" id="text" name="attachment" size="50">


<input type="submit" value="Upload File" />


<div class="form-group">

<label for="name">What is the subject of your support request?</label>

<input type="text" class="form-control" id="text" name="supportrequest" placeholder="suport subject">


<div class="form-group">

<label for="comment">Please describe the support issue in detail </label>

<textarea class="form-control" rows="5" id="comment" name="urcomments"></textarea>


<button type="submit" class="btn btn-default">Submit</button>





### My server Code


var express = require('express');

var app = express();

var fs = require("fs");

var bodyParser = require('body-parser');

var multer = require('multer');

// Create application/x-www-form-urlencoded parser

var urlencodedParser = bodyParser.urlencoded({ extended: false })


var upload = multer({ dest: './uploads' });

app.get('/client-support.htm', function (req, res) {

res.sendFile( __dirname + "/" + "client-support.htm" );


app.post('/process_post', urlencodedParser, function (req, res) {

// Prepare output in JSON format

response = {

















var file = __dirname + "/" + req.files.file.name;

fs.readFile( req.files.file.path, function (err, data) {

fs.writeFile(file, data, function (err) {

if( err ){

console.log( err );


response = {

message:'File uploaded successfully',




console.log( response );

res.end( JSON.stringify( response ) );



//sudan file upload edit end

//sudan edited node mailer code below

var nodemailer = require('nodemailer');

// create reusable transporter object using the default SMTP transport

// setup e-mail data with unicode symbols

var mailOptions = {

from: 'xxxxxxxx.com', // sender address

to: 'xxxxxxxxx.com', // list of receivers

subject: 'Client Support Page - Client Details', // Subject line

text: 'you have a new submission with folowwing details....Name:'+req.body.fname+'cname:'+req.body.cname+'Email:'+req.body.email+'Phone:'+req.body.phone+'emergency:'+req.body.emergency+'phonecall:'+req.body.phonecall+'systemtype:'+req.body.systemtype+'attachment:'+req.body.attachment+'supportrequest:'+req.body.supportrequest+'urcomments:'+req.body.urcomments, // plaintext body

html: '<table border="1" style="width:100%"><tr style="background-color:#373737;color:#ffffff;"><td><b>DETAILS LIST</b></td><td><b>CLIENT DETAILS</b></td></tr><tr style="background-color: #eee;"><td><b>Name:</b></td><td>'+req.body.fname+'</td></tr><tr><td><b>Email:</b></td><td>'+req.body.email+'</td></tr><tr style="background-color: #eee;"><td><b>Phone:</b></td><td>'+req.body.phone+'</td></tr><tr><td><b>emergency:</b></td><td>'+req.body.emergency+' </td></tr><tr style="background-color: #eee;"><td><b>phonecall:</b></td><td>'+ req.body.phonecall +' </td> </tr><tr><td><b>systemtype:</b></td><td>'+req.body.systemtype +'</td></tr><tr style="background-color: #eee;"><td><b>attachment:</b></td><td>'+req.body.attachment +' </td></tr><tr><td><b>supportrequest:</b></td><td>'+ req.body.supportrequest +' </td></tr></table>'// html body


// send mail with defined transport object

transporter.sendMail(mailOptions, function(error, info){


return console.log(error);


console.log('Message sent: ' + info.response);



var server = app.listen(8081, function () {

var host = server.address().address

var port = server.address().port


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...