Menu
I am trying to use multer to upload a file from an html form on the client side to the server side, the multer module processes the file on the server side.
The thing here is that everything is ok, because i get the 200 ok response from the server, but the file should be uploaded to my fileSystem and i can't see it.
This is my html form
<template>
<div id="app">
<form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
<h2>Select a file</h2>
<input name="curriculum" id="inputVal" type="file">
<button type="submit">Send</button>
</form>
</div>
</template>
my server side code
var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
var multer = require('multer')
var storage = multer.diskStorage({
destination: function(req,file,callback) {
callback(null, '../files');
},
filename: function(req,file,callback) {
callback(null,Date.now() + file,callback);
}
})
var upload = multer({ storage: storage }).single('curriculum');
router.post('/upload', function (req, res, next) {
upload(req,res, function(err){
if(err) {
return res.status(404).send("a error ocurred");
}
res.status(200).send("file uploaded");
});
});
module.exports = router;
UPDATE
I changed my solution based on the npm multer website (server side)
var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
var multer = require('multer')
var upload = multer({ dest: 'uploads/' });
router.post('/upload',upload.single('curriculum') ,function (req, res, next) {
console.log(req.files);
});
module.exports = router;
Ty for the help!
703
For those having an issue with multer not uploading the file to the destination folder, I found it useful to use the absolute path, rather than a relative path.
Something like this (Absolute path to the node js root directory)
public/images/pics
Is better than (Relative path)
../public/images/pics
or (Relative path)
./public/images/pics
That worked for me
105
answered Dec 14 '25 05:12
You are not specifying the file you want to upload. Put the name of the input.
router.post('/upload', upload.single('curriculum'), function (req, res, next) {
if(err) {
console.log(err);
return res.status(404).send("a error ocurred");
}
console.log(req.file);
res.status(200).send("file uploaded");
});
Also in your file name, make sure your file ends with an extension such as .png or .jpeg otherwise you will see bunch of bytecodes that do not mean anything.
You can either get the exact file name that your client gives you by using file.originalname
cb(null, file.originalname)
Or you can add it explicitly.
callback(null, file.fieldname + '-' + Date.now() + '.png')
You might want to remove the third parameter of callback(null,Date.now() + file,callback) which is callback as it might be bugging the program, and change + file to something like + file.originalname because file is an object and the computer might be having problems attending an object to a file name.
UPDATE
Main NODEJS
var express = require('express')
var multer = require('multer')
var app = express()
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/uploads') //you tell where to upload the files,
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.png')
}
})
var upload = multer({storage: storage,
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
});
app.set('view engine', 'ejs');
app.get('/', function(req, res, next){
res.render('mult'); //our html document
})
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
console.log(req.file);
return false;
})
HTML FORM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post">
<input type="file" name="avatar" value="">
<input type="submit" name="" value="ssss">
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With