i have a router to handle form submission when multiple images and a video are uploaded, i need to set maximum size limit for images and video, the multer "limits" property accepts only one value, i tried to check for size inside the file filter like in the code below, but apparently i can't access the file's size until it's received..
const DIR = './uploads/';
const MAX_IMAGE_SIZE = 2 * 1024 * 1024;
const MAX_VIDEO_SIZE = 100 * 1024 * 1024;
const storage = multer.diskStorage({
destination: (req, file, cb) => {
fs.mkdirSync(DIR, { recursive: true });
cb(null, DIR);
},
filename: (req, file, cb) => {
const fileName = file.originalname.toLowerCase().split(' ').join('-');
cb(null, uuidv4() + '-' + fileName)
}
});
let upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (file.fieldname == "images") {
if (file.size > MAX_IMAGE_SIZE) {
req.imageValidationError = "Image size can't exceed 2MB";
return cb(req.fileValidationError);
}
if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg" || file.mimetype == "image/webp") {
cb(null, true);
} else {
req.imageValidationError = "Unsupported Image Type";
return cb(req.fileValidationError);
}
}
else if (file.fieldname == "video") {
if (file.size > MAX_VIDEO_SIZE) {
req.videoValidationError = "Video size can't exceed 100MB";
return cb(req.fileValidationError);
}
if (file.mimetype == "video/ogg" || file.mimetype == "video/webm" || file.mimetype == "video/mp4" || file.mimetype == "video/ogv") {
cb(null, true);
} else {
req.videoValidationError = "Unsupported video Type";
return cb(req.fileValidationError);
}
}
}
});
what can i do about this?
i'm thinking of having separate "upload" handlers for images and video..but that doesn't seem a clean approach
I try to uploads files with multer, express and react. I succeeded for my first controller the image and well stocked but for the second the storage in String works on MongoDb but not on the back.
The code that works:
// controller file //
module.exports.createChantier = async (req, res) => {
const newChantier = new ChantierModel({
nomDuSite: req.body.nomDuSite,
client: req.body.client,
collaborateur: req.body.collaborateur,
date: req.body.date,
adresseDuSite: req.body.adresseDuSite,
proceder: req.body.proceder,
imageSite:
req.files !== null
? "./uploads/" +
req.body.nomDuSite.split(" ").join("_") +
"_" +
"imageSite" +
".jpg"
: "null",
suivie: [],
devis: req.body.devis,
surfaceCourante: req.body.surfaceCourante,
surfaceLineaire: req.body.surfaceLineaire,
});
try {
const chantier = await newChantier.save();
return res.status(201).json(chantier);
} catch (err) {
return res.status(400).send(err);
}
};
// input for forms //
<label htmlFor="imageSite">Photo du site</label>
<input
type="file"
id="imageSite"
name="imageSite"
accept=".jpg"
onChange={(e) => handlePictureImageSite(e)}
/>
<img src={postImageSite} alt="rapportpic" />
// multer file //
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "client/public/uploads");
},
filename: function (req, file, cb) {
const fileName =
req.body.nomDuSite.split(" ").join("_") + "_" + file.fieldname;
cb(null, fileName + ".jpg");
},
});
const fileFilter = (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpeg" ||
file.mimetype == "image/jpg"
) {
cb(null, true);
} else {
cb(null, false);
}
};
module.exports = multer({
storage: storage,
fileFilter: fileFilter,
}).fields([{ name: "imageSite", maxCount: 1 }]);
when I use this code all works MongoDb stores the path in string and multer registers the picture in a public folder.
The code that doesn't work:
// controller that does not work //
module.exports.createSuivieChantier = (req, res) => {
if (!ObjectID.isValid(req.params.id))
return res.status(400).send("ID unknow : " + req.params.id);
try {
return ChantierModel.findByIdAndUpdate(
req.params.id,
{
$push: {
suivie: {
suivieId: req.body.suivieId,
suivieReperage: req.body.suivieReperage,
commentaireSuivie: req.body.commentaireSuivie,
suivieSurfaceCourante: req.body.suivieSurfaceCourante,
suivieSurfaceLineaire: req.body.suivieSurfaceLineaire,
////////////////////
suiviePhoto1:
req.files !== null
? "./uploads/" +
req.body.suivieReperage +
"_" +
"suiviePhoto1" +
".jpg"
: "",
suiviePhoto2:
"./uploads/" +
req.body.suivieReperage +
"_" +
"suiviePhoto2" +
".jpg",
suiviePhoto3:
"./uploads/" +
req.body.suivieReperage +
"_" +
"suiviePhoto3" +
".jpg",
suiviePhoto4:
"./uploads/" +
req.body.suivieReperage +
"_" +
"suiviePhoto4" +
".jpg",
/////
},
},
},
{ new: true },
(err, docs) => {
if (!err) return res.send(docs);
else return res.status(400).send(err.message);
}
);
} catch (err) {
return res.status(400).send(err);
}
};
// input for forms ///
<label htmlFor="suiviePhoto1">Photo 1</label>
<input
type="file"
id="suiviePhoto1"
name="suiviePhoto1"
accept=".jpg"
onChange={(e) => handleSuiviePhoto1(e)}
/>
<img src={PostSuiviePhoto1} alt="rapportpic" />
// multer file //
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "client/public/uploads");
},
filename: function (req, file, cb) {
const fileName =
req.body.suivieReperage.split(" ").join("_") + "_" + file.fieldname;
cb(null, fileName + ".jpg");
},
});
const fileFilter = (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpeg" ||
file.mimetype == "image/jpg"
) {
cb(null, true);
} else {
cb(null, false);
}
};
module.exports = multer({
storage: storage,
fileFilter: fileFilter,
}).fields([
{ name: "suiviePhoto1", maxCount: 1 },
{ name: "suiviePhoto2", maxCount: 1 },
{ name: "suiviePhoto3", maxCount: 1 },
{ name: "suiviePhoto4", maxCount: 1 },
]);
// router file //
const router = require("express").Router();
const chantierController = require("../controllers/chantier.controller");
const uploadChantierFront = require("../config/uploadFile/chantierFront.upload");
const suivieChantierUpload = require("../config/uploadFile/suivieChantier.upload");
router.get("/", chantierController.readAllChantier);
router.get("/:id", chantierController.readChantier);
router.post("/", uploadChantierFront, chantierController.createChantier);
router.put("/:id", chantierController.updateChantier);
router.delete("/:id", chantierController.deleteChantier);
/////////////////// ROUTES SUIVIE CHANTIER
router.patch(
"/create-suivie/:id",
suivieChantierUpload,
chantierController.createSuivieChantier
);
router.patch("/edit-suivie/:id", chantierController.updateSuivieChantier);
router.patch("/delete-suivie/:id", chantierController.deleteSuivieChantier);
module.exports = router;
I think the problem comes from the multer file but it is identical to the file that works.(multer v 1.4.4)
I want to replace existing file in directory when upload new new , I'm using nodeJS and multer, the idea is to read directory content, delete it and then upload the new file.
const express = require('express')
const router = express.Router()
const authorize = require('_middleware/authorize')
const Role = require('_helpers/role')
const uploadImage = require("./uploadAdvertising")
const fs = require('fs')
const uploadDir = '/public/advertising/'
// routes
router.post('/', authorize(Role.Admin), uploadImage, createAdvertising);
module.exports = router;
async function createAdvertising(req, res, next) {
fs.readdir(global.__basedir + uploadDir, ((err, files) => {
if (err) throw err
for (const file of files){
fs.unlink(global.__basedir + uploadDir + file, err => {
if (err) throw err;
});
}
}))
if (!req.file) return res.status(412).send({
message: `image is required`,
});
uploadImage(req, res)
.then(data => {
return res.status(201).send({
message: 'Advertising image saved'
})
}).catch(err => {
return res.status(500).send({
message: `Could not upload the file, ${err}`,
});
})
}
multer
const util = require("util");
const multer = require("multer");
const maxSize = 10 * 1024 * 1024;
const uploadDir = '/public/advertising/'
const fs = require('fs')
let storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, global.__basedir + uploadDir)
req.uploadDirectory = global.__basedir + uploadDir
},
filename: (req, file, cb) => {
cb(null, file.originalname)
},
});
let uploadImage = multer({
storage: storage,
fileFilter: (req, file, cb) => {
//reject
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true)
} else {
cb(new Error("image should be png or jpeg extension"), false)
}
},
limits: {fileSize: maxSize},
}).single("imageAdvertising");
let uploadFileMiddleware = util.promisify(uploadImage);
module.exports = uploadFileMiddleware;
can some one take a look and tell what's wrong with this code ! it delete all content even the new uploaded file !
just try like this in the multer file
note : write the path of uploaded file in unlinkSync and readdirSync
fileFilter: (req, file, cb) => {
let files = fs.readdirSync('write the path');
if(files.includes(file.originalname)){
fs.unlinkSync('pwrite the pathath'+ file.originalname);
}
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true)
} else {
cb(new Error("image should be png or jpeg extension"), false)
}
}
and remove extra code like createAdvertising file
const express = require("express");
const multer = require("multer");
const makeDir = require('make-dir');
const fs = require('fs');
const path = require('path');
const upload = multer({
storage: Storage,
fileFilter: (req, file, cb) => {
console.log("upload fileFilter req ::", req.file);
checkFileType(file, cb);
}
}).fields(
[
{
name:'comppic',
maxCount:1
},
{
name:'userpic',
maxCount:1
},
{
name:'usercv',
maxCount:1
}
]
);
function checkFileType(file, cb) {
console.log("file:::::::::::::::", file);
}
I am using above code to upload file. In that how do I check for size of file which is uploading and returns error if file size exceeds.
console.log("upload fileFilter req ::", req.file); // output undefined
console.log("file:::::::::::::::", file);
output
file::::::::::::::: {
fieldname: 'userpic',
originalname: 'DSC01416.JPG',
encoding: '7bit',
mimetype: 'image/jpeg'
}
Please help me to resolve it.
Different file size limitation based on file type, there is size of file in req.rawHeaders so I write a logic in fileFilter based on type file, It's work to me,multer set .any for multer. req.rawHeaders is array, one of the item is size of file, in my request,size of file is in last item in Array so I used req.rawHeaders.slice(-1)[0]
in this logic, size of .pdf < 1 Mb and .png,.jpeg,.jpg < 4 Mb
const multer = require('multer');
const { v4: uuid } = require("uuid");
const TYPE_IMAGE = {
'image/png': 'png',
'image/jpeg': 'jpeg',
'image/jpg': 'jpg'
};
const TYPE_File = {
'application/pdf': 'pdf',
};
const fileUpload =
multer({
limits: 500000,
storage: multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/images');
},
filename: (req, file, cb) => {
const ext = (TYPE_IMAGE[file.mimetype]) ? TYPE_IMAGE[file.mimetype] : TYPE_File[file.mimetype];
cb(null, uuid() + '.' + ext);
}
}),
fileFilter: (req, file, cb) => {
let size = +req.rawHeaders.slice(-1)[0]
let isValid =false;
if(!!TYPE_IMAGE[file.mimetype] && size < 4 * 1024 * 1024 ){
isValid = true
}
if(!!TYPE_File[file.mimetype] && size < 1 * 1024 * 1024 ){
isValid = true
}
let error = isValid ? null : new Error('Invalid mime type!');
cb(error, isValid);
}
}).any();
module.exports = fileUpload;
How can I have multer accept files from multiple file type fields?
I have the following code that uploads a single file, using multer in node.js:
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './public/uploads');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage });
app.post('/rest/upload', upload.array('video', 1), function(req, res, next){
...
}
From the following form, on the condition only the video field has a value (if I specify both I get an 'Unexpected field' error):
<form action="/rest/upload" method="post" enctype="multipart/form-data">
<label>Video file: </label> <input type="file" name="video"/>
<label>Subtitles file: </label> <input type="file" name="subtitles"/>
<input type="submit"/>
</form>
It is not clear from the documentation how to approach this? Any suggestions would be appreciated. BTW I have tried the following parameter variations, without success:
app.post('/rest/upload', [upload.array('video', 1), upload.array('subtitles', 1)] ...
app.post('/rest/upload', upload.array('video', 1), upload.array('subtitles', 1), ...
app.post('/rest/upload', upload.array(['video', 'subtitles'], 1), ...
What you want is upload.fields():
app.post('/rest/upload',
upload.fields([{
name: 'video', maxCount: 1
}, {
name: 'subtitles', maxCount: 1
}]), function(req, res, next){
// ...
}
Using Multer Upload Files From Two Fields of Separate Forms on Different Pages
In this example I have two fields - resume and image. Resume in one form and Image in other. Both are on separate pages.
First import dependencies
const path = require('path'); // for getting file extension
const multer = require('multer'); // for uploading files
const uuidv4 = require('uuidv4'); // for naming files with random characters
Define fileStorage and fileFilter:
const fileStorage = multer.diskStorage({
destination: (req, file, cb) => { // setting destination of uploading files
if (file.fieldname === "resume") { // if uploading resume
cb(null, 'resumes');
} else { // else uploading image
cb(null, 'images');
}
},
filename: (req, file, cb) => { // naming file
cb(null, file.fieldname+"-"+uuidv4()+path.extname(file.originalname));
}
});
const fileFilter = (req, file, cb) => {
if (file.fieldname === "resume") { // if uploading resume
if (
file.mimetype === 'application/pdf' ||
file.mimetype === 'application/msword' ||
file.mimetype === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
) { // check file type to be pdf, doc, or docx
cb(null, true);
} else {
cb(null, false); // else fails
}
} else { // else uploading image
if (
file.mimetype === 'image/png' ||
file.mimetype === 'image/jpg' ||
file.mimetype === 'image/jpeg'
) { // check file type to be png, jpeg, or jpg
cb(null, true);
} else {
cb(null, false); // else fails
}
}
};
Middleware for multer
app.use(
multer(
{
storage: fileStorage,
limits:
{
fileSize:'2mb'
},
fileFilter: fileFilter
}
).fields(
[
{
name: 'resume',
maxCount: 1
},
{
name: 'image',
maxCount: 1
}
]
)
);
And then call your routes. You may need to add csrf protection or authentication along with this for security. But this should work fine.
If you want to upload multiple files/images from the same form, I have used the below code and it works fine. The path of the image is stored in the database; I will skip the database path and go straight to the upload function and how the fields are passed to the save function.
const path = require('path');
const multer = require('multer');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
if (file.fieldname === "profile") {
cb(null, './uploads/profiles/')
}
else if (file.fieldname === "natid") {
cb(null, './uploads/ids/');
}
else if (file.fieldname === "certificate") {
cb(null, './uploads/certificates/')
}
},
filename:(req,file,cb)=>{
if (file.fieldname === "profile") {
cb(null, file.fieldname+Date.now()+path.extname(file.originalname));
}
else if (file.fieldname === "natid") {
cb(null, file.fieldname+Date.now()+path.extname(file.originalname));
}
else if (file.fieldname === "certificate") {
cb(null, file.fieldname+Date.now()+path.extname(file.originalname));
}
}
});
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 10
},
fileFilter: (req, file, cb) => {
checkFileType(file, cb);
}
}).fields(
[
{
name:'profile',
maxCount:1
},
{
name: 'natid', maxCount:1
},
{
name: 'certificate', maxCount:1
}
]
);
function checkFileType(file, cb) {
if (file.fieldname === "certificate") {
if (
file.mimetype === 'application/pdf' ||
file.mimetype === 'application/msword' ||
file.mimetype === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
) { // check file type to be pdf, doc, or docx
cb(null, true);
} else {
cb(null, false); // else fails
}
}
else if (file.fieldname === "natid" || file.fieldname === "profile") {
if (
file.mimetype === 'image/png' ||
file.mimetype === 'image/jpg' ||
file.mimetype === 'image/jpeg'||
fiel.mimetype==='image/gif'
) { // check file type to be png, jpeg, or jpg
cb(null, true);
} else {
cb(null, false); // else fails
}
}
}
//at the save function
upload(req, res, (err) => {
if (err) {
console.log(err);
} else {
if (req.file == "undefined") {
console.log("No image selected!")
} else {
let datecreated = new Date();
let fullnames = req.body.firstname + ' ' + req.body.lastname;
let formatedphone = '';
let phone = req.body.personalphone;
if (phone.charAt(0) == '0') {
formatedphone = '+254' + phone.substring(1);
} else if ((phone.charAt(0) == '+') && (phone.length > 12 || phone.length <= 15)) {
formatedphone = phone
}
let teachers = {
"teacherid": teacherid,
"schoolcode": req.body.schoolcode,
"fullnames": fullnames,
"email": req.body.email,
"dateofbirth": req.body.dateofbirth,
"nationalid": req.body.nationalid,
"personalphone": formatedphone,
"profile": req.files.profile[0].path,
"natid": req.files.natid[0].path,
"certificate":req.files.certificate[0].path
}
connection.query('INSERT INTO teachers SET ?', teachers, (error, results, fields) => {`enter code here`
if (error) {
res.json({
status: false,
message: 'there are some error with query'
})
console.log(error);
} else {console.log("Saved successfully");
}
this worked for Me. complete example
var multer = require('multer')
var storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, './public/audio');
},
filename: function(req, file, callback) {
console.log(file);
if(file.originalname.length>6)
callback(null, file.fieldname + '-' + Date.now() + file.originalname.substr(file.originalname.length-6,file.originalname.length));
else
callback(null, file.fieldname + '-' + Date.now() + file.originalname);
}
});
const upload = multer({ storage: storage });
router.post('/save/audio',upload.fields([{
name: 'audio', maxCount: 1
}, {
name: 'graphic', maxCount: 1
}]) ,(req, res) => {
const audioFile = req.files.audio[0];
const audioGraphic = req.files.graphic[0];
const fileName = req.body.title;
saveAudio(fileName,audioFile.filename,audioGraphic.filename,req.body.artist,function (error,success) {
req.flash('success','File Uploaded Successfully')
res.redirect('/')
});
})
Did you try to use multer().any()?
I just need upload fields store in a arry
const express = require("express");
const category_route = express();
const bodyParser = require('body-parser');
category_route.use(bodyParser.json());
category_route.use(bodyParser.urlencoded({extended:true}));
const controller = require('../Controller/Category');
const Multer = require('multer')
const Path = require('path');
const multer = require("multer");
category_route.use(express.static('public'));
const storage = multer.diskStorage({
destination : function(req,files,cb){
cb(null,Path.join(__dirname,'../public/category'),function(err,sucess){
if(err){
throw err;
}
});
},
filename:function(req,files,cb){
const name = Date.now()+'-'+ files.originalname;
cb(null,name, function(err, sucess){
if(err){
throw err;
}
});
}
});
const upload = multer({storage:storage})
category_route.post('/add-category',upload.fields([
{
name: "icon",
maxCount: 1,
},
{
name: "banner",
maxCount: 1,
}
]), controller.addCategory);
module.exports = category_route;
/* controller code*/
const Category = require("../Model/Category");
const addCategory = async (req, res) => {
try {
var arrIcon = [];
for(let i=0; i<req.files.length; i++){
arrIcon[i] = req.files[i].filename;
}
var arrBanner = [];
for(let j=0; j<req.files.length; j++){
arrBanner[j] = req.files[j].filename;
}
const catData = await Category.find();
if (catData.length > 0) {
let checking = false;
catData.every((i) => {
if (i.name.toLowerCase() === req.body.name.toLowerCase()) {
checking = true;
console.log("FOUND");
return false;
}
console.log("NOT-FOUND");
return true;
});
if (checking === false) {
const data = new Category({
name: req.body.name,
camission: req.body.camission,
icon: arrIcon,
banner: arrBanner,
mtitel: req.body.mtitel,
mdiscp: req.body.mdiscp,
});
const result = await data.save();
res.send(result);
} else {
res.send("Category is Already exieet");
}
} else {
const data = new Category({
name: req.body.name,
camission: req.body.camission,
icon: arrIcon,
banner: arrBanner,
mtitel: req.body.mtitel,
mdiscp: req.body.mdiscp,
});
const result = await data.save();
res.send(result);
}
} catch (error) {
console.log(error);
res.send("somthing Wrong");
}
};
module.exports = { addCategory };
upload(req, res, (err) => {
if (err) {
console.log(err);
} else {
if (req.file == "undefined") {
console.log("No image selected!")
} else {
let datecreated = new Date();
let fullnames = req.body.firstname + ' ' + req.body.lastname;
let formatedphone = '';
let phone = req.body.personalphone;
if (phone.charAt(0) == '0') {
formatedphone = '+254' + phone.substring(1);
} else if ((phone.charAt(0) == '+') && (phone.length > 12 || phone.length <= 15)) {
formatedphone = phone
}
let teachers = {
"teacherid": teacherid,
"schoolcode": req.body.schoolcode,
"fullnames": fullnames,
"email": req.body.email,
"dateofbirth": req.body.dateofbirth,
"nationalid": req.body.nationalid,
"personalphone": formatedphone,
"profile": req.files.profile[0].path,
"natid": req.files.natid[0].path,
"certificate":req.files.certificate[0].path
}
connection.query('INSERT INTO teachers SET ?', teachers, (error, results, fields) => {
if (error) {
res.json({
status: false,
message: 'there are some error with query'
})
console.log(error);
} else {
console.log('Saved successfully');}