Storing and Retrieving files from MongoDB using MEAN stack and GridFS

Every application needs to store its data at some point be it in a database or a file system. However, it’s sometimes more convenient to store files in a database instead of a file system. MongoDB is one such database system that allows us to do so. It integrates well with Node.js( one of the most trending backend technologies) apps.

MongoDB is a NoSQL document-database, meaning it stores the data in the form of documents. Default document size limit in MongoDB is 16MB. That is if you want to store files upto 16MB then it’s not a big deal. But to store heavy files of size exceeding 16MB, MongoDB provides a module called GridFS. What GridFS does is that it divides your files into the chunks of 255kB (initially it was 256kB) and then stores it into the database.

What exactly happens is it creates two collections in your database instance that you are currently using. In one collection, it stores the 255kB chunks of the files and the other collection is a document that contains the meta-data of your file. We are going to make a File Uploader and Downloader MEAN stack app.

MEAN stack is a web application development stack:

1. MongoDB — Database
2. Express — Server-side
3. Angular — Client-side
4. Node — Javascript runtime that lets you run javascript on the server

Server-side

We are going to use Express.js for the server-side. Express is a node.js framework that lets you build APIs and that is exactly what we’re going to build in this project.

Modules that we are going to use:

1. body-parser — for parsing requests
2. mongoose — connecting to MongoDB
3. multer — middleware for handling multipart/form-data
4. multer-gridfs-storage — GridFS storage engine for multer to store files directly to MongoDB
5. gridfs-stream — used to stream data

Package.json

[embed]

This file contains the list of the dependencies of the project along with some other details including scripts that would run on the shell.

RESTful-API

[embed]

App.js is our server-side code. Client-side of the application would make request to this API to get the data from the database.

This is was all about the server-side. To run this code you would first need a MongoDB server running in your system. Let’s now look at the client-side of the application.

Client-side

Angularjs is used for the client side rendering. Angular is a full-fledged MVC pattern based framework built by the Google to build progressive web applications. Angular is a component based framework. A web app can have a lots of components. However, for this application, we’ll have just one component to handle all the stuffs.

A module called ng2-file-upload is used. It gives us a handful of methods to handle uploading of the files.

To use it, first install and save it via npm. Then import it in your app.modules.ts file.

App.modules.ts

[embed]

Layout of the component

[embed]

Bootstrap and font-awesome are used for the responsiveness and the icons.

TypeScript logic of the component

[embed]

We have made a custom service file called FilesService to make all the GET and POST requests. It is strongly recommended to use services to make http calls and not let your components do it. Components are only meant for the logic and the view.

FilesService file for making http calls

[embed]

After you’ve uploaded a file, you need to refresh the page to see that uploaded file in the ‘list of the files’ in your client-side app. This is because MongoDB, by default, isn’t a real-time database. However, you can make it real-time using socket.io.

This was all about uploading and downloading files using GridFS.