Skip to content

All topics  /  Node.js

How to File Upload using MongoDB in Node JS?

Node.js ·

For teams turning “How to File Upload using MongoDB in Node JS?” into a repeatable delivery task, the related Monitask article can document setup, troubleshooting and review time; managers should interpret those records alongside reliability and completed work, not as a stand-alone score.

Package and operating-system behaviour can change, so verify the commands and supported versions through the Node.js project before running them on a production host.

Hello Friends,

This post is focused on how to file upload using MongoDB in node js. This article will give you a simple example of uploading files in MongoDB with mongoose grids and nodejs. This article goes into detail on crud operations and file upload using node.js and MongoDB. I explained simply how to upload/store images in MongoDB using node.js. you will do the following things for express & multer.

Upload the image file to MongoDB using node js; In this tutorial, you will learn how to upload an image file in the MongoDB database using Node js + Express + mongoose. And as well as learn how to store files/images in node js + express application directory and MongoDB database + mongoose.

Step 1: Create Node Express js App


Execute the following command on the terminal to create the node js app:

mkdir my-app
cd my-app
npm init -y

Step 2: Install express ejs body-parser mongoose Multer Modules

Execute the following command on the terminal to express ejs body-parser mongoose dependencies:

npm install -g express-generator
npx express --view=ejs
npm install
npm install body-parser --save
npm install express multer --save
npm install mongoose

body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and makes it available under req.body property. In other words, it simplifies incoming requests.

Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages

Mongoose – Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

Multer – Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files. It is written on top of the busboy for maximum efficiency.

Step 3: Connect App to MongoDB

Create a database.js file in your app root directory and add the following code into it to connect your app to the MongoDB database:

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/node-file-upl', {useNewUrlParser: true});
var conn = mongoose.connection;
conn.on('connected', function() {
    console.log('database is connected successfully');
});
conn.on('disconnected',function(){
    console.log('database is disconnected successfully');
})
conn.on('error', console.error.bind(console, 'connection error:'));
module.exports = conn;

Step 4: Create Model

Create Models directory and inside this directory create imageModel.js file; Then add following code into it:

const mongoose = require("../database");

 
var mongoose = require('mongoose');

 
var imageSchema = new mongoose.Schema({
    name: String,
    desc: String,
    img:
    {
        data: Buffer,
        contentType: String
    }
});

 
//Image is a model which has a schema imageSchema

 
module.exports = new mongoose.model('Image', imageSchema);

Step 5: Create File/Image Upload HTML Markup Form

Create file/image upload Html form for uploading images or files in MongoDB database; So visit views directory and create an index.ejs file inside it. Then add the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to File Upload using MongoDB in Node JS? -Nicesnippets-com</title>
</head>
<body>
    <h1>Upload Image</h1>
    <form action="/uploadphoto" enctype="multipart/form-data" method="POST">
        <input type="file" name="myImage" accept="image/*">
        <input type="submit" value="Upload Photo">
    </form>
</body>
</html>

Step 6: Import Modules in App.js

Import express, body-parser, mongoose, multer dependencies in app.js; as shown below:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const path = require('path');
const fs = require("fs");
const multer = require("multer");
const mongoose = require("mongoose");
var imageModel = require('../models/imageModel');

 

 
app.use(bodyParser.urlencoded(
    { extended:true }
))

 
app.set("view engine","ejs");

 
// SET STORAGE
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
})

 
var upload = multer({ storage: storage })

 
app.get("/",(req,res)=>{
    res.render("index");
})

 
app.post("/uploadphoto",upload.single('myImage'),(req,res)=>{
    var img = fs.readFileSync(req.file.path);
    var encode_img = img.toString('base64');
    var final_img = {
        contentType:req.file.mimetype,
        image:new Buffer(encode_img,'base64')
    };
    imageModel.create(final_img,function(err,result){
        if(err){
            console.log(err);
        }else{
            console.log(result.img.Buffer);
            console.log("Saved To database");
            res.contentType(final_img.contentType);
            res.send(final_img.image);
        }
    })
})
//Code to start server
app.listen(3000,function () {
    console.log("Server Started at PORT 2000");
})

Step 7: Start App Server

You can use the following command to start the node js app server:

//run the below command
npm start
after run this command open your browser and hit 
http://127.0.0.1:3000/

More on this topic