Reputation: 199
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!
Upvotes: 2
Views: 14750
Reputation: 1
import multer from "multer";
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "E:/webDevelopment/chai backend" + "/public/temp");
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
export const upload = multer({
storage,
});
if your are using all this code inside the middleware file then remember always write all directory in destination as I have written .
their is a problem if you are using multer in another file , it doesn't identify where the public/temp file is located .
Upvotes: 0
Reputation: 91
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
Upvotes: 8
Reputation: 2826
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>
Upvotes: 3