In this tutorial, I will show you how to upload/store images in MongoDB using Node.js & Express with the help of multer & multer-gridfs-storage.
Related Posts:
– How to upload multiple files in Node.js
– Upload & resize multiple images in Node.js using Express, Multer, Sharp
More Practice:
– Node.js, Express & MongoDb: Build a CRUD Rest Api example
– Node.js + MongoDB: User Authentication & Authorization with JWT
Contents
Node.js upload/store image in MongoDB
We’re gonna show you how to build this Node.js app step by step.
Project Structure
Now look at our project structure:
– views/index.html
: contains HTML form for user to upload images.
– routes/web.js
: defines routes for endpoints that is called from views, use controllers to handle requests.
– controllers
:
home.js
returnsviews/index.html
upload.js
handles upload & store images with middleware function.
– middleware/upload.js
: initializes Multer GridFs Storage engine (including MongoDB) and defines middleware function.
– server.js
: initializes routes, runs Express app.
Setup Node.js modules
Open command promt, change current directory to the root folder of our project.
Install Express, Multer, Multer GridFs Storage with the following command:
npm install express multer multer-gridfs-storage
The package.json file will look like this:
{
"name": "upload-multiple-files",
"version": "1.0.0",
"description": "Node.js upload multiple files Demo",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"node",
"upload",
"multiple",
"files"
],
"author": "bezkoder",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"multer": "^1.4.2",
"multer-gridfs-storage": "^4.0.1"
}
}
Create View for uploading image
In views folder, create index.html file with the HTML and Javascript code as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Node.js upload images</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
div.preview-images > img {
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 mt-3">
<h4>Node.js upload images - bezkoder.com</h4>
<form class="mt-4"
action="/upload"
method="POST"
enctype="multipart/form-data"
>
<div class="form-group">
<input
type="file"
name="file"
id="input-files"
class="form-control-file border"
/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-12">
<div class="preview-images"></div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
let imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
let filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
let reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML("<img>"))
.attr("src", event.target.result)
.appendTo(placeToInsertImagePreview);
};
reader.readAsDataURL(input.files[i]);
}
}
};
$("#input-files").on("change", function() {
imagesPreview(this, "div.preview-images");
});
});
</script>
</body>
</html>
For HTML part, we create a form with following elements:
action="/upload"
method="POST"
enctype="multipart/form-data"
You also need to notice the input
tag with the name="file"
attribute that we will use in the middleware.
The jQuery script shows preview of the chosen images.
We also use Bootstrap to make the UI more comfortable to read.
Create middleware for uploading & storing image
Inside middleware folder, create upload.js file with the following code:
const util = require("util");
const multer = require("multer");
const GridFsStorage = require("multer-gridfs-storage");
var storage = new GridFsStorage({
url: "mongodb://localhost:27017/bezkoder_files_db",
options: { useNewUrlParser: true, useUnifiedTopology: true },
file: (req, file) => {
const match = ["image/png", "image/jpeg"];
if (match.indexOf(file.mimetype) === -1) {
const filename = `${Date.now()}-bezkoder-${file.originalname}`;
return filename;
}
return {
bucketName: "photos",
filename: `${Date.now()}-bezkoder-${file.originalname}`
};
}
});
var uploadFile = multer({ storage: storage }).single("file");
var uploadFilesMiddleware = util.promisify(uploadFile);
module.exports = uploadFilesMiddleware;
– We define a storage
configuration object with GridFsStorage
class.
url
: must be a standard MongoDB connection string pointing to the MongoDB database.multer-gridfs-storage
module will create a mongodb connection for you automatically.options
: customizes how to establish the connection, specified in the MongoClient.connect documentation.file
: this is the function to control the file storage in the database. The return value of this function is an object with the properties such as:filename
,metadata
,chunkSize
,bucketName
,contentType
… We also check if the file is an image or not usingfile.mimetype
. Then we add the[timestamp]-bezkoder-
prefix to the file’s original name to make sure that the duplicates never occur in MongoDB collection.bucketName
indicates that the file will be stored atphotos.chunks
andphotos.files
collections.
– Next we use multer
module to initialize middleware and util.promisify()
to make the exported middleware object can be used with async-await
.
– The single()
function with the parameter is the name of input
tag (in html view: <input type="file" name="file">
) will store the single file in req.file
.
If you want to do more, for example, resize the images, please visit this post:
Upload & resize multiple images in Node.js using Express, Multer, Sharp
Create Controller for the view
controllers/home.js
const path = require("path");
const home = (req, res) => {
return res.sendFile(path.join(`${__dirname}/../views/index.html`));
};
module.exports = {
getHome: home
};
Create Controller for uploading Images
controllers/upload.js
const upload = require("../middleware/upload");
const uploadFile = async (req, res) => {
try {
await upload(req, res);
console.log(req.file);
if (req.file == undefined) {
return res.send(`You must select a file.`);
}
return res.send(`File has been uploaded.`);
} catch (error) {
console.log(error);
return res.send(`Error when trying upload image: ${error}`);
}
};
module.exports = {
uploadFile: uploadFile
};
Define routes
In routes folder, define routes in web.js with Express Router.
const express = require("express");
const router = express.Router();
const homeController = require("../controllers/home");
const uploadController = require("../controllers/upload");
let routes = app => {
router.get("/", homeController.getHome);
router.post("/upload", uploadController.uploadFile);
return app.use("/", router);
};
module.exports = routes;
There are 2 routes:
– GET: Home page for the upload form.
– POST "/upload"
to call the upload controller. This is for action="/upload"
in the view.
Create Express app server
Finally, we create an Express server.
server.js
const express = require("express");
const app = express();
const initRoutes = require("./routes/web");
app.use(express.urlencoded({ extended: true }));
initRoutes(app);
let port = 3000;
app.listen(port, () => {
console.log(`Running at localhost:${port}`);
});
Run & Check result
On the project root folder, run this command: node src/server.js
The console shows:
Running at localhost:3000
Open browser with url http://localhost:3000/
.
Click on Submit button, if the file is uploaded and stored in MongoDB successfully, the browser will show:
The console shows image’s information:
{ fieldname: 'file',
originalname: 'extreme.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
id: 5dd60e6aee27a520ccad86a0,
filename: '1574309482432-bezkoder-extreme.jpg',
metadata: null,
bucketName: 'photos',
chunkSize: 261120,
size: 89431,
md5: '0d072efbb134b3b186c5da705e0e7059',
uploadDate: 2019-11-21T04:11:23.264Z,
contentType: 'image/jpeg' }
Check MongoDB database, you will see bezkoder_files_db with 2 collections: photos.chunks
& photo.files
:
Node.js upload/store multiple images in MongoDB
Now I will show you how to modify some code to deal with multiple images instead of only one image at a time.
Change form for uploading multiple images
For the form, we write the input tag with new name
& multiple
attribute like this.
views/index.html
<input
type="file"
name="multi-files"
multiple
id="input-files"
class="form-control-file border"
/>
Modify middleware for uploading & storing image
For multiple images, we use another function: array()
instead of single()
.
middleware/upload.js
...
// var uploadFile = multer({ storage: storage }).single("file");
var uploadFiles = multer({ storage: storage }).array("multi-files", 10);
var uploadFilesMiddleware = util.promisify(uploadFiles);
module.exports = uploadFilesMiddleware;
array()
function limits the number of files to upload each time, the first parameter is the name of input
tag (in html view: <input type="file" name="multi-files">
), the second parameter is the max number of files (10
).
Controller for uploading multiple images
With the controller, we export a new function: uploadFiles
.
controllers/upload.js
const upload = require("../middleware/upload");
const uploadFiles = async (req, res) => {
try {
await upload(req, res);
console.log(req.files);
if (req.files.length <= 0) {
return res.send(`You must select at least 1 file.`);
}
return res.send(`Files have been uploaded.`);
} catch (error) {
console.log(error);
if (error.code === "LIMIT_UNEXPECTED_FILE") {
return res.send("Too many files to upload.");
}
return res.send(`Error when trying upload many files: ${error}`);
}
};
module.exports = {
uploadFiles: uploadFiles
};
There is a additional part in the catch()
block. We check if the error.code
is "LIMIT_UNEXPECTED_FILE"
for showing user the message when he tries to upload more than 10 images/files.
Don't forget to change the controller method on router:
router.post("/upload", uploadController.uploadFiles);
Run & Check result
Run the command: node src/server.js
And the console shows:
Running at localhost:3000
Open your browser with url http://localhost:3000/
, add some images like this:
Click on Submit button. If these images are uploaded and stored in MongoDB successfully, you can see:
The console shows these images' information:
[ { fieldname: 'multi-files',
originalname: 'circle.png',
encoding: '7bit',
mimetype: 'image/png',
id: 5dd637361ae0143fdc572105,
filename: '1574319926050-bezkoder-circle.png',
metadata: null,
bucketName: 'photos',
chunkSize: 261120,
size: 193593,
md5: 'f6455d94e5ec26a1b6eb75b334220cbd',
uploadDate: 2019-11-21T07:05:30.273Z,
contentType: 'image/png' },
{ fieldname: 'multi-files',
originalname: 'JavaDuke.png',
encoding: '7bit',
mimetype: 'image/png',
id: 5dd637361ae0143fdc572106,
filename: '1574319926110-bezkoder-JavaDuke.png', metadata: null,
bucketName: 'photos',
chunkSize: 261120,
size: 112767,
md5: 'b7f0fa8ea1932850d99a64b35484484a',
uploadDate: 2019-11-21T07:05:30.275Z,
contentType: 'image/png' },
{ fieldname: 'multi-files',
originalname: 'lotus.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
id: 5dd637361ae0143fdc572107,
filename: '1574319926121-bezkoder-lotus.jpg',
metadata: null,
bucketName: 'photos',
chunkSize: 261120,
size: 375719,
md5: '26dc2e512d7c021daaa7cb46215d4a5b',
uploadDate: 2019-11-21T07:05:32.326Z,
contentType: 'image/jpeg' } ]
Check MongoDB database:
- photos.files
collection:
- chunks.files
collection:
If you try to upload more than 10 files at a time, you can see the error like this:
Conclusion
Today we’ve learned how to upload and store single/multiple images in MongoDB database using express, multer & multer-gridfs-storage modules, we also know way to limit the number of files by configuration.
Happy learning! See you again.
Further Reading
- https://www.npmjs.com/package/express
- https://www.npmjs.com/package/multer
- https://www.npmjs.com/package/multer-gridfs-storage
Source Code
You can find the complete source code for this tutorial at Github.
How can I access mongoDB database?
Hi, you can find way to access MongoDB in this section:
#Create middleware for uploading & storing image
multer-gridfs-storage
module will create a mongodb connection for you automatically. You only need to provideurl
andoptions
parameters.Thank you for this tutorial. Hope you write more useful Node.js & MongoDB tutorials in the future.
Thanks for your tutorial!
This is exactly what I wanted to look for way to upload images to MongoDB.
Thanks for this epic method.
if you upload source code for this example i could be very use ful.
Hi, all source code is shown in the steps. you only need to follow them and it will work 🙂
Hi,Thanks a tonne to provide the source code with explanation.But its not working for me.It would be more helpful if you could provide package.json file as well would have been more useful for the new developers like me.
Ah yeah, the package.json file will look like this:
I also updated the tutorial for this .json file. Thanks for your suggestion 🙂
Bookmarked!, This Node.js tutorial helps me a lot when working with image upload!
Much help from this post
I’m so happy to know that my work helps people 🙂
Thanks a ton!! This is very useful
hello bezkoder
actually iam uploading image through node js and angular js but iam facing issue in controllers can you please help mee
Dude your an inspiration! Without your tutorials maybe I give up learning database as of now,
cause your tutorials are pretty straightforward. Thanks a Lot….
Hi, I’m so happy to know that my work helps you 🙂
Thanks very nice Tutorial!
Hi Bezkoder,
Firstly, the information provided was really awesome!
A question: Can we follow the same procedure If in case we have multiple inputs types like username, address along with image attachment? If there is any other way around please suggest.
Thanks in advance!
Hi did you find the solution
Hello.
Thank you for your effort! This is really helpfull.
I’m trying to upload 2 images at once, and I need then to be nested in one single document. It should look like this:
> {
_id “xxxxx”,
name: “xxxxxx”,
age: “XX”,
img1: FIRST_IMAGE_ID (probably a document),
img2: SECOND_IMAGE_ID (probably a document)
}
Is that possible?
how to read uploaded photo from mongodb?
I’m getting an error saying there is no such file or directory (can’t find my index.html file when I run the server).
Help?
I’m also getting an “unexpected field” error when I try to upload an image in post man. Help?
Hello Bezkoder and many thanks for your tut.
There is nothing more wonderful than if you could guide to read uploaded image and especially with image have many chunks(n: 0, n: 1, n:2). Big thanks
What of I i want to use diskStorage and then save the url to mongodb can you please do a tutorial on that.. Or how do I do it
where the uploaded file is located? directory …
Thanks a ton bezkoder, super useful for my little app!
Would it by any chance be possible to show us how to build a ‘get’ request and display on the webpage as well?