\ File uploads are a common feature in many web applications, but handling them efficiently and securely can be challenging. In this article, we will explore how to implement efficient file uploads using Node.js, Express.js, and MongoDB. We will cover the entire process, from setting up the server to storing files in MongoDB GridFS, ensuring that your application can handle large files without sacrificing performance.
Problem StatementHandling file uploads efficiently involves several challenges:
We will use the following stack to address these challenges:
First, let’s create a new Node.js project and install the necessary dependencies.
mkdir file-upload-app cd file-upload-app npm init -y npm install express multer mongoose gridfs-stream 2. Creating the ServerNext, we will set up a basic Express server.
// server.js const express = require('express'); const mongoose = require('mongoose'); const multer = require('multer'); const { GridFsStorage } = require('multer-gridfs-storage'); const Grid = require('gridfs-stream'); const methodOverride = require('method-override'); const bodyParser = require('body-parser'); const crypto = require('crypto'); const path = require('path'); const app = express(); // Middleware app.use(bodyParser.json()); app.use(methodOverride('_method')); app.set('view engine', 'ejs'); // Mongo URI const mongoURI = 'mongodb://localhost:27017/fileupload'; // Create mongo connection const conn = mongoose.createConnection(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }); // Init gfs let gfs; conn.once('open', () => { // Init stream gfs = Grid(conn.db, mongoose.mongo); gfs.collection('uploads'); }); // Create storage engine const storage = new GridFsStorage({ url: mongoURI, file: (req, file) => { return new Promise((resolve, reject) => { crypto.randomBytes(16, (err, buf) => { if (err) { return reject(err); } const filename = buf.toString('hex') + path.extname(file.originalname); const fileInfo = { filename: filename, bucketName: 'uploads' }; resolve(fileInfo); }); }); } }); const upload = multer({ storage }); // @route POST /upload // @desc Uploads file to DB app.post('/upload', upload.single('file'), (req, res) => { res.json({ file: req.file }); }); // @route GET /files // @desc Display all files in JSON app.get('/files', (req, res) => { gfs.files.find().toArray((err, files) => { // Check if files if (!files || files.length === 0) { return res.status(404).json({ err: 'No files exist' }); } // Files exist return res.json(files); }); }); // @route GET /files/:filename // @desc Display single file object app.get('/files/:filename', (req, res) => { gfs.files.findOne({ filename: req.params.filename }, (err, file) => { if (!file || file.length === 0) { return res.status(404).json({ err: 'No file exists' }); } return res.json(file); }); }); // @route GET /image/:filename // @desc Display Image app.get('/image/:filename', (req, res) => { gfs.files.findOne({ filename: req.params.filename }, (err, file) => { if (!file || file.length === 0) { return res.status(404).json({ err: 'No file exists' }); } // Check if image if (file.contentType === 'image/jpeg' || file.contentType === 'image/png') { // Read output to browser const readstream = gfs.createReadStream(file.filename); readstream.pipe(res); } else { res.status(404).json({ err: 'Not an image' }); } }); }); // @route DELETE /files/:id // @desc Delete file app.delete('/files/:id', (req, res) => { gfs.remove({ _id: req.params.id, root: 'uploads' }, (err, gridStore) => { if (err) { return res.status(404).json({ err: err }); } res.redirect('/'); }); }); const port = 5000; app.listen(port, () => console.log(`Server started on port ${port}`)); 3. Testing the Upload FeatureWe can test our implementation using tools like Postman.
In this article, I demonstrated how to handle file uploads efficiently using Node.js, Express.js, and MongoDB. By leveraging GridFS, we can store and manage large files seamlessly, ensuring scalability, security, and performance. This approach can be further customized and expanded based on specific application requirements, making it a versatile solution for file management in modern web applications.
All Rights Reserved. Copyright , Central Coast Communications, Inc.