How to upload and store images in mongoDB database ?
Tags: node, mongodb, javascript
Published: 2021-05-18 07:19:25

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. 

{% youtube XCRUzPi0X0Q %}
[Project Github link](https://github.com/sk-Jahangeer/media-upload-node-mongo)

**App Overview :**

**Project Structure**
![project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vvgx7i3w6ryjw5y94fq.png)

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**
```javascript
$ 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 :
```json
{
  "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

```javascript
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
```javascript
DB = "mongodb://localhost/image-upload"
```

**Configure MongoDB Database**
```javascript
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

```javascript
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.

```javascript
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.

```javascript
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.
```javascript
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

```javascript
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.