How To Upload Images to MongoDB using Express/Imgur clone

This is an example of how to upload images to MongoDB using Express.

1. Create a package.json for your app

Yes for all options that appear

$ npm init

2. Install dependencies

Express our web framework

EJS our template engine

gridfs-stream allows us to stream data into MongoDB

Mongoose lets use connect to MongoDB

Multer is middleware to handle multipart/form-data

$ npm install ejs express gridfs-stream mongoose multer --save


3. Create the app in index.js

$ touch index.js

and open the file

4. Open index.js and write the following code into it

var express = require("express");
var app = express();

var fs = require("fs");

var multer = require("multer");
var upload = multer({dest: "./uploads"});

var mongoose = require("mongoose");

var conn = mongoose.connection;

var gfs;

var Grid = require("gridfs-stream");
Grid.mongo = mongoose.mongo;

conn.once("open", function(){
  gfs = Grid(conn.db);
  app.get("/", function(req,res){
    //renders a multipart/form-data form

  //second parameter is multer middleware."/", upload.single("avatar"), function(req, res, next){
    //create a gridfs-stream into which we pipe multer's temporary file saved in uploads. After which we delete multer's temp file.
    var writestream = gfs.createWriteStream({
      filename: req.file.originalname
    // //pipe multer's temp file /uploads/filename into the stream we created above. On end deletes the temporary file.
    fs.createReadStream("./uploads/" + req.file.filename)
      .on("end", function(){fs.unlink("./uploads/"+ req.file.filename, function(err){res.send("success")})})
        .on("err", function(){res.send("Error uploading image")})

  // sends the image we saved by filename.
  app.get("/:filename", function(req, res){
      var readstream = gfs.createReadStream({filename: req.params.filename});
      readstream.on("error", function(err){
        res.send("No image found with that title");

  //delete the image
  app.get("/delete/:filename", function(req, res){
    gfs.exist({filename: req.params.filename}, function(err, found){
      if(err) return res.send("Error occured");
        gfs.remove({filename: req.params.filename}, function(err){
          if(err) return res.send("Error occured");
          res.send("Image deleted!");
      } else{
        res.send("No image found with that title");

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

if (!module.parent) {


5. Create a folder named views with a file named home.ejs inside

And open home.ejs after running these commands

$ mkdir views
$ touch home.ejs


6. Open views/home.ejs and write the following code

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <form action="/" method="POST" enctype="multipart/form-data">
    <input type="file" name="avatar">
    <input type="submit" value="submit">


6. Start MongoDB and run your app

$ mongod
$ node index.js


7. Go to localhost:3000 and upload an image

Image upload

success means the image uploaded

Image upload success

8. Now you can find your image by typing the images name into the url

Image upload wolf

Note: If you don’t know the images name, simply open mongo and view the database

$ mongo
$> use images
$> db.fs.files.find()

and look at “filename”