File Upload in MEAN Stack Apps with MongoDB GridFS !

Okay, as hard as i found a proper naming to this blog post, the concept behind saving files in a MongoDB is relatively simple!

MongoDB is a Document based NoSql DB, it’s by far Noders beloved DB for their project, also it’s supported, but some of the fortune 100 companies for its speed and maintainability.

MongoDB use for its file storage a lovely system called GridFS, it’s basically a storing mechanism for the data that exceed a BSON document size which happens to be 16mb, but we won’t care much about that small detail for our needs, we will just hack our way around the principle and do some CRUD operations.

Okay, let’s start with some Requirements:

  1. NodeJS (of course).
  2. Some packages (we will install them later).
  3. Postman (for testing).
  4. Yarn Package manager.
  5. A Brain ! (we will certainly need this one).

A — Project Setup :

Open your terminal (in MacOS/Linux) or cmd in Windows (CMDer as recommendation for windows users), go to your working directory and write down the following command:

# yarn add -- mongoose gridfs-stream express morgan busboy-body-parser

Now such command will initialize you and install the needed dependencies that will need them in our workflow:

1 — mongoose : Next level ORM for NodeJS and MongoDB.

2 — gridfs-stream : Help us stream in/out data from MongoDB GridFS.

3 — express : Make our HTTP workflow a breeze.

4 — morgan : Express Middle ware used for our HTTP Logging.

5 — busboy-body-parser : Body parsing for multipart/form-data forms in Express.

B — Project Hacking:

So, In order to have an even greater visibility, I’ve made this video in order to explain things in a deeper way, once you finish the video please complete the reading of this tutorial.

So, in this Tutorial I’ve tried to simply create an upload functionality to a nodejs application with MongoDB that will simply let us upload images and returning them in a base64 format.

Youtube Tutorial:

Demo Github Repo :

See you in the next one ;)