We Keep Coding

Req.body is empty object, TypeError:

Error:
TypeError: Cannot destructure property 'firstName' of 'req.body.warranty' as it is undefined.
I tried to handle MulterError by this documentation https://www.npmjs.com/package/multer, but
faced a problem.
Console.log(req.body) gives { }, while form enctype is equal to 'multipart/form-data'. If I change it to the 'application/x-www-form-urlencoded' req.body is normal, but files do not upload to the server.
Multer Usage
var storage = multer.diskStorage({
destination:"./public/uploads/",
filename:(req,file,cb)=>{
cb(null,file.fieldname+"-"+Date.now()+path.extname(file.originalname));
}
});
var upload = multer({
storage: storage,
limits:{fileSize: 10000000}
}).fields([{
name: 'purchasePhoto', maxCount: 1
}, {
name: 'defectPhoto', maxCount: 1
}]);
Post route from the warranty page with a form enctype="multipart/form-data"
router.post("/warranty", function(req, res){
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
req.flash('error', 'Multer Error');
return res.redirect('/pages/warranty#flash');
} else if (err) {
console.log('error');
}
});
var { firstName, lastName, streetAdress, city, state, zip, country, email, phoneNumber, product, bikeShop, assembledBy, issue} = req.body.warranty;
var newWarranry = { purchasePhoto: purchasePhoto, defectPhoto: defectPhoto, firstName: firstName, lastName: lastName, streetAdress: streetAdress, city: city, state: state, zip: zip, country: country, email: email, phoneNumber: phoneNumber, product: product, bikeShop: bikeShop, assembledBy: assembledBy, issue: issue};
if ( !firstName || !lastName || !streetAdress || !city || !state || !zip || !country || !email || !phoneNumber || !product || !bikeShop || !assembledBy ) {
req.flash('error', 'Please enter all of the fields with "*"');
return res.redirect('/pages/warranty#flash');
} else{
Warranty.create(newWarranry, function(err, newWarranry){
if(err){
console.log(err);
}else{
console.log(newWarranry);
req.flash('success', 'Thank you! The form was submitted successfully.');
return res.redirect('/pages/warranty#flash');
}
});
}
});
Warranty page form with a action="warranty" method="post" and enctype="multipart/form-data". All inputs with a name="warranty[...]"
<form action="warranty" method="post" enctype="multipart/form-data">
<b>Warranty Claim Form</b>
<h6>Rider Info</h6>
<div class="row">
<div>
<input type="" name="warranty[firstName]" placeholder="First Name*">
</div>
<div>
<input type="" name="warranty[lastName]" placeholder="Last Name*">
</div>
<div>
<input type="" name="warranty[streetAdress]" placeholder="Street Adress*">
</div>
<div>
<input type="" name="warranty[streetAdressLine]" placeholder="Street Adress Line 2">
</div>
<div>
<input name="warranty[city]" placeholder="City*">
</div>
<div>
<input type="" name="warranty[state]" placeholder="State/Province*">
</div>
<div>
<input type="" name="warranty[zip]" placeholder="ZIP/Postal code*">
</div>
<div>
<input type="" name="warranty[country]" placeholder="Country*">
</div>
<div>
<input type="" name="warranty[email]" placeholder="Email*">
</div>
<div>
<input type="" name="warranty[phoneNumber]" placeholder="Phone Number*">
</div>
</div>
<h6>Product Details</h6>
<div class="row">
<div>
<input name="warranty[product]" placeholder="Product (Ex. Titan II Frame)*">
</div>
<div>
<input type="" name="warranty[color]" placeholder="Color (Ex. Black)">
</div>
<div>
<input type="" name="warranty[size]" placeholder="Size (Ex. 20.5in / 175mm)">
</div>
<div>
<input type="" name="warranty[serialNumber]" placeholder="Serial number or date code (bikes, frames, forks, bars, cranks only)">
</div>
</div>
<h6>PURCHASE & ASSEMBLY DETAILS</h6>
<div class="row">
<div >
<input name="warranty[bikeShop]" placeholder="Bike Shop or online retailer*">
</div>
<div>
<input type="" name="warranty[modelYear]" placeholder="Model year (Ex.2015)">
</div>
<div >
<input type="" name="warranty[assembledBy]" placeholder="Assembled by myself/ bike shop">
</div>
</div>
<h6>PRODUCT ISSUE/DEFECT INFORMATION</h6>
<div class="row">
<div>
<textarea name="warranty[issue]"></textarea>
</div>
</div>
<h6>UPLOAD PROOF OF PURCHASE OR RECEIPT (SCAN OR MOBILE PHOTO)</h6>
<div>
<input type="file" name="purchasePhoto" id="fileOne">
<label for="fileOne">
<span>Upload file</span>
</label>
</div>
<h6>UPLOAD PRODUCT IMAGES, INCLUDING IMAGES OF DEFECTS</h6>
<div class="form-group">
<input type="file" name="defectPhoto" id="fileTwo">
<label for="fileTwo">
<span>Upload file</span>
</label>
</div>
<div>
<button type="submit"><p>Submit</p></button>
</div>
</form>

Move your code up into the multer callack
router.post("/warranty", function(req, res) {
upload(req, res, function(err) {
if (err) {
req.flash("error", "Multer Error");
return res.redirect("/pages/warranty#flash");
}
var {
firstName,
lastName,
streetAdress,
city,
state,
zip,
country,
email,
phoneNumber,
product,
bikeShop,
assembledBy,
issue
} = req.body.warranty;
var newWarranry = {
purchasePhoto: purchasePhoto,
defectPhoto: defectPhoto,
firstName: firstName,
lastName: lastName,
streetAdress: streetAdress,
city: city,
state: state,
zip: zip,
country: country,
email: email,
phoneNumber: phoneNumber,
product: product,
bikeShop: bikeShop,
assembledBy: assembledBy,
issue: issue
};
if (
!firstName ||
!lastName ||
!streetAdress ||
!city ||
!state ||
!zip ||
!country ||
!email ||
!phoneNumber ||
!product ||
!bikeShop ||
!assembledBy
) {
req.flash("error", 'Please enter all of the fields with "*"');
return res.redirect("/pages/warranty#flash");
} else {
Warranty.create(newWarranry, function(err, newWarranry) {
if (err) {
console.log(err);
} else {
console.log(newWarranry);
req.flash(
"success",
"Thank you! The form was submitted successfully."
);
return res.redirect("/pages/warranty#flash");
}
});
}
});
});

The problem is not with the way we send data, rather the multer library is unable to parse out the mutiple files from the form.
use multer.array method and it should work as expecteed, I tried out the same example you gave it seems to be working as expected.
Inside app.js, use app.use(upload.array()), where upload is an instance of multer.
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
let bodyParser = require('body-parser');
//******* require multer library ******
var multer = require('multer');
var upload = multer();
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// ***** this line important
app.use(upload.array());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
This will resolve the issue!!

My problem was that I used
app.use(bodyParser.urlencoded({extended: true}));
But I had to use
app.use(bodyParser.urlencoded({extended: false}));

Resource submitted could not be validated: Mailchimp

as this is my first question on StackOverflow, I do hope I provide you with enough details to the problem in order to fix it. If you need any further info, don't hesitate to ask.
In short, I'm trying to create a simple signup page for a newsletter that adds subscribers to Mailchimp.
In the terminal/command-line I get this message:
{
type: 'http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/',
title: 'Invalid Resource',
status: 400,
detail: "The resource submitted could not be validated. For field-specific details, see the 'errors' array.",
instance: '4d92a5b7-20fb-4f1c-be19-fbcd6548e745',
errors: [
{
field: '',
message: 'Required fields were not provided: email_address'
}
]
}
My HTML-body looks like this:
`
<img class="mb-4" src="images/logo.png" alt="" width="172" height="172">
<h1 class="h3 mb-3 font-weight-normal">Signup to our Newsletter</h1>
<input type="text" name="fName" class="form-control top" placeholder="First Name" required autofocus>
<input type="text" name="lName" class="form-control middle" placeholder="Last Name" required>
<input type="email" name="email" class="form-control bottom" placeholder="Email" required>
<button class="btn btn-lg btn-primary btn-block btn-sign-up" type="submit">Sign me up!</button>
<p class="mt-5 mb-3 text-muted">© PB Plus 2017-2020</p>
`
This is the 'POST' part of my Javascript:
app.post("/", function(req, res) {
const firstName = req.body.fName;
const lastName = req.body.lName;
const mail = req.body.email;
const data = {
members: [{
email_adress: mail,
status: "subscribed",
merge_fields: {
FNAME: firstName,
LNAME: lastName
}
}]
};
var jsonData = JSON.stringify(data);
const url = "https://us4.api.mailchimp.com/3.0/lists/fae76eccaf";
const options = {
method: "POST",
auth: "xavier1:6cbb8e0a03109b3b2ef74adc0127f986-us4"
}
const request = https.request(url, options, function(response) {
if (response.statusCode === 200) {
res.sendFile(__dirname + "/succes.html");
} else {
res.sendFile(__dirname + "/failure.html");
}
response.on("data", function(data) {
console.log(JSON.parse(data));
})
})
request.write(jsonData);
request.end();
})
If anyone knows what I did wrong, please let me know! Thanks in advance.

Well, After spending many hours figuring out what's wrong, I typed email_adress instead of email_address. Problem solved.

Required attribute is not working in registration form

I have a register form which works with Vue and local storage, when I submit the form blank or leave out an input the data is going to the local storage the same and not showing the HTML validation which is used by adding required attribute. Is there any way I can fix this problem by showing the HTML validation if the form has inputs which are empty or if the email do not have an at-sign inserted.
Form:
<form id="signup" method="post" v-on:submit.prevent>
<br>
<h1>Registration</h1>
<label for ="studentsorparents">Student or parents:</label>
<input type="text" id="studentsorparents" v-model="studentsorparents" required ="required">
<br><br>
<label for ="username">username:</label>
<input type="text" id="username" v-model="username" required ="required" v-text="null">
<br><br>
<label for="email">email: </label>
<input type="email" id="email" v-model='email' required ="required">
<br><br>
<label for="password">password: </label>
<input type="password" id="password" v-model='password' required ="required">
<br><br>
<button v-on:click='onSubmit' onclick="passuseremail()" >Register</button>
</form>
JS:
var signupApp = new Vue({
el: '#signup',
data: {
studentsorparents: '',
username: '',
email: '',
password: '',
},
methods: {
onSubmit: function () {
// check if the email already exists
var users = '';
var studentParent = this.studentsorparents;
var newUser = this.username;
var newEmail = this.email;
if (localStorage.getItem('users')) { // 'users' is an array of objects
users = JSON.parse(localStorage.getItem('users'));
}
if (users) {
if (users.some(function (user) {
return user.username === newUser
})) {
alert('Account already exits');
return;
}
if (users) {
if (users.some(function (user) {
return user.email === newEmail
})) {
alert('Account already exits');
return;
} else {
alert('Account created');
window.location.href = 'user-profile.html' + '#' + newUser;
}
}
users.push({
'studentsorparents': studentParent,
'username': newUser,
'email': newEmail,
'password': this.password
});
localStorage.setItem('users', JSON.stringify(users));
} else {
users = [{
'studentparents': studentParent,
'username': newUser,
'email': newEmail,
'password': this.password
}];
localStorage.setItem('users', JSON.stringify(users));
}
}
}
});
function passuseremail()
{
var username = document.getElementById('username').value;
localStorage.setItem("user-check", username);
var studentsorparents=document.getElementById('studentsorparents').value;
localStorage.setItem("students-parents-check", studentsorparents)
var email=document.getElementById('email').value;
localStorage.setItem("email-check", email)
return false
}

You need to add button type='submit' to the submit button else it will behave like just any other button.
<button v-on:click='onSubmit' onclick="passuseremail()" type="submit">Register</button>
It then only act as submit button else it will just trigger the button eventlisteners attached.

You have spaces after required attributes in your inputs:
required ="required"
It's incorrect and it will not work; just write it like this:
<input type=email id=email v-model=email required>
You can validate email like this:
const email_re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
if (email_re.test( email.value )) {
/* email is valid */
} else {
/* email is not valid */
}

You can add a class to the button like jsValidateRegister.
And the add the code
First declare a variable
isPageValid = true
Then in add the following code for validation so the isPageValid is set to false inside the passuseremail();
$(".jsValidateRegister").click(function ()
{
passuseremail();
});
In the onSubmit: function () check
isPageValid === true

Now to pass form values from React to Node server

I have an EmailList component in react with a form that calls EmailServer.js 'NodeMailer' on the server. I am able to send emails with test subject and message defined in the MailServer.js file statically. How can I pass the subject and message as state to be used in NodeMailer.
EmailList Component
var EmailList = React.createClass({
getInitialState() {
return {
subject: '',
message: ''
}
},
subjectChange(e) {
this.setState({subject: e.target.value})
},
messageChange(e) {
this.setState({message: e.target.value})
},
render() {
return (
<div>
<div>
<Breadcrumb title={this.props.route.title + ' - ' + this.props.location.state.title} />
</div>
<div className='ui-outer'>
<h2 className='text-center'>Email List</h2>
<form action='../EmailServer.js'>
<div className="form-group">
<label htmlFor="subject">Subject</label>
<input type="text" name="subject" className="form-control" onChange={this.subjectChange} value={this.state.subject} />
</div>
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea rows="8" name="message" className="form-control" onChange={this.messageChange} value={this.state.message} />
</div>
<button type="submit" className="btn btn-success">Submit</button>
</form>
</div>
</div>
)
}
})
EmailServer.js
var nodemailer = require('nodemailer');
// Create reusable transporter object using the default SMTP transport
var transporter = nodemailer.createTransport('smtps://user%40gmail.com:pass#smtp.gmail.com');
// Setup e-mail data with unicode symbols
var mailOptions = {
from: 'em#il.com',
to: 'test#email.com',
subject: 'Hello', // <----Pass Subject State HERE
text: 'Hello World', // <-----Pass Message state HERE
html: '<b>Hello World</b>' // <-----Pass Message State HERE
};
// Send email with defined transport object
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
return console.log(error);
}
console.log('Message Sent: ' + info.response);
});

If i got your issue correct, there might be a number of issues here.
You might want to design your code on server side to handle email sending with nodejs express server requested from client.
app.get('/sendemail', function(req, res) {here you go and read request posted data/json})
Where app is nodejs express server instance.
Let react handler to submit a request with one of async http clients (like axios or jquery).
sendEmail: function(e){
e.preventDefault();
$.post(
"/sendemail",{
email: this.state.email,
password: this.state.password,
first_name: this.state.first_name,
last_name: this.state.last_name
}, function(result){
//track result here
});
}
Set form to be submitted with react function:
<form onSubmit={this.sendEmail} >...</form>

Need help getting my nodemailer to work

I have been trying to set up nodemailer with my static site. I am having trouble getting require to work at the moment. I know I am doing something wrong - I just need another set of eyes to assist.
HTML:
<form name="betaForm" action="/betaForm" method="post">
<div class="form-group" >
<label for="contactName" style="float:left;">Contact Name</label>
<input type="test" name="contactName" value="" class="form-control" id="contactName" >
</div>
<div class="form-group">
<label for="practiceName" style="float:left;">Practice Name</label>
<input type="test" name="practiceName" value="" class="form-control" id="practiceName">
</div>
<div class="form-group">
<label for="phone1" style="float:left;">Phone</label>
<input type="test" name="phone1" value="" class="form-control" id="phone1">
</div>
<div class="form-group">
<label for="email1" style="float:left;">Email</label>
<input type="email" name="email1" value="" class="form-control" id="email1" >
</div>
<button type="submit" value="Send" class="btn btn-default">Submit</button>
</form>
SERVER.JS
var express=require('express');
var nodemailer = require("nodemailer");
var app = express();
app.get('/',function(req,res){
res.sendfile('www/index.html');
});
app.listen(3000,function(){
console.log("Express Started on Port 3000");
});
SENDMAIL.JS
var app = require('express');
var nodemailer = require('nodemailer');
app.get('/betaForm', routes.betaForm);
app.post('/betaForm', function (req, res) {
var mailOpts, smtpTrans;
//Setup Nodemailer transport, I chose gmail. Create an application-specific password to avoid problems.
smtpTrans = nodemailer.createTransport('SMTP', {
service: 'Gmail',
auth: {
user: "test#gmail.com",
pass: "password"
}
});
//Mail options
mailOpts = {
from: req.body.contactName + ' <' + req.body.email1 + '>', //grab form data from the request body object
to: 'test#gmail.com',
subject: ' beta contact form',
text: req.body.contactName,
};
smtpTrans.sendMail(mailOpts, function (error, response) {
//Email not sent
if (error) {
res.render('betaForm', { title: ' beta contact', msg: 'Error occured, message not sent.', err: true, page: 'contact' })
}
//Yay!! Email sent
else {
res.render('betaForm', { title: ' beta contact', msg: 'Message sent! Thank you.', err: false, page: 'contact' })
}
});
});
ROUTES.JS
var exports = module.exports = {};
exports.betaForm = function(req, res){
res.render('betaForm', { title: 'beta contact form', page: '/#beta' })
};

Sorry I'm not allowed to write comments.
Do you use the bodyparser?