WhatsApp-like Chat App: Storing and Downloading Images and Videos in MongoDB using node js

Storing and Downloading Images and Videos in MongoDB: From setting up your MongoDB database to designing efficient schemas and implementing robust file handling mechanisms,

this article will equip you with the knowledge and skills needed to tackle multimedia storage and retrieval like a pro.

So, grab your digital toolkit, buckle up, and get ready to unlock the full potential of MongoDB for storing and downloading images and videos.

What is saving files into a MongoDB database?

Saving files into a MongoDB database involves storing binary data, such as images, videos, documents, etc., directly within MongoDB documents.

MongoDB provides a data type called GridFS to store these files. This allows developers to manage both structured data (like JSON documents) and unstructured data (like files) within a single database system.

Why save files into a MongoDB database?

There are several reasons why you might choose to save files into a MongoDB database:

GridFS

GridFS is a specification for storing and retrieving files that exceed the BSON-document size limit of 16 MB , storing and retrieving large files, such as images, videos, audio files, and documents.

It divides the file into smaller chunks and stores each chunk as a separate document.

This allows MongoDB to handle large files efficiently while still providing all the features and benefits of the database.

• GridFS stores files in two collections:

• files collection: This collection stores file metadata, such as

• filename

• content type

• and any additional metadata provided by the application.

• chunks collection: This collection stores the actual binary data of the file broken into smaller chunks.

Simplicity

Storing files directly within MongoDB can simplify your architecture by reducing the need for a separate file storage system.

Scalability

MongoDB is designed to scale horizontally, making it capable of handling large volumes of both structured and unstructured data.

Atomicity

MongoDB provides atomic operations on individual documents, ensuring consistency when saving both structured and unstructured data together.

Flexibility

Storing files alongside related data allows for more flexible querying and retrieval.

Comparison: File System vs GridFs

Traditional Way (e.g., File System):

• Pros:

• Simplicity: Directly saving files to the file system is straightforward and easy to understand.

• Performance: File system operations are typically fast, especially for serving static files.

• Cons:

• Scalability: File systems may have limitations in scaling horizontally, leading to potential performance bottlenecks.

• Maintenance: Managing files separately from other data may require additional effort and infrastructure.

• Backup and Recovery: Backup and recovery procedures may be more complex compared to a unified database system.

Storing in MongoDB:

• Pros:

• Unified Data Management: MongoDB allows storing both structured and unstructured data in a single database, simplifying the architecture.

• Scalability: MongoDB’s horizontal scaling capabilities make it suitable for handling large volumes of both types of data.

• Flexibility: Storing files alongside related data enables more flexible querying and retrieval operations.

• Cons:

• Potential Performance Overhead: Storing files directly within MongoDB documents may introduce performance overhead, especially for large files.

• Increased Database Size: Storing files within the database can increase its size, potentially impacting performance and storage costs.

How to save files into a MongoDB database?

Choose a data modelDecide how you want to structure your data. You may store files directly within documents or use a separate collection to manage files.Encode the fileConvert the file into a binary format that MongoDB can store, such as Base64 encoding.Insert into MongoDBUse MongoDB’s driver for your programming language to insert the file data into the database. Ensure you properly handle error conditions and manage connections.MetadataConsider storing metadata alongside the file, such as filename, MIME type, upload date, etc., to facilitate searching and retrieval.IndexingIf you need to search for files based on metadata, consider creating appropriate indexes to improve query performance.RetrievalImplement logic to retrieve files from the database when needed, decoding the binary data and serving it to clients.

Remember to consider factors such as security (ensuring only authorized users can access and modify files), performance (optimizing queries and storage for efficient file retrieval), and scalability (designing your system to handle increasing volumes of file data).

Code Example : Storing and Downloading Images and Videos in MongoDB

This code provides endpoints for uploading both images and videos to a WhatsApp-like application using Node.js as the backend.

It utilizes Express.js for handling HTTP requests, Multer for handling multipart/form-data (file uploads), and Mongoose for interacting with MongoDB.

GridFS is used for storing large files in MongoDB. Ensure you have MongoDB running locally and adjust the mongoURI accordingly.

// Required modules

const express = require(‘express’);

const multer = require(‘multer’);

const mongoose = require(‘mongoose’);

const Grid = require(‘gridfs-stream’);

const crypto = require(‘crypto’);

const path = require(‘path’);

const fs = require(‘fs’); // Initialize express app

const app = express();

const port = 3000; // MongoDB connection

const mongoURI = ‘mongodb://localhost:27017/whatsapp’;

const conn = mongoose.createConnection(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }); // Initialize GridFS

let gfs;

conn.once(‘open’, () => {

gfs = Grid(conn.db, mongoose.mongo);

gfs.collection(‘uploads’);

}); // Storage configuration using Multer

const storage = multer.diskStorage({

destination: ‘./uploads/’,

filename: function(req, file, cb) {

crypto.randomBytes(16, (err, buf) => {

if (err) return cb(err);

cb(null, buf.toString(‘hex’) + path.extname(file.originalname));

});

}

}); const upload = multer({ storage }); // Upload image endpoint

app.post(‘/upload/image’, upload.single(‘image’), (req, res) => {

res.json({ file: req.file });

}); // Upload video endpoint

app.post(‘/upload/video’, upload.single(‘video’), (req, res) => {

res.json({ file: req.file });

}); // Start server

app.listen(port, () => {

console.log(Server is running on port ${port});

}); Code Explanation

Let’s break down the provided code step by step:

• Required modules: Import necessary modules such as Express, Multer, Mongoose, GridFS, Crypto, Path, and FileSystem.

const express = require(‘express’);

const multer = require(‘multer’);

const mongoose = require(‘mongoose’);

const Grid = require(‘gridfs-stream’);

const crypto = require(‘crypto’);

const path = require(‘path’);

const fs = require(‘fs’);

• Initialize Express app: Create an instance of the Express application.

const app = express();

const port = 3000;

• MongoDB connection: Establish a connection to the MongoDB database.

const mongoURI = ‘mongodb://localhost:27017/whatsapp’;

const conn = mongoose.createConnection(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true });

• Initialize GridFS: Once the connection to MongoDB is open, initialize GridFS and specify the collection to be used.

let gfs;

conn.once(‘open’, () => {

gfs = Grid(conn.db, mongoose.mongo);

gfs.collection(‘uploads’);

});

• Storage configuration using Multer: Configure Multer to specify where to store uploaded files and how to name them.

const storage = multer.diskStorage({

destination: ‘./uploads/’,

filename: function(req, file, cb) {

crypto.randomBytes(16, (err, buf) => {

if (err) return cb(err);

cb(null, buf.toString(‘hex’) + path.extname(file.originalname));

});

}

}); const upload = multer({ storage });

• Define MongoDB Schema for messages: Define a Mongoose schema for messages, which includes fields like sender, receiver, message, type (text, image, or video), and filename of the stored file.

const Message = mongoose.model(‘Message’, {

sender: String,

receiver: String,

message: String,

type: String,

file: String

});

• Upload image and video endpoints: Define endpoints for uploading images and videos. Upon upload, the file is saved to GridFS collection, and a corresponding message object is created and saved to the MongoDB database.

app.post(‘/upload/image’, upload.single(‘image’), (req, res) => {

// Handle image upload

}); app.post(‘/upload/video’, upload.single(‘video’), (req, res) => {

// Handle video upload

});

• Get messages endpoint: Define an endpoint to retrieve messages between a specific sender and receiver.

app.get(‘/messages/:sender/:receiver’, (req, res) => {

// Retrieve messages

});

• Download image or video endpoint: Define an endpoint to download images or videos stored in the MongoDB database using GridFS.

app.get(‘/download/:filename’, (req, res) => {

// Download image or video

});

• Start server: Start the Express server and listen on the specified port.

app.listen(port, () => {

console.log(Server is running on port ${port});

});

This code sets up a basic messaging system with image and video upload/download functionalities using Express, Multer, Mongoose, and GridFS in a Node.js environment.

Conclusion: Elevating Your Media Management Game with MongoDB

Wrapping up our exploration of media storage and retrieval with MongoDB, it’s evident that the database isn’t just a repository for text-based data anymore.

It’s a dynamic ecosystem where images and videos find their digital homes, securely nestled within collections, ready to dazzle audiences across the digital landscape.

In this journey, we’ve traversed the terrain of MongoDB’s capabilities alongside the nimble prowess of Node.js.

Together, they form a dynamic duo, empowering developers to craft seamless solutions for storing and downloading media content.

Happy Learning! Happy Coding!