Introduction

When building modern web applications, handling user-uploaded images is almost inevitable. Whether it’s for user profile pictures, product galleries, or blog post banners, developers need a reliable way to store and manage images.

That’s where Cloudinary comes in. It's a cloud-based image storage and optimization service that lets you upload, store, transform, and serve images efficiently — all without bloating your server or compromising performance.

Instead of saving images directly to your backend server or local file system (which can be risky and hard to scale), Cloudinary provides a secure, scalable, and globally accessible solution. Plus, it offers on-the-fly transformations like resizing, cropping, and compression, which makes frontend performance much smoother.

To get those images from your users into Cloudinary, we use Multer, a Node.js middleware that handles multipart/form-data — the encoding used for file uploads. Multer allows us to intercept files from HTTP requests, and when paired with the Cloudinary-storage plugin, it sends them directly to your Cloudinary account.

In this blog, we’ll walk through how to combine Multer + Cloudinary in a MERN (MongoDB, Express, React, Node.js) app to seamlessly handle image uploads.

Tech Stack

React.js – Frontend
Node.js + Express – Backend
MongoDB – Database
Multer – For file uploads
Cloudinary – Cloud image storage and transformation
Axios – API communication

Step-by-Step Implementation

1. Configure Cloudinary

Create a Cloudinary account and get your cloud name, API key, and secret. Then add this config to your backend:

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

cloudinary.config({
  cloud_name : process.env.CLOUD_NAME,
  api_key : process.env.CLOUD_API_KEY,
  api_secret : process.env.CLOUD_API_SECRET
});

2. Set up Multer with Cloudinary Storage

Use the multer-storage-cloudinary package:

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

const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: 'wanderlust_DEV',
    allowedFormats: ["png", "jpg", "jpeg", "pdf"],
  },
});

module.exports = { cloudinary, storage };

3. Express Route for Uploading

const multer = require('multer');
const { storage } = require("./cloudConfig.js");

const upload = multer({ storage });

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({ url: req.file.path });
});

4. React Frontend Upload Form

const formData = new FormData();
formData.append('image', selectedFile);

axios.post('/upload', formData);

5. Store Image URL in MongoDB

Save the returned Cloudinary URL in your MongoDB database as part of the document (e.g., product).

let savedURL = await newURL.save();

✅ Result

After uploading, the image is stored in your Cloudinary account, and the app can use its secure URL directly. This approach makes your app lighter, scalable, and avoids file system storage headaches.

Bonus Tips

Validate image type (jpg/png only) and size using Multer
Use Cloudinary transformations (e.g., resize/crop)
Allow users to preview the image before submitting

Conclusion

Integrating Cloudinary with your MERN app greatly improves image handling. It’s fast, reliable, and offloads media storage from your server. Whether you’re building a portfolio, e-commerce platform, or a user profile system, this technique is simple and production-ready.

Uploading Images to Cloudinary in a MERN Stack App using Multer