How to define multer storage in different file? - node.js

I have a node application with express.
The server is at server.js and I have routers set up like the following:
app.use('/xyz', xyz);
app.use('/abc', abc);
The routers xyz and abc are in different route modules in /routes.
I want to use multer to upload images to MongoDB. The endpoint for uploading files is /xyz/upload
storage = new GridFsStorage({
url: process.env.DB_URL,
file: (req, file) => {
return new Promise((resolve, reject) => {
const filename = file.originalname;
const fileInfo = {
filename: filename,
bucketName: 'uploads'
};
resolve(fileInfo);
});
}
});
How can I define this const upload = multer({ storage }); in the xyz router file?
All the examples on the internet show multer being defined in server.js and app.post(). What to do if I have a router defined in a different module?

If you are looking for a cleaner architecture then I would suggest following the separation of concerns principle (SoC) and treat the file handling middleware in a separate file as follows:
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./public/uploads");
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
cb(
null,
new Date().getTime() + "-" + uniqueSuffix + "-" + file.originalname
);
},
});
const fileFilter = (req, file, cb) => {
// reject all files except jpeg
if (file.mimetype === "image/jpeg") {
cb(null, true);
} else {
cb(null, false);
}
};
module.exports = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 15, // 15mb max size,
},
fileFilter: fileFilter,
});
then, in your routes, a simple require if you are working with CommonJS should be enough:
const upload = require("./fileHandling");
server.post(
`/route`,
upload.array('Photos', 6),
controller,
);
It did the trick for me, hope it helps!

Related

multer saves image in a weird format

I am trying to serve an image from my Express server to my client but multer is saving the file in a weird format which leads to issues when my react app tries to render the image
multer server side code:
const fileFilter = (req, file, cb) => {
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png'){
// accept a file
cb(null, true);
} else {
// reject a file
cb(new Error('Incorrect file'), false);
}
}
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/');
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname))
}
});
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5 // max 5mb for image size
},
fileFilter: fileFilter
});
router.post('/', upload.single('productImage'), ProductsController.products_create_product);
This code successfully creates the file in the /uploads folder but when I save the path to the database I get this response:
Postman
{
"size": 5,
"quantityInStock": 11,
"productImage": "uploads\\2021-03-11T19-18-05.442Zvans-2.jpg",
}
How can I change it so it saves the image in this format: /uploads/2021-03-11T19-18-05.442Zvans-2.jpg
You just need to fix your destination path like this:
cb(null, path.join(__dirname, './uploads/'));
For me this was the full code-block. Just grab the actual part you want:
const multer = require('multer');
const path = require('path');
const appConfigs = require('./../config/app');
module.exports = function (folderName) {
// TODO: console log here and optimize multiple initialization of multer if need
return multer({
storage: multer.diskStorage({
destination: function (req, file, cb) {
const filePath = path.join(__dirname, './../uploads/' + folderName);
cb(null, filePath);
},
filename: function (req, file, cb) {
const extension = file.mimetype.split('/')[1];
const fileName = (new Date().getTime() / 1000 | 0) + '.' + extension;
cb(null, fileName);
}
}),
limits: {
fileSize: 1024 * 1024 * appConfigs.image_max_size // MB
},
fileFilter: (req, file, cb) => {
let valid = (file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png');
cb(null, valid);
},
});
};

post multiple field of file upload in different folder in node js api using multer

I am using multer for single file upload in 1 post field but what if i want to add 2 or more file inside different post field like below.
this is for different module.
so for single file upload i am using following code
var uploadfilename = "";
var storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, './public/assets' + customStrings.FOLDER)
},
filename: (req, file, cb) => {
uploadfilename = Date.now() +
path.extname(file.originalname);
cb(null, uploadfilename);
}
});
var upload = multer({
storage: storage
});
and in post api route
router.post("/news", upload.single('image'), (req, res) => {
});
now if i want multiple field for file upload what we will do ??
i fount one solution for that is following
var uploadfilename = "";
var uploadCityfilename = "";
var storage = multer.diskStorage({
destination: (req, file, cb) => {
if (file.fieldname == "image") {
cb(null, './public/assets' + customStrings.FOLDER)
} else {
cb(null, './public/assets' + customStrings.CITY_FOLDER)
}
},
filename: (req, file, cb) => {
if (file.fieldname == "image") {
uploadfilename = Date.now() + "-" +
customStrings.IMAGE_POST_NAME + path.extname(file.originalname);
cb(null, uploadfilename);
} else {
uploadCityfilename = req.body.city + path.extname(file.originalname);
cb(null, uploadCityfilename);
}
}
});
var upload = multer({
storage: storage
});
and in post api route
router.post("/imageupload", upload.any(), (req, res) => {
});
it works for me :)

UPLOAD FILE VULNERABILITY with multer

I am using multer to upload file in my application.
like: https://github.com/expressjs/multer/blob/master/README.md
Can path traversal vulnerability possible ? If yes then tell us how we can stop this?
Currenlty, I am using below code. I just want to confirm, Is there any file vulnerable risk? Please comment.
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
console.log(file);
var ext = file.originalname.split('.').pop();
cb(null, Date.now() + '_' + file.originalname);
}});
const fileFilter = (req, file, cb) => {
// Accept or reject the file based on if MIME type is found in accepted list
if (acceptedMimeTypes.indexOf(file.mimetype) < 0) {
return cb("エラー:このタイプのファイルはアップロードできません。ZIP形式とLZH形式のファイルのみアップロードしてください。", false) // Error: You can't upload files of this type. Please upload images and zips only.
}
else {
return cb(null, true);
}
}
var upload = multer({ storage: storage, fileFilter: fileFilter, limits: { fileSize: 1024 * 1024 * 1 } }).single('file');
If there is any risk then please suggest me a better approach with expressjs multer.
You can modify the fileName using this code so no one can threaten you :
const storage = multer.diskStorage({
destination: './public',
filename(req, file, cb) {
cb(null, 'Your File Name');
},
});
and also you can make it dynamic using randomatic and time like this :
const storage = multer.diskStorage({
destination: './public',
filename(req, file, cb) {
cb(null, `${new Date().getTime()}`);
},
});

Uploading Image with Multer - additional blob created alongside image

const upload = multer({ dest: `${__dirname}/uploads/images` });
app.post(
"/api/users/:id/uploadProfilePic",
upload.single("image"),
updateProfilePic
);
const updateProfilePic = async (req, res) => {
const userId = req.param("id");
if (userId && isNumber(userId)) {
// When using the "single"
// data come in "req.file" regardless of the attribute "name". *
const tmpPath = req.file.path;
// The original name of the uploaded file
// stored in the variable "originalname". *
const targetPath = `uploads/images/${req.file.originalname}`;
/** A better way to copy the uploaded file. **/
const src = fs.createReadStream(tmpPath);
const dest = fs.createWriteStream(targetPath);
src.pipe(dest);
src.on("end", () => {
res.status(200).send("complete");
});
src.on("error", err => {
res.status(500).send(err);
});
}
};
In my express app, I have the following code for uploading an image - this seems to upload the image successfully, but it also creates this data blob in my uploads folder -
You can do something like
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
const upload = multer({storage: storage})

How to store a file with file extension with multer?

Managed to store my files in a folder but they store without the file extension.
Does any one know how would I store the file with file extension?
I have a workaround for the adding proper extension of files. If you use path node module
var multer = require('multer');
var path = require('path')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname)) //Appending extension
}
})
var upload = multer({ storage: storage });
From the docs: "Multer will not append any file extension for you, your function should return a filename complete with an file extension."
Here's how you can add the extension:
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '.jpg') //Appending .jpg
}
})
var upload = multer({ storage: storage });
I would recommend using the mimetype property to determine the extension. For example:
filename: function (req, file, cb) {
console.log(file.mimetype); //Will return something like: image/jpeg
More info: https://github.com/expressjs/multer
I got file the extension from file.mimetype .
I split the mimetype and get the file extension from it
Please try the below function.
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
let extArray = file.mimetype.split("/");
let extension = extArray[extArray.length - 1];
cb(null, file.fieldname + '-' + Date.now()+ '.' +extension)
}
})
const upload = multer({ storage: storage })
It can be done like this:
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, config.DIR)
},
filename: function (req, file, cb) {
let ext = file.originalname.substring(file.originalname.lastIndexOf('.'), file.originalname.length);
cb(null, Date.now() + ext)
}
});
const upload = multer({
storage: storage
}).any();
import multer from 'multer';
import * as shortid from 'shortid';
import * as mime from 'mime-types';
const storage = multer.diskStorage({
destination: function (req,file,cb) {
cb(null, '/path/to/uploads/');
},
filename: function (req,file,cb) {
/* generates a "unique" name - not collision proof but unique enough for small sized applications */
let id = shortid.generate();
/* need to use the file's mimetype because the file name may not have an extension at all */
let ext = mime.extension(file.mimetype);
cb(null, `${id}.${ext}`);
}
});
EDIT
shortid has been deprecated you should use nanoid.
import multer from 'multer';
import * as nanoid from 'nanoid';
import * as mime from 'mime-types';
const storage = multer.diskStorage({
destination: function (req,file,cb) {
cb(null, '/path/to/uploads/');
},
filename: function (req,file,cb) {
/* generates a "unique" name - not collision proof but unique enough for small sized applications */
let id = nanoid();
/* need to use the file's mimetype because the file name may not have an extension at all */
let ext = mime.extension(file.mimetype);
cb(null, `${id}.${ext}`);
}
});
There may be some issues in the already answered codes.
There may be some cases of files with no extension.
There should not be an upload.any() usage. Its vulnerable to the attackers
The upload function should not be global
.
I have written the below codes for better security.
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'temp/')
},
filename: function (req, file, cb) {
let ext = ''; // set default extension (if any)
if (file.originalname.split(".").length>1) // checking if there is an extension or not.
ext = file.originalname.substring(file.originalname.lastIndexOf('.'), file.originalname.length);
cb(null, Date.now() + ext)
}
})
var upload = multer({ storage: storage });
Using it for upload
// using only single file object name (HTML name attribute)
// May use upload.array(["file1","file2"]) for more than one
app.post('/file_upload', upload.single("file"), function (req,res) {
//console.log(req.body, 'Body');
console.log(req.file, 'file');
res.send("cool");
})
I used this little trick to get file extension, and as a workaround to circumvent issues that might occur when someone uploads a file with similar file name twice, or that exists in the server.
const path = require('path');
const crypto = require('crypto');
let upload = multer({
storage: multer.diskStorage({
destination: (req, file, cb) => {
cb(null, path.join(__dirname, '../uploads'))
},
filename: (req, file, cb) => {
// randomBytes function will generate a random name
let customFileName = crypto.randomBytes(18).toString('hex')
// get file extension from original file name
let fileExtension = path.extname(file.originalname).split('.')[1];
cb(null, customFileName + '.' + fileExtension)
}
})
})
const multer = require('multer');
const uuid = require('uuid/v1');
const MIME_TYPE_MAP = {
'image/png': 'png',
'image/jpeg': 'jpeg',
'image/jpg': 'jpg'
};
const fileUpload = multer({
limits: 500000,
storage: multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/images');
},
filename: (req, file, cb) => {
const ext = MIME_TYPE_MAP[file.mimetype];
cb(null, uuid() + '.' + ext);
}
}),
fileFilter: (req, file, cb) => {
const isValid = !!MIME_TYPE_MAP[file.mimetype];
let error = isValid ? null : new Error('Invalid mime type!');
cb(error, isValid);
}
});
module.exports = fileUpload;
The file extension can be dynamic.
here is the solution
const path = require('path'); // path for cut the file extension
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, 'upload_at_' + Date.now() + path.extname(file.originalname))
}
})
I use this method and it works.
I store the file in this format:
FieldName+Date+Extension => Profile1621416613594.jpg
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req,file,cb){
cb(null, './uploads')
},
filename: function (req,file,cb){
cb(null,file.fieldname+'-'+Date.now()+'.'+file.mimetype.split('/').reverse()[0]);
},
});
var upload = multer({storage: storage});
I am doing like this
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/uploads/img/')
},
filename: function (req, file, cb) {
let ext = file.originalname.substring(file.originalname.lastIndexOf('.'), file.originalname.length);
cb(null, Date.now() + ext);
}
})
var upload = multer({ storage: storage }).single('eventimage');
An object oriented way to store image with unique name
// image.service.ts
import { diskStorage, StorageEngine } from "multer";
class ImageStorageService {
storage: StorageEngine
constructor() {
const MIME_TYPE_MAP = {
'image/png': 'png',
'image/jpeg': 'jpg',
'image/jpg': 'jpg'
}
this.storage = diskStorage({
destination: (req, file, callback) => {
const isValid = MIME_TYPE_MAP[file.mimetype]
let error = new Error(`Invalid mime type`)
if (isValid)
error = null
//app.use(express.static(path.join(`${__dirname}/assets`)))
callback(error, 'assets/images')
},
filename: (req, file, callback) => {
let currentFileName: string = file.originalname.substr(0, file.originalname.lastIndexOf('.'))
const name = currentFileName.toLowerCase().split(' ').join('-')
const ext = MIME_TYPE_MAP[file.mimetype]
callback(null, `${name}-${Date.now()}.${ext}`)
}
})
}
}
export const ImageStorage = new ImageStorageService().storage
then in one of your routes
import { ImageStorage } from "./services/image-storage.service";
this.router.post('/signup', multer({ storage: ImageStorage }).single('image'), async (req, res, next) => {
let img_url: string
if (req.file) {
const url: string = `${req.protocol}:\/\/${req.get('host')}`
img_url = url + '/images/' + req.file.filename
//http://localhost:3000/images/penguins-1548339248380.jpg
}
})
I like to use the original filename for SEO purposes. This requires a bit more checking if the file with the same name already exists.
Moreover, extension resolving is done in a few steps to provide maximum flexibility.
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
// try to get extension from original file name
var lioDot = file.originalname.lastIndexOf('.');
if (lioDot !== -1) {
// I like to use original upload filename for SEO but first lets clean it
var newName = file.originalname.substring(0, lioDot).replace(/([^a-z0-9]+)/gi, '-');
var ext = file.originalname.substring(lioDot, file.originalname.length);
} else {
var newName = file.originalname.replace(/([^a-z0-9]+)/gi, '-');
// try to get extension from mime type string
var extArray = file.mimetype.split("/");
var ext = extArray[extArray.length - 1];
// mime type extension resolving by pure string extraction is not accurate for a lot of types
// https://www.freeformatter.com/mime-types-list.html
// it's usually fine for ext strings up to 4 characters, png, jpeg, gif, bmp, tiff ..
if (ext > 4) {
// other mime types you would like to support
var mimetypes = { 'vnd.openxmlformats-officedocument.wordprocessingml.document': '.docx' };
if (mimetypes.hasOwnProperty(ext)) ext = mimetypes[ext];
}
}
var newFullName = newName + ext;
var i = 0;
// we need to check if the file with the same name already exists
// if it exists then we're adding something to make it unique
while (fs.existsSync(process.env.PWD + '/uploads/' + newFullName)) {
newFullName = newName + '-' + ++i + ext;
}
cb(null, newFullName);
}
})
const upload = multer({ storage: storage });
It can be done like this...simple to grasp
// validate uploaded files
const FILE_TYPE_MAP = {
// mime type
"image/png": "png",
"image/jpeg": "jpeg",
"image/jpg": "jpg",
};
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "public/uploads");
},
filename: function (req, file, cb) {
const filename = file.originalname.replace(" ", "-");
const extension = FILE_TYPE_MAP[file.mimetype]
cb(null, `${filename}-${Date.now()}.${extension}`);
},
});
Simple helpler function that maintains the unique filename generated by multer and adds the extension parsed from mimetype:
Just pass the object returned by multer
const fs = require('fs');
function renameWithExt(file) {
const ext = file.mimetype.split('/')[1]; // parse the extension type
fs.rename(`${file.path}`, `${file.path}.${ext}`, () => {
console.log(`File: ${file.filename} renamed with extension '.${ext}'`);
});
}
renameWithExt(req.file);
const multer = require('multer');
const uuid = require('uuid/v1');
const MIME_TYPE_MAP = {
'image/png': 'png',
'image/jpeg': 'jpeg',
'image/jpg': 'jpg'
};
const fileUpload = multer({
limits: 500000,
storage: multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/images');
},
filename: (req, file, cb) => {
const ext = MIME_TYPE_MAP[file.mimetype];
cb(null, uuid() + '.' + ext);
}
}),
fileFilter: (req, file, cb) => {
const isValid = !!MIME_TYPE_MAP[file.mimetype];
let error = isValid ? null : new Error('Invalid mime type!');
cb(error, isValid);
}
});
module.exports = fileUpload;

Resources