I am getting this error and I have no idea why its giving me that error, I have checked all the tutorials/similar questions related to this and nothing has worked. Can someone please help point me in the right direction.
Thank you,
Error:
Unexpected field
Error: Unexpected field
at makeError (C:\Users\Administrator\Desktop\express-cc-master\node_modules\multer\lib\make-error.js:12:13)
at wrappedFileFilter (C:\Users\Administrator\Desktop\express-cc-master\node_modules\multer\index.js:40:19)
Profile.js
var aws = require('aws-sdk')
var express = require('express');
var router = express.Router();
var multer = require('multer')
var multerS3 = require('multer-s3')
aws.config.loadFromPath('./config.json');
aws.config.update({
signatureVersion: 'v4'
});
var s3 = new aws.S3({});
var upload = multer({
storage: multerS3({
s3: s3,
bucket: 'raytestbucket123',
acl: 'public-read',
metadata: function (req, file, cb) {
cb(null, {fieldName: file.fieldname});
},
key: function (req, file, cb) {
cb(null, Date.now()+file.originalname)
}
})
})
router.get('/profile', function(req, res){
res.render('profile', { title: 'Profile' });
});
router.post('/profile', upload.single('file'), function(req, res, next){
res.send(req.files);
console.log(req.files);
})
module.exports = router;
Profile.hbs
{{> header }}
<body>
<form action="/profile" method="POST" enctype="multipart/form-data">
File to upload to S3:
<input name="file" type="file">
<br>
<input type="submit" value="Upload File to S3">
</form>
</body>
<div class="container">
<h2>Profile</h2>
</div>
I found the problem myself.
Instead of
res.send(req.files);
console.log(req.files);
It should be
res.send(req.file);
console.log(req.file);
Related
I have spent some time tring to figure out why the code for my passport local authentication is not functioning properly but I haven't
been able. The program has username field and password field. So people can register with their username and password. The issue in the code lies
in the login section. If I login with any registered username and password, the browser displays Data not found instead of displaying
the content of the redirected page. Please, what could be responsible for this error. The code for the program is shown below.
Auth schema file:
const mongoose = require("mongoose");
const passportLocalMongoose = require("passport-local-mongoose");
const userSchema = mongoose.Schema({
username: {
type: String,
required: true
},
password: String,
});
userSchema.plugin(passportLocalMongoose);
const User = mongoose.model("User", userSchema);
module.exports = User;
Setup
const express = require("express");
const Post = require("./../models/post");
const User = require("./../models/user")
//Connecting mongoose with mongodb
const mongoDB = "mongodb://localhost/blog";
mongoose.connect("mongodb://localhost/blog", {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
});
const db = mongoose.connection;
//Adding success or error message to node console
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", function(){
console.log("Connection successful");
});
const router = express.Router();
const bodyParser = require("body-parser");
router.use(bodyParser.json());
//const User = require("../models/user");
var passport = require("passport");
var localStrategy = require("passport-local").Strategy;
//Passport configuration
router.use(require("express-session")({
secret: "A programmer",
resave: false,
saveUninitialized: false
}));
router.use(passport.initialize());
router.use(passport.session());
passport.use(new localStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
Auth routes:
router.get("/new", isLoggedIn, (req, res) => {
console.log(req.params)
res.render("new", {post: new Post()});
})
router.get("/register", async(req, res)=>{
res.render("register");
})
router.post("/register", function(req, res){
req.body.username
req.body.password
var newUser = new User ({username: req.body.username})
User.register(newUser, req.body.password, function (err, user){
if(err){
console.log(err)
return res.render("register")
}
passport.authenticate("local")(req, res, function(){
res.redirect("login");
})
})
})
router.get("/login", function(req, res){
res.render("login");
});
router.post("/login", passport.authenticate("local", {
successRedirect: "new",
failureRedirect: "login",
}), (req, res, next)=>{
})
router.get("/logout", (req, res)=>{
req.logout();
res.redirect("login")
})
function isLoggedIn(req, res, next){
if(req.isAuthenticated()){
return next
}
res.redirect("login")
}
Login template file (login.ejs)
<%- include ('partials/header') %>
<div class="container mb-4 mt-4">
<div>
<span class="loginIcon float-right"><img src="/public/images/e73b6446-110b-413d-9c0a-1d05fa9acc6e.jfif" alt="login icon"></span>
<h2 class="text-center">Login</h2>
</div>
<form action="posts/login" method="POST">
<div class="form-group">
<label for="author">Username</label>
<input required type="text" name="username" class="form-control" id="username" placeholder="Please enter your Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input required type="password" name="password" class="form-control" id="title" placeholder="Please enter your password">
</div>
<div class="text-center">
<button type="submit" class="btn btn-outline-primary btn-lg btn-block mb-2">Submit</button>
Cancel
</div>
</form>
<div class="text-center">Sign up if you don't have an account</div>
</div>
<%- include ('partials/footer') %>
After some time I have been able to find out Why the browser was displaying data not found when a registered user tried to login. The issue was from the middlewere. And since failureRedirect was working appropriately, the issue came from the next method of the middlewere. It should be:
function isLoggedIn(req, res, next){
if(req.isAuthenticated()){
return next()
}
res.redirect("login")
}
The issue occurs when the parentesis at the end of the returned next function is omitted. Hence, it should be return next() not return next
My goal is to send emails with nodemailer, so I need to do that from my backend. I have a form in my vue component and I'm trying to send the data to http://localhost:3000/ but I get an error : POST http://localhost:3000/ 404 (Not Found). I'm using Axios to do that.
When I make a get request I get a response without any errors, but I cannot make a post request.
First, I created a server just to deploy my site on heroku (responsive proposes), but now I'm not sure if my backend configuration is ok to receive data from my client side. I looked around but I didn't find a specific answer to my problem.
Contact.vue:
<form class="form" #submit.prevent="sendData">
<ul>
<li>
<label for="name">Name</label>
<input type="text" id="name" name="user_name" v-model="name">
</li>
<li>
<label for="mail">E-mail</label>
<input type="email" id="mail" name="user_email" v-model="email">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message" v-model="message"></textarea>
</li>
</ul>
<button type="submit" class="btn">Send</button>
</form>
<script>
import * as axios from 'axios';
export default {
data(){
return{
name: "",
email: "",
message: ""
}
},
methods: {
sendData(){
console.log(this.name, this.email,this.message);
axios.post("http://localhost:3000/",{
name: this.name,
email: this.email,
message: this.message
})
.then(response => {
console.log(response)
})
.catch(error =>{
this.error = error;
})
}
}
}
</script>
My server.js:
const express = require('express');
const port = process.env.PORT || 3000;
var cors = require('cors')
const app = express();
app.use(cors())
app.use(express.static(__dirname + "/dist/"));
app.get("/", function(req, res) {
res.sendfile(__dirname + '/dist/index.html');
})
app.listen(port);
console.log('Server started...');
You are sending a POST request to http://localhost:3000/, but this is set as a GET in your server. So try:
app.post("/", function(req, res) {
res.sendfile(__dirname + '/dist/index.html');
})
I am using nodemailer to achieve myself sending emails from contact form.
My app.js looks like this
app.post('/jobs/join-us', (req, res) => {
console.log(req.body); //to return body
const output = `
<p>You have a new message from contact form.</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: 'xx', // generated ethereal user
pass: 'xx',
},
tls: {
rejectUnauthorized: false
}
});
// setup email data with unicode symbols
let mailOptions = {
from: 'xx', // sender address
to: 'xx', // list of receivers
subject: 'Contact Request', // Subject line
text: 'Hello world?', // plain text body
html: output // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.end("error");
} else {
console.log('Message sent: %s', info.messageId);
//console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
res.sendStatus(200);
}
});
});
Could anybody help me? I also try something like console.log(req) before const output but that didnt' return me anything viable.
This is my contact form itself, the POST request returns 200.
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[role]" id="job_form_role" />
<label class="flying-label required" for="job_form_role">Role</label>
</div>
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[email]" id="job_form_email" />
<label class="flying-label required" for="job_form_email">E-mail</label>
</div>
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[phone_number]" id="job_form_phone_number" />
<label class="flying-label" for="job_form_phone_number">Phone number</label>
</div>
<div class='input-wrapper'>
<label class="label required" for="job_form_cv">CV (PDF)</label>
<input type="file" name="job_form[cv]" id="job_form_cv" />
</div>
<div class='input-wrapper-space-top'>
<input type="hidden" name="job_form[referer]" id="job_form_referer" />
<input type="submit" name="commit" value="Submit Job Application" class="btn-round btn-primary" />
</div>
My app.js middleware functions:'
const express = require('express')
var app = express();
var path = require('path')
const nodemon = require('nodemon')
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
// Static folder
app.use(express.static('public'))
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json())
The req.body is by default undefined so the fact that you get an empty object means that you are not populating the req.body with a body-parser and/or multer. This is also supported by the fact that the error-catching if statement does not return an error in the console so the req.body is there and it is an empty object. Try the following express middleware before your app.post and update the app.post as follows:
var app = require('express')();
var bodyParser = require('body-parser');
var multer = require('multer'); // v1.0.5
var upload = multer(); // for parsing multipart/form-data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/jobs/join-us', upload.array(), function (req, res, next) {
console.log(req.body);
res.json(req.body);
});
I've a trival web app up and running, where the use case is to interact with a single form:
Input text into input
Check a radio button
Upload a file
The server processes file upload, and saves to the directory.
However, when it comes to extract data from the request body, i'm running into problems, namely a 'cannot select property' error.
I'm using Express, with Bodyparser and Multer middleware. Please find source code below
var express = require('express'),
bodyParser = require('body-parser'),
multer = require('multer'),
MongoClient = require('mongodb').MongoClient,
assert = require('assert'),
formidable = require('express-formidable');
//var multipart = require('connect-multiparty');
var app = express();
//app.use(bodyParser.urlencoded({extended: true}));
//app.use(bodyParser.json());
//app.use(formidable.parse());
//app.use(multer);
//app.use(require('connect').bodyParser());
//app.use(bodyParser.json()); // to support JSON bodies
//app.use(bodyParser.urlencoded({ extended: true })); // to support URL-encoded bodies
//app.use(bodyParser.json());
//app.use(bodyParser.urlencoded({ extended: true }));
// -------------------------------------------------
// file storage - multer.
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
// save the file name with date and CAT_TYPE, not cat type is not operative.
callback(null, file.fieldname + '-' + Date.now() + 'CAT_TYPE');
}
});
var upload = multer({ storage : storage}).single('userPhoto');
// -------------------------------------------------
// handle post data - file upload and get.cat
app.post('/upload', function(req,res){
console.log("request to upload image recevied . . .");
console.log("upload in progress . . .");
console.log("upload complete . . .");
console.log("req.catype() = " + req.cat);
console.log("req.catype() = " + req.body.cat);
console.log("req.catype() = " + req.body.filename);
// handle file persistence to disk.
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
app.post("/", function (req, res) {
console.log(req.body.user.name)
});
app.get('/',function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.get('/hello',function(req,res){
res.sendFile(__dirname + "/hello.html");
});
var listener = app.listen(3000, function(){
console.log('listening on port ' + listener.address().port);
});
<head>
<script src="js/blueimp-gallery.min.js" async></script>
<script src="js/bootstrap.min.js" async></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
<script src="js/script.js" async></script>
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="main">
<div class="navbar-wrapper" style="border: 12px solid black;">
<ul>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
<div>
<form
id = "uploadForm"
enctype = "multipart/form-data"
action = "/upload"
method = "post">
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
<label>filename</label>
<input type="text" value="input filename here" name="filename">
<label>travel</label>
<input type="radio" value="travel" name="cat">
<label>food</label>
<input type="radio" value="food" name="cat">
<label>community</label>
<input type="radio" value="community" name="cat">
</form>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="filter">
<p>filter by content here.</p>
</div>
</body>
In short: bodyparser and multer cannot handle processing multipart uploads in the case of file data and form fields. This is achievable using other middleware ( I have successfully got this case working using formidable)
while submitting a form without using ajax I could see "message sent successfully" in my http://localhost/ss (working fine as it should)
But while submitting a form using ajax $.post() response is not receiving to $.post() method. I couldn't find any reason..
Please note: same code works fine with php
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#buttons").click(function() {
$.post("http://localhost:3000/ss", {
sendemail: $("#email").val(),
sendname: $("#UserName").val(),
sendpass: $("#Password").val()
}, function(res) {
alert(res);
});
});
});
</script>
<body>
<div class="forms">
<form>
<div class="formdiv">
<label>User Email</label>
<input type="email" id="email" name="email" />
</div>
<div class="formdiv">
<label>User Name</label>
<input type="text" name="UserName" id="UserName" />
</div>
<div class="formdiv">
<label>User Password</label>
<input type="password" name="Password" id="Password" />
</div>
</form>
<div style="background:green;padding:15px;" id="buttons">send</div>
</div>
</body>
</html>
parse.js
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.listen(3000, function(req, res)
{
console.log("express is listening to port 3000");
});
app.use(bodyParser.urlencoded({
extended: true
}))
app.use(bodyParser.json());
app.get("/", function(req, res)
{
res.send("hai");
});
app.post("/ss", function(req, res)
{
var ss = req.body.sendemail;
if (ss != undefined)
{
console.log(ss);
res.send("message sent successfully");
}
else
{
res.send("error occurred");
}
});
console prints user's email address "The only problem is response to html"
Code looks okey by itself, although there's one issue, with (i suspect) the way you use it. You're not allowing for cross-origin sharing. In other words, if you'd try to run this code on another domain, you'd receive a CORS error, as server refuses to respond to the client.
Therefore, I suspect you're loading the .html file either:
As local, html file.
Are running it from different domain
both of those would (and are) returning mentioned above error. That's why you're not receiving the response, so you're not seeing the alert message.
In order to bypass the issue, you can either:
Enable CORS support
Render HTML file through the server (so request will be coming from the same domain).
Example here:
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
var path = require("path");
...
app.get("/", function(req, res)
{
res.sendFile(path.join(__dirname + '/index.html'));
});
app.post("/signup", function(req, res)
{
var email = req.body.email;
if (!email)
{
return res.json({
message: "error occurred"
});
}
res.json({
success: true;
});
});