Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Installation:

  • 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.

index.html




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


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

index.js




// 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")) {
    fs.mkdirSync("./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.json());
app.use(bodyParser.urlencoded({ extended: true }));
  
app.use(express.static(__dirname + "/public"));
app.use("/uploads", express.static("uploads"));
  
// Cloudinary configuration
cloudinary.config({
    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
            fs.unlinkSync(locaFilePath);
  
            return {
                message: "Success",
                url: result.url,
            };
        })
        .catch((error) => {
  
            // Remove file from local uploads folder
            fs.unlinkSync(locaFilePath);
            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>
                  </h1><hr>`;
  
    // 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]}">
                    ${urlList[i]}</a>.<br><br>`;
        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;
}
  
app.post(
    "/profile-upload-single",
    upload.single("profile-file"),
    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);
    }
);
  
app.post(
    "/profile-upload-multiple",
    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);
            imageUrlList.push(result.url);
        }
  
        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.

References: https://cloudinary.com/documentation/node_integration.



Last Updated : 20 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads