Introduction

Handling blog post images is an essential part of any content platform. Using Multer and Cloudinary together is one of the most effective ways to handle image upload in Node.js applications.

In this Multer Cloudinary image upload tutorial, we’ll walk through how to create a seamless blog image upload system that stores and optimises images in the cloud.

Why Use Cloudinary for Blog Image Hosting

Cloudinary image hosting for blogs offers:

• Secure, scalable image storage

• Real-time image optimisation and transformation

• Global CDN for fast delivery

• Easy integration with Node.js

This makes it ideal for modern blog post image upload Node.js solutions.

Setting Up Node.js and Express

Start by creating a new Express.js project:

bash

npm init -y

npm install express dotenv

Create a basic server in app.js:

js

const express = require('express');

const app = express();

require('dotenv').config();

app.use(express.json());

app.listen(3000, () => console.log('Server running on port 3000'));

Installing Multer and Cloudinary SDK

Now, install the packages for file handling and Cloudinary integration:

bash

npm install multer cloudinary multer-storage-cloudinary

This enables Multer Cloudinary middleware setup for image uploads in Express.

Cloudinary Integration in Node.js

Configure your Node.js Cloudinary integration in a separate file:

js

// config/cloudinary.js

const cloudinary = require('cloudinary').v2;

cloudinary.config({

cloud_name: process.env.CLOUDINARY_NAME,

api_key: process.env.CLOUDINARY_KEY,

api_secret: process.env.CLOUDINARY_SECRET,

});

module.exports = cloudinary;

This setup allows you to upload images to Cloudinary Node.js easily from your Express routes.

Creating the Multer Middleware

Next, configure Multer to use Cloudinary as the storage engine:

js

// middleware/multer.js

const multer = require('multer');

const { CloudinaryStorage } = require('multer-storage-cloudinary');

const cloudinary = require('../config/cloudinary');

const storage = new CloudinaryStorage({

cloudinary,

params: {

folder: 'blog-images',

allowed_formats: ['jpg', 'png', 'jpeg', 'webp'], },

});

const upload = multer({ storage });

module.exports = upload;

This middleware is essential for uploading blog images with Multer and Cloudinary.

Uploading Blog Images with Multer and Cloudinary

Create a route to handle the image upload:

js

// routes/imageRoutes.js

const express = require('express');

const upload = require('../middleware/multer');

const router = express.Router();

router.post('/upload', upload.single('image'), (req, res) => {

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

});

module.exports = router;

Use the route in your app.js:

js

const imageRoutes = require('./routes/imageRoutes');

app.use('/api/images', imageRoutes);

You've now built an image upload API with Multer for your blog.

Uploading Multiple Images to Cloudinary

To upload multiple images to Cloudinary, change upload.single to upload.array:

js

router.post('/multi-upload', upload.array('images', 5), (req, res) => {

const urls = req.files.map(file => file.path);

res.json({ imageUrls: urls }); });

This is useful when posts include galleries or featured images.

Optimizing Blog Images with Cloudinary

Optimize blog images with Cloudinary Node.js using transformation parameters:

js

cloudinary.url(req.file.filename, {

width: 800,

crop: "scale",

quality: "auto",

});

You can also lazy load or serve responsive images on the frontend via Cloudinary’s APIs.

Conclusion

By combining Multer and Cloudinary, you create a powerful and scalable image upload workflow for any blog system. From single and multiple file uploads to real-time image optimization, this approach ensures your blog is fast, lightweight, and production-ready.

Whether you’re building a full CMS or a static blog platform, uploading blog images with Multer and Cloudinary gives you the performance edge you need.