Skip to content
Related Articles

Related Articles

How to upload single/multiple image to cloudinary using node.js ?

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Jan, 2022

Cloudinary is an end-to-end image and video management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations to delivery.


  • Step 1: Go to the project directory and initialize the project using the below command in the terminal.

    npm init -y
  • Step 2: Install the required npm packages using the following command.

    npm install express multer cloudinary
  • Step 3: Create 2 files in the current project directory named index.js and public/index.html as shown in the below project directory.

Project Structure:

index.html: It basically contains 2 forms i.e single and multiple file upload.


<!DOCTYPE html>
<body style="padding: 30px;">
    <form method="POST" action="/profile-upload-single" 
            <label>Upload profile picture</label>
            <input type="file" name="profile-file" required/>
            <input type="submit" value="Upload" />
    <form method="POST" action="/profile-upload-multiple" 
            <label>Upload multiple profile picture</label>
            <input type="file" name="profile-files" required multiple  />
            <input type="submit" value="Upload" />

index.js: Replace cloud_name, api_key, api_secret with your cloudinary credentials which you can find on cloudinary dashboard.


// Requiring module
const express = require("express");
const multer = require("multer");
const port = 3000;
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require("body-parser");
const fs = require("fs");
// Creating uploads folder if not already present
// In "uploads" folder we will temporarily upload
// image before uploading to cloudinary
if (!fs.existsSync("./uploads")) {
// Multer setup
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "./uploads");
    filename: function (req, file, cb) {
        cb(null, file.originalname);
var upload = multer({ storage: storage });
// Body parser configuration
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public"));
app.use("/uploads", express.static("uploads"));
// Cloudinary configuration
    cloud_name: "YOUR_CLOUD_NAME",
    api_key: "YOUR_API_NAME",
    api_secret: "YOUR_API_SECRET",
async function uploadToCloudinary(locaFilePath) {
    // locaFilePath: path of image which was just
    // uploaded to "uploads" folder
    var mainFolderName = "main";
    // filePathOnCloudinary: path of image we want
    // to set when it is uploaded to cloudinary
    var filePathOnCloudinary = 
        mainFolderName + "/" + locaFilePath;
    return cloudinary.uploader
        .upload(locaFilePath, { public_id: filePathOnCloudinary })
        .then((result) => {
            // Image has been successfully uploaded on
            // cloudinary So we dont need local image 
            // file anymore
            // Remove file from local uploads folder
            return {
                message: "Success",
                url: result.url,
        .catch((error) => {
            // Remove file from local uploads folder
            return { message: "Fail" };
function buildSuccessMsg(urlList) {
    // Building success msg to display on screen
    var response = `<h1>
                   <a href="/">Click to go to Home page</a><br>
    // Iterating over urls of images and creating basic
    // html to render images on screen
    for (var i = 0; i < urlList.length; i++) {
        response += "File uploaded successfully.<br><br>";
        response += `FILE URL: <a href="${urlList[i]}">
        response += `<img src="${urlList[i]}" /><br><hr>`;
    response += `<br>
<p>Now you can store this url in database or 
  // do anything with it  based on use case.</p>
    return response;
    async (req, res, next) => {
        // req.file is the `profile-file` file
        // req.body will hold the text fields,
        // if there were any
        // req.file.path will have path of image
        // stored in uploads folder
        var locaFilePath = req.file.path;
        // Upload the local image to Cloudinary 
        // and get image url as response
        var result = await uploadToCloudinary(locaFilePath);
        // Generate html to display images on web page.
        var response = buildSuccessMsg([result.url]);
        return res.send(response);
    upload.array("profile-files", 12),
    async (req, res, next) => {
        // req.files is array of `profile-files` files
        // req.body will contain the text fields,
        // if there were any
        var imageUrlList = [];
        for (var i = 0; i < req.files.length; i++) {
            var locaFilePath = req.files[i].path;
            // Upload the local image to Cloudinary
            // and get image url as response
            var result = await uploadToCloudinary(locaFilePath);
        var response = buildSuccessMsg(imageUrlList);
        return res.send(response);
app.listen(port, () => {
    console.log(`Server running on port ${port}!
            \nClick http://localhost:3000/`);

Steps to run the program:

node index.js

Output: Open the browser and visit http://localhost:3000. You could now see the following 2 forms i.e single and multiple image upload as shown below.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!