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><a href="#">Login</a></li>
<li><a href="#">Sign up</a></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>
