How to Upload Images to Cloudinary Using Node.js

Introduction

Image uploads are an essential part of most modern web and mobile applications — whether it’s for user profile pictures, blog content, or e-commerce product photos. However, storing images directly on your server can quickly become inefficient and costly. That’s where Cloudinary, a cloud-based image and video management platform, comes in handy.

In this guide, we’ll walk you through how to upload images directly to Cloudinary using Node.js and Express. You’ll learn how to handle form submissions, manage files efficiently with Multer, and configure Cloudinary to store your media securely in the cloud. This approach is faster, safer, and helps you save server storage space.

What is Cloudinary?

Cloudinary is a popular cloud-based service that allows developers to upload, manage, and deliver images and videos efficiently. It provides powerful APIs to handle image transformation, optimization, and storage without requiring manual setup.

Key Benefits of Using Cloudinary

Automatic image optimization and CDN delivery.
Easy image transformations (resize, crop, compress, watermark).
Scalable and secure cloud storage.
Seamless integration with Node.js, React, Next.js, and other frameworks.

Prerequisites

Before starting, make sure you have the following:

Cloudinary Account – Sign up for free at https://cloudinary.com to get your API credentials.
Node.js and npm – Install from https://nodejs.org if you haven’t already.
Basic Understanding of Express.js – Knowledge of setting up simple routes will be helpful.

Step 1. Set Up a New Node.js Project

First, create a new Node.js project:

mkdir cloudinary-upload
cd cloudinary-upload
npm init -y

Then install the required dependencies:

npm install express cloudinary multer dotenv

These packages serve the following purposes:

express – For creating the web server and handling routes.
cloudinary – For interacting with Cloudinary’s API.
multer – For handling file uploads from forms.
dotenv – For managing environment variables like API keys.

Step 2. Configure Cloudinary in Node.js

Create a .env file in your project’s root directory to store your Cloudinary credentials:

CLOUD_NAME=your_cloud_name
CLOUDINARY_KEY=your_api_key
CLOUDINARY_SECRET=your_api_secret

Then, configure Cloudinary in your app by creating a config/cloudinary.js file:

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

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

module.exports = { cloudinary };

This connects your application securely to your Cloudinary account.

Step 3. Create the Express Server

Now, let’s set up a simple Express server in index.js:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.send('Welcome to Cloudinary Upload Demo!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Run the server:

node index.js

Visit http://localhost:3000 and ensure your setup is working.

Step 4. Set Up Multer for File Uploads

To handle file uploads in Node.js, we use Multer, a middleware for handling multipart/form-data.

In your index.js file, add the following:

const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage });

This setup tells Multer to temporarily store uploaded files in memory instead of saving them locally.

Step 5. Create an HTML Form for Image Upload

Create a simple HTML file called index.html in your root directory:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Upload to Cloudinary</title>
</head>
<body>
  <h2>Upload Image to Cloudinary</h2>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" required>
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Then, modify your Express app to serve this form:

const path = require('path');
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Step 6. Handle Image Upload with Cloudinary

Add the following route to your index.js to handle image uploads:

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

app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });

  const uploadStream = cloudinary.uploader.upload_stream({ resource_type: 'auto' }, (error, result) => {
    if (error) return res.status(500).json({ error: 'Upload failed' });
    res.json({ message: 'Upload successful!', url: result.secure_url });
  });

  uploadStream.end(req.file.buffer);
});

This route handles the upload process and sends the image directly from memory to Cloudinary.

Step 7. Test the Upload

Start your server:

node index.js

Visit http://localhost:3000, select an image and click Upload. If everything is configured correctly, you should see a success message with a Cloudinary image URL.

Example response

{
  "message": "Upload successful!",
  "url": "https://res.cloudinary.com/your_cloud_name/image/upload/v1234567890/sample.jpg"
}

Step 8. Verify the Upload in the Cloudinary Dashboard

Go to your Cloudinary Dashboard → Media Library. You should see your uploaded image there. You can use the provided URL to display the image in your web app or save it in your database.

Example

<img src="https://res.cloudinary.com/your_cloud_name/image/upload/v1234567890/sample.jpg" alt="Uploaded Image" />

Step 9. Optional – Configure Folder and File Type Restrictions

You can specify the upload folder and restrict file types in your upload route:

cloudinary.uploader.upload_stream(
  { resource_type: 'image', folder: 'uploads', allowed_formats: ['jpg', 'png', 'jpeg'] },
  (error, result) => {
    if (error) return res.status(500).send('Error uploading file');
    res.json({ url: result.secure_url });
  }
);

This keeps your uploads organized and ensures only valid image formats are accepted.

Step 10. Deploy Your App

Once everything is working locally, you can deploy your Node.js app on Render, Vercel, or Railway. Just make sure to add your .env variables to your hosting environment’s configuration.

Summary

In this guide, you learned how to upload images directly from an HTML form to Cloudinary using Node.js and Express. By doing this, you skip the need to store images locally and instead take advantage of Cloudinary’s scalable, fast, and secure cloud storage solution.