I am working on a project where I need to save a file in a folder,
Here is my relevant code :
<div class="content ui segment" id="two">
<form method="POST" action = "/documents/uploadDoc" enctype="multipart/form-data">
<h2>Upload new file</h2>
<br>
<input class='button' type="file" id="myFile" name="filename">
<input type="submit" name = "Submit">
</form>
</div>
My multer code :
var multer = require('multer');
const fileStorage = multer.diskStorage({
destination : (req,file,cb) => {
cb(null,'tempSave/');
},
filename : (req,file,cb) => {
cb(null,file.originalname)
}
})
const saveFile = multer({ storage : fileStorage});
And my router :
router.post("/uploadDoc", saveFile.single('filename') ,function(req,res,next){
console.log("Uploading");
console.log(req.body);
var fileName = req.body.filename;
console.log(fileName);
});
There isn't any error, but the file is not getting saved in the required place. Please help
Can you check do you have tempSave folder in the root of your server directory? If not, create it and try it again.
Related
I have tried to do file upload in express js project. used ejs as default view engine.
file not uploaded to /uploads folder.
here is my code below.
in app.js file have imported required packages
in routes/index.js route file created route
router.get('/index',indexController.index);
router.post('/insertion',indexController.insertion);
module.exports = router;
in controllers/indexController.js
const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
destination:function(req,file,cb)
{
cb(null,'./../uploads');
},
filename:function(req,file,cb)
{
callback(null,file.originalname);
}
});
var upload = multer({storage:storage}).single('resume');
exports.insertion = function(req,res)
{
var file = req.files.resume;
upload(req,res,function(err){
if(err)
{
console.log(err);
}else{
console.log('file uploaded successfully!');
}
});
res.end();
}
in views/registration.ejs file
<form name="registration" action="/insertion" enctype="multipart/form-data" method="POST">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label>Resume</label>
<input type="file" name="resume" class="form-control" >
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</div>
</form>
file uploading not working .. i need to upload the file under uploads folder which is created in root directory
Basically I want to upload a csv file from local computer and parse it in the backend to do required operations. I'm attaching the csv file in the front end. Checked that its not empty. But I'm unable to fetch the same in the server.
Is there something I'm missing or doing in the wrong way?
Here is what I have tried till now.
Front end code:
<form id="myForm" method="POST" enctype="multipart/form-data" action='/testcsv' >
<input type="file" id="file" />
<input type="submit" value="Submit">
</form>
Backend Code:
var express = require('express');
var methodOverride = require('method-override');
var http = require('follow-redirects').http;
var formidable = require('formidable');
var app = express();
const fs = require('fs');
app.use(methodOverride('_method'));
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
app.post('/testcsv', requireLogin, function(req, res) {
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
console.log(err);
console.log(fields);
console.log(files);
});
});
Log Output:
null
{}
{}
This problem is caused by Frontend code, it has nothing to do with Backend code (formidable).
For the following console.log statement:
console.log(err);
console.log(fields);
console.log(files);
err is null because there is no error.
fields is {} because in the form, all input fields are file selector. fields in formidable only indicate plain input field, such as <input type="text">.
files is {} because the name of file selector in the form is missing.
To get expected value, here is an example form:
<form id="myForm" method="POST" enctype="multipart/form-data" action='/testcsv' >
<input type="text" name="testtext" />
<input type="file" id="file" name="testfile" />
<input type="submit" value="Submit">
</form>
The console.log result for above form would be:
null
{ testtext: '....' }
{ testfile: File....}
I am writing a file upload demo by multer in node.js.When form submit, I can get the file information, but it does not have path property.
ejs file
<form method="post" enctype="multipart/form-data">
<p>
<input type="text" name="name" placeholder="name">
</p>
<p>
<input type="file" name="photo">
</p>
<p>
<input type="submit" value="Upload">
</p>
</form>
js
function (req, res ,next) {
var img = req.file;
var name = req.body.name || img.originalname;
var path = require('path').join(dir, name);
console.log(img);
}
multer config
var multer = require('multer')();
app.post('/upload',multer.single('photo'),photos.submit(app.get('photos')));
req.file
You are using memStorage for storing file. That's why there is no path in req.file. Try changing this to: var upload = multer({ dest: 'uploads/' }). Replace uploads/ with directory where you want to upload your file.
Can someone please tell me what's wrong in my below code? I've been debugging this for hours but no luck.
var multer = require('multer')
var upload = multer({ dest: '/uploads/' })
router.post('/image', upload.array('file', 12) , function(req, res) {
console.log(req.body, req.file);
// I got this here {} undefined
});
cilent
<form method="post" action="/products/image" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
I noticed that on the server you use /image but on the client /products/image. It could be the problem, if not - please share all your server source code.
try to use req.files with 's', instead of req.file
I am trying to implement file uploads with node.js and the multer middleware, but it doesn't seem to work. This is my code:
var express = require('express');
var multer = require('multer');
var done = false;
var app = express();
app.use(multer( {dest:'./uploads/',
onFileUploadStart : function(file){
console.log('File recieved:');
console.log(file);
},
onFileUploadData:function (file,data){
console.log('Data recieved');
},
onParseEnd: function(req,next){
next();
}
}));
app.use(express.static(__dirname+"/public"));
app.post('/upload',require(__dirname+'/upload.js').upload);
app.listen(3000);
My form looks like this:
<html>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name ="file">
<input type="submit" value="Upload selected file to server">
</form>
</body>
</html>
And upload.js looks like this:
exports.upload = function (req,res)
{
console.dir(req.files);
};
I think the problem is that my form is being submitted with "application/x-www-form-urlencoded" in the Content-Type header instead of "multipart/form-data", since this is what appears when I use Fiddler to monitor the request, but I have no idea why. Can anyone shed any light on this?
I got it working by adding an accept attribute to my tag in my html. I don't know why in some examples this is not used.
Here's the code for my entire form:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name ="file" accept="application/x-zip-compressed,image/*">
<input type="submit" value="Upload selected file to server">
</form>
Check the entire project eventually: https://github.com/tutiplain/quickupload
I can see you are doing everything right. I used multer sometime back, you can look into my working implementation here. In this EJS file i have an image upload functionality and then i wrote some logic to store the file to some other location.
Make sure you have appropriate router, for example you can use router.post(..)
exports.upload= function(req,res){
// get the temporary location of the file
var tmp_path = req.files.file.path;
// set where the file should actually exists - in this case it is in the "images" directory
var target_path = '/..provide path to store photos../' + req.files.file.name;
// move the file from the temporary location to the intended location
fs.rename(tmp_path, target_path, function(err) {
if (err) throw err;
// delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
fs.unlink(tmp_path, function() {
if (err) {
throw err;
}else{
//response logic ...
};
});
});
};
You can try this. It works for me. If any issues then let me know
var multer = require('multer');
var upload = multer({ dest: './uploads' });
router.post('/register',upload.single('profileimage'),function(req,res,next){
if (req.file) {
console.log('Uploading File');
var profileImageOriginlName=req.file.originalname;
var profileImageName=req.file.name;
var profileImageMime=req.file.mimetype;
var profileImagePath=req.file.path;
var profileImageExt=req.file.extension;
var profileImageSize=req.file.size;
}
else
{
var profileImageName='noimage.png';
}
});