This content originally appeared on DEV Community and was authored by Jahangeer
Hi guys, today we will learn how to upload and store image mongoDB database. It is not recommended in real world projects for storing media files in database. So why do we need to learn, because we are developers ? . Just kidding ...
So let's start coding.
App Overview :
Project Structure
Following table shows the overview of Rest APIs that be exported:
| Methods | Urls | Actions |
|---|---|---|
| POST | /file/upload | upload image to database |
| GET | /file/:filename | stream image |
| DELETE | /file/:filename | Delete image from database |
Create Node.js App
$ mkdir media-upload-node-mongo
$ cd media-upload-node-mongo
$ npm init --yes
$ npm install express mongoose dotenv multer multer-gridfs-storage gridfs-stream
Express : Express is minimal and flexible Node.js web applicaton framework.
Mongoose : Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js.
Dotenv : It loads environment variables from a .env file.
Multer : Multer is node.js middleware for handling multipart/form-data, which is primarily used for uploading files.
multer-gridfs-storage : It is storage engine for multer to store uploaded files to directly to mongoDB.
gridfs-stream : It provides more rebus and easier to use streams.
The package.json look like :
{
"name": "media-upload-node-mongo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^9.0.2",
"express": "^4.17.1",
"gridfs-stream": "^1.1.1",
"mongoose": "^5.12.9",
"multer": "^1.4.2",
"multer-gridfs-storage": "^4.2.0"
}
}
create index.js file in root folder
Setup Express Web Server
In root folder, create index.js file
require("dotenv").config();
const express = require("express");
const app = express();
const port = process.env.PORT || 8080;
app.listen(port, console.log(`Listening on port ${port}...`));
Configure Environment Variables
In root folder, create .env file
DB = "mongodb://localhost/image-upload"
Configure MongoDB Database
const mongoose = require("mongoose");
module.exports = async function connection() {
try {
const connectionParams = {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
};
await mongoose.connect(process.env.DB, connectionParams);
console.log("connected to database");
} catch (error) {
console.log(error);
console.log("could not connect to database");
}
};
import db.js in index.js and call it
require("dotenv").config();
const connection = require("./db");
...
connection();
...
app.listen(port, console.log(`Listening on port ${port}...`));
Configure Upload Middleware
In root folder create middleware folder and inside that folder create upload.js file.
const multer = require("multer");
const GridFsStorage = require("multer-gridfs-storage");
const storage = new GridFsStorage({
url: process.env.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()}-any-name-${file.originalname}`;
return filename;
}
return {
bucketName: "photos",
filename: `${Date.now()}-any-name-${file.originalname}`,
};
},
});
module.exports = multer({ storage });
what we have done here :
- When user send a image we check it's a valid image type or not.
- We save image in database and return it.
Define The Routes
Upload Route :
In the root folder create routes folder and inside that folder create upload.js file.
const upload = require("../middleware/upload");
const express = require("express");
const router = express.Router();
router.post("/upload", upload.single("file"), async (req, res) => {
if (req.file === undefined) return res.send("you must select a file.");
const imgUrl = `http://localhost:8080/file/${req.file.filename}`;
return res.send(imgUrl);
});
module.exports = router;
import upload.js routes in index.js use it.
require("dotenv").config();
const upload = require("./routes/upload");
...
app.use("/file", upload);
...
app.listen(port, console.log(`Listening on port ${port}...`));
Image Stream and Delete Routes :
In index.js
require("dotenv").config();
const upload = require("./routes/upload");
const Grid = require("gridfs-stream");
const mongoose = require("mongoose");
const connection = require("./db");
const express = require("express");
const app = express();
let gfs;
connection();
const conn = mongoose.connection;
conn.once("open", function () {
gfs = Grid(conn.db, mongoose.mongo);
gfs.collection("photos");
});
app.use("/file", upload);
// media routes
app.get("/file/:filename", async (req, res) => {
try {
const file = await gfs.files.findOne({ filename: req.params.filename });
const readStream = gfs.createReadStream(file.filename);
readStream.pipe(res);
} catch (error) {
res.send("not found");
}
});
app.delete("/file/:filename", async (req, res) => {
try {
await gfs.files.deleteOne({ filename: req.params.filename });
res.send("success");
} catch (error) {
console.log(error);
res.send("An error occured.");
}
});
const port = process.env.PORT || 8080;
app.listen(port, console.log(`Listening on port ${port}...`));
That's it test APIs in postman.
If you found any mistakes or making it better, let me know in comment. I hope you have learned something.
This content originally appeared on DEV Community and was authored by Jahangeer
Jahangeer | Sciencx (2021-05-18T07:19:25+00:00) How to upload and store images in mongoDB database ?. Retrieved from https://www.scien.cx/2021/05/18/how-to-upload-and-store-images-in-mongodb-database/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.