File Upload with NodeJS and GridFS – MongoDB

Sometimes it is best to store files directly into the database instead of the filesystem. It may be that there is a limit to the number of files that can be stored on the filesystem and it’s always more manageable to have the metadata and files stored at the same place. Storing files and metadata in the DB together also makes replication easier.

MongoDB offers the GridFS driver for handling large files. The maximum size a document can hold in MongoDB is 16mb. Instead of storing the files in a single document GridFS divides it into multiple documents known as chunks. GridFS works by creating two collections for storing your files. fs.files stores the file metadata and other details while the fs.chunks stores the chunks.

Not going into much more details of the what and why part, in this tutorial, we will focus on the “How” part of it, we will learn how we can upload files into MongoDB with nodejs and GridFS.

For the front-end I will use the Angular 2 app we had built for one of our earlier tutorials on file upload.

Prerequisite

First and foremost we need to have MongoDB installed and running on our machine. You can get it installed if you haven’t by following the instructions on the official website. We also need node and npm installed ofcourse.

What we will be building?

For this tutorial, we will have 2 APIs, built with Node.js and ExpressJS. The first API will be responsible for uploading the files into MongoDB using GridFS driver and the second API will get the uploaded file to be viewed/downloaded. We will also need a front-end app that will allow us to upload files. We will use an Angular 2 app which I had built for one of my previous tutorials, however, this article itself won’t include the explanation for browser app but I will provide links to the same.

Build our Application

Start in an empty project directory by running npm init --yes. This will create a package.json for us.

Save this and run npm i. This will install all the project dependencies for us.

You might have noticed a few unfamiliar packages.
We are using mongoose as our ORM for working with MongoDB. I have chosen this over the official MongoDB driver because many of the people prefer mongoose and there are good examples of working with GridFS with the official driver but not so much with mongoose.
We are using multer to upload files and multer-gridfs-storage to setup the storage option for the same. gridfs-stream module provides all the utilities for working with GridFS using Node.js

Create a file named app.js. This is where our application code will go.

This is about the code that we need to upload files using Node.js and GridFS. We are woking with streams because GridFS streams file in and out of MongoDB. Also, if you see we are using filename to retrieve files from MongoDB, if you follow this you need to make sure the filenames are unique, or else you can always use _id provided by MongoDB. The original file name can be stored as metadata.

In your command line tool, run node app.js to start the server. We now have a node server running that can upload files to MongoDB, but we also need a browser app from where we can upload it.

The explanation to the client side application is not in the scope of this article, but we already have two file uploader apps done in AngularJS and Angular 2 respectively, you can follow the guides below to build one.

Watch The Demo!

Conclusion

In this article, we have seen how we can upload files into MongoDB using NodeJS and GridFS. GridFS takes care of most of the complexity and leaves us with very little work to do. Hope this article showed you an easy way for performing File Upload with GridFS. Happy File Uploading!

Excellent tutorial Rahil. I am struggling to find out the way to read this image file from the mongodb and display in webpage (below the form). Could you please provide the code sample that I need to include in my angular 2 project.