file upload error in node.js - node.js

Question

To upload a file in node.js express I am using multer module. The code itself in a separate file is working like charm. but if I place the same code in my project(html code in one file and routing in another file) its not working.
Html code:
<form method="post" action="uploadgallerypic" enctype="multipart/form-data" >
<input type="file" name="gallerypic" />
<input type="submit" value="upload" />
</form>
corresponding routes.js code
app.use(multer({ dest: './uploads'}));
app.post('/uploadgallerypic', function(req, res) {
console.log("New photo added");
console.log(req.files);
fs.readFile(req.files.gallerypic.path, function(err, data) {
if(err) {
console.log("Error in reading pic from disk");
}
else {
fs.writeFile('newpic.jpg', data, 'binary', function(err) {
console.log("Error in writing pic to disk");
});
}
});
});
After clicking on submit the very first statement console.log('New photo added') which prints to console is not executing. Browser simply rotates and finally says 'No Data received'. But If I create a single file with these two blocks then its working fine.
var express = require('express');
var multer = require('multer');
var app = express();
var form = "<form method=\"post\" action=\"uploadgallerypic\" enctype=\"multipart/form-data\" >" +
"<input type=\"file\" name=\"gallerypic\" />" +
"<input type=\"submit\" value=\"upload\" />" +
"</form>";
app.use(multer({dest:'./uploads/'}));
app.get('/', function (req, res){
res.writeHead(200, {'Content-Type': 'text/html' });
res.end(form);
});
var fs = require('fs');
app.post('/uploadgallerypic', function(req, res) {
console.log("New photo added");
console.log(req.files);
fs.readFile(req.files.gallerypic.path, function(err, data) {
if(err) {
console.log("Error in reading pic from disk");
}
else {
fs.writeFile('newpic.jpg', data, 'binary', function(err) {
if(err) {
console.log("Error in writing pic to disk");
}
});
}
});
res.redirect('/profile');
});
app.listen(8080);
please tell me what I am missing here.
Edit#1
I removed app.post('/uploadgallerypic', function(req, res) block from routes.ejs to see the error "Cannot POST /uploadgallerypic" but I am not getting such error, browser simply rotating and says no data received. If I remove the enctype='multipart/form-data' satement from html code then I am getting the exact error "Cannot POST /uploadgallerypic". Is there any problem in using enctype='multipart/form-data'.
Please help me.

Answer 1

I think this might be minor typos...there are at least three things in the 'broken' example that are wrong/different from your 'working' example.
1) Is the dest value good?
In your broken example, change this line:
app.use(multer({ dest: './uploads'}));
...to this:
app.use(multer({ dest: './uploads/'}));
(Note the addition of the trailing slash on the dest path. Maybe not important, but I didn't go read the multer source to see if it matters. I just know it matters in some other situations, such as with some situations with grunt.)
2) Your app.post looks off:
Change this:
app.post('/uploadgallerypic', function(err, res) {
...to this?
app.post('/uploadgallerypic', function(req, res) {
(was there a reason you had err in there?)
3) And related to #2...
From this:
fs.readFile(req.files.gallerypic.path, function(req, data) {
...to this:
fs.readFile(req.files.gallerypic.path, function(err, data) {
(So...did you copy the code around or rewrite it by hand and accidentally swap which argument goes where?)

Answer 2

don't directly inject multer into express.
like this way
app.use(multer({ dest: './uploads/'}));
instead
1) create object of multer
var Upload = multer({
storage: storage
}).any('gallerypic');
2) create storage for gallerypic (upload file )
// storage for upload file.
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './file');
},
filename: function (req, file, callback) {
callback(null, file.originalname);
}
});
3) define your route
router.post('/uploadgallerypic', postData);
4) Invoke multer in your route.
function postData(req,res){
Upload(req, res, function (error) {
if (error) {
res.status(400).send(error);
}
console.log("New photo added");
console.log(req.files);
fs.readFile(req.files.gallerypic.path, function(err, data) {
if(err) {
console.log("Error in reading pic from disk");
}
else {
fs.writeFile('newpic.jpg', data, 'binary', function(err) {
if(err) {
console.log("Error in writing pic to disk");
}
});
}
});
res.redirect('/profile');
})
}
refer this like : How to return id of uploaded file (upload with multer in nodejs express app)