We Keep Coding

Express Multer - req.file returns undefined

I am trying to upload image file via multer and I dont understand why req.file returns undefined
I have set up form encType to mulipart/form-data, input name matches with the upload.single() parameter. I have also tried to set header multipart/form-data via axios but also did not help
auth.js
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
const fileName = file.originalname.toLowerCase().split(" ").join("-");
cb(null, Date.now() + "-" + fileName);
},
});
const upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpg" ||
file.mimetype == "image/jpeg"
) {
cb(null, true);
} else {
cb(null, false);
return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
}
},
});
router.post(
"/changeAvatar",
upload.single("avatar"),
userAuth,
async (req, res, next) => {
try {
console.log(req.file);
const url =
req.protocol + "://" + req.get("host") + "/public/" + req.file.filename;
const user = await User.findByIdAndUpdate(req.user.id, { image: url });
res.json({ user });
} catch (err) {
res.json({ err });
}
}
);
react form
<form
onSubmit={handlePostAvatar}
encType="multipart/form-data"
>
<input
// style={{ display: "none" }}
type="file"
name="avatar"
id="avatar"
// ref={avatarFileRef}
onChange={changeHandle}
/>
<button style={{ cursor: "pointer" }}>Save</button>
</form>
post request
const handlePostAvatar = async (e) => {
e.preventDefault();
try {
const res = await axios.post("/api/auth/changeAvatar");
console.log(res);
} catch (err) {
console.log(err);
}
};

Multer next() funtion not a funtion

I'm developing this server based on this tutorial, https://www.bezkoder.com/angular-12-node-js-express-mysql/ now I'm in need of add some file upload functionalities, using Multer. but each time I try to us it, I get this error:
/home/miguel/Documents/angular_projs/examples/server/node_modules/multer/lib/make-middleware.js:45
next(err)
^
TypeError: next is not a function
at done (/home/miguel/Documents/angular_projs/examples/server/node_modules/multer/lib/make-middleware.js:45:7)
when i use it here:
//File upload configuration
const maxSize = 2 * 1024 * 1024;
let storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "/resources/static/assets/uploads/");
},
filename: (req, file, cb) => {
console.log(file.originalname);
cb(null, file.originalname);
},
});
let uploadFile = multer({
storage: storage,
limits: { fileSize: maxSize },
}).single("file");
/* ---------------------------------------------------------------------------------------------------- */
//Upload Files
exports.file_upload = async (req, res) => {
let number = req.params.number;
try {
await uploadFile(req, res);
if (req.file == undefined) {
return res.status(400).send({ message: "Please upload a file!" });
}
res.status(200).send({
message: "Uploaded the file successfully: " + req.file.originalname,
});
} catch (err) {
if (err.code == "LIMIT_FILE_SIZE") {
return res.status(500).send({
message: "File size cannot be larger than 2MB!",
});
}
res.status(500).send({
message: `Could not upload the file: ${req.file.originalname}. ${err}`,
});
}
//Check if empty
//res.status(200).json({msg:`${s03}`});
};
I've checked other tutorial and it's suppose to work

Try passing in next as a parameter.
...
exports.file_upload = async (req, res, next) => {
let number = req.params.number;
try {
await uploadFile(req, res, next);
...

Upload is not a function middleware multer route problem

This is my storage for multer I want to name files with session username and that is where my problem lays
If I const upload outside I cannot access req.session.user.username anymore...
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./uploads/usersprofile/");
},
filename: function (req, file, cb) {
cb(
null,
file.fieldname +
"_" +
`${req.session.user.username}${path.extname(file.originalname)}`
);
},
});
This is my route to which I upload file but it uploads file but gives me "upload is not a function" error I am unsure how to make it work with if (req.session.user && req.session.user.username) {} and so it doesn't allow not logged in users to upload plus not show "upload is not a function" error
router.post(
"/uploadpicture",
multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpg" ||
file.mimetype == "image/jpeg"
) {
cb(null, true);
} else {
cb(null, false);
return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
}
},
limits: { fileSize: maxSize },
}).single("avatar"),
(req, res) => {
if (req.session.user && req.session.user.username) {
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
res.send(err);
} else if (err) {
res.send(err);
}
});
} else {
res.json({ loggedIn: false });
}
}
);

Fixed by creating const upload that leads to "avatar" const upload = myMulter.single("avatar");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./uploads/usersprofile/");
},
filename: function (req, file, cb) {
cb(
null,
file.fieldname +
"_" +
`${req.session.user.username}${path.extname(file.originalname)}`
);
},
});
const myMulter = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpg" ||
file.mimetype == "image/jpeg"
) {
cb(null, true);
} else {
return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
}
},
limits: { fileSize: maxSize },
});
const upload = myMulter.single("avatar");
router.post("/uploadpicture", (req, res) => {
if (req.session.user && req.session.user.username) {
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
res.send(err);
} else if (err) {
res.send(err);
}
});
} else {
res.json({ loggedIn: false });
}
});

Mongo chunks not written

I am using MongoDB, nodeJS, express, multer, jimp and gridFS to upload an image. I first uploaded the image with multer then resized it with jimp then uploaded the jimp buffer to MongoDB now when I delete the multer image an error comes that the file is probably corrupt as the chunks file is not written(i don't know why but it is actually not written when I want to delete it) can any one tell how to achieve this and what is the error in my code.
here is my post route
app.post('/upload', upload.single("file"), (req, res) => {
if(req.file === undefined || req.file === 0 || req.file === ""){
res.redirect("/");
}
console.log(req.file);
filename = req.file.filename;
Jimp.read( "http://localhost:3000/image/" + req.file.filename, (err, image) => {
if (err) {
console.log(err);
}
// .then(lenna => (tpl.clone().write(imgActive)))
image
.resize(500, Jimp.AUTO)
// console.log(img);
image.getBase64(Jimp.AUTO, (error1, base64Image) => {
if(error1){
console.log(error1);
}
const image1 = new Image({
image: base64Image,
User: "Avichal",
forTest: "Hindi1"
});
image1.save(function(error){
if(error){
console.log(error);
}
})
})
})
gfs.remove({ _id: req.file.id, root: 'uploads' }, (err, gridStore) => {
if (err) {
console.log(err);
}
});
res.redirect('/');
});
here is the error:
MongoError: no chunks found for file, possibly corrupt

just a small error I have to put the remove function In the jimp read function the corrected code is:
app.post('/upload', upload.single("file"), (req, res) => {
if(req.file === undefined || req.file === 0 || req.file === ""){
res.redirect("/");
}
console.log(req.file);
filename = req.file.filename;
Jimp.read( "http://localhost:3000/image/" + req.file.filename, (err, image) => {
if (err) {
console.log(err);
}
// .then(lenna => (tpl.clone().write(imgActive)))
image
.resize(500, Jimp.AUTO)
// console.log(img);
image.getBase64(Jimp.AUTO, (error1, base64Image) => {
if(error1){
console.log(error1);
}
const image1 = new Image({
image: base64Image,
User: "Avichal",
forTest: "Hindi1"
});
image1.save(function(error){
if(error){
console.log(error);
}
})
})
gfs.remove({ _id: req.file.id, root: 'uploads' }, (err, gridStore) => {
if (err) {
console.log(err);
}
res.redirect('/');
});
})
});

MulterError: Unexpected field at wrappedFileFilter in Insomnia

I'm trying to upload a picture where the user registers in the app. When I'm trying to test it in insomnia I get the following error: MulterError: Unexpected field at wrappedFileFilter
I've been reading online and I know this error occurs when there is a mismatch between the field name provided by the client and the field name expected by the server. However, I've been checking many times my code and the name that I give in the server and the client (Insomnia) is the same: "image". Any idea what else can I try?
Here is my code:
const storage = multer.diskStorage({
destination: './client/public/img',
filename: (req, file, cb) => {
console.log(file)
cb(null, file.originalname)
}
})
const fileFilter = (req, file, cb) => {
if(file.mimetype == "image/jpeg" || file.mimetype == "image/png") {
cb(null, true)
} else {
cb(null, false)
}
}
const upload = multer({ storage: storage, fileFilter: fileFilter, destination: './client/public/img' })
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
//sign up
routes.post("/register", upload.single("image"), (req, res) => {
let { user_name, email, password, password2 } = req.body;
let { image } = req.file.filename
let errors = []
//check required inputs
if(!user_name || !email || !password || !password2){
errors.push({message: "Please fill all required fields"})
res.send({message: "Please fill all required fields"})
}
//check passwords
if(password != password2) {
errors.push({message: "Passwords do not match"})
res.send({message: "Passwords do not match"})
}
if(errors.length>0) {
console.log(errors);
} else {
if(email) {
db(`SELECT * FROM user WHERE email = "${email}"`)
.then((results) => {
if(results.data.length>0){
res.send("Email exists")
} else {
bcrypt.hash(password, saltRounds, (err, hash) => {
password = hash
db(`INSERT INTO user (user_name, email, password, image) VALUES ("${user_name}", "${email}", "${password}", "${image}")`)
.then((results) => {
res.send("Registration successful")
if(err)throw err;
})
.catch((error) => {
console.log(error)
})
})
}
})
.catch((error) => {
console.log(error)
})
} else {
res.send("Enter email")
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Any help will be appreciated. Thanks in advance.

I am making the assumption that you are using form to upload your file. If, so...
Front end snippet:
<form action="/register" method="post" enctype="multipart/form-data">
<input type="file" name="image" />
</form>
Get multer to upload the file correctly:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './client/public/img')
},
filename: function (req, file, cb) {
if(file.mimetype == "image/jpeg" || file.mimetype == "image/png") {
cb(null, file.fieldname + '-' + Date.now());
}
else {
cb(new MulterError('LIMIT_UNEXPECTED_FILE', file.fieldname));
}
});
const upload = multer({ storage: storage });
Handle the error inside your Express middleware by calling upload as below...
app.post('/profile', function (req, res) {
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
// A Multer error occurred when uploading.
} else if (err) {
// An unknown error occurred when uploading.
}
// Everything went fine.
})
})