Image upload is a very essential aspect of modern day websites. However, most beginners find it intimidating to do because they don't know what service to use or how to use the service. Therefore, I present below the step by step guide of how to upload multiple and single images to Cloudinary with just one function in NodeJs.

• Step 1:

The first step in this process is to grab the image from the user. You can use plain HTML for it or you can use a framework e.g ReactJS. Regardless of the one you use, it still the same format.

Here we create our form in the client side.

     <form
      action="http://localhost:4006/upload"
      method="post"
      enctype="multipart/form-data"
     >

      <input type="file" name="image" id="image" multiple />
      <button type="submit">Submit</button>

    </form>

• Step 2:

Create a Cloudinary account. Go to your cloudinary dashboard to see your account details containing your cloud name, API key and API secret.

• Step 3:

Setup NodeJs server.

a. Create folder e.g cloudinaryUpload, and open on your favorite code editor.

b. Open terminal and initialize app by running npm init -y

c. Setup your package.json to look like the setup below:

{
    "name": "cloudinary upload,
    "version": "1.0.0",
    "description": "Your description",
    "main": "server.js",
    "scripts": {
      "start": "node server.js",
      "server": "nodemon server.js"
    },
    "keywords": "",
    "author": "Onuorah Bonaventure Chukwudi (Bonarhyme)",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {}
  }

d. Install neccessary dependencies by running npm install express nodemon cloudinary multer

e. Create server.js file and set it up like below:

const express = require("express")
const app = express()

app.use(express.json())

// Multer setup goes under here

// The route we will use
app.post("/upload", (req, res) =>{})

app.listen("4006", () => console.log("Server running on port 4006"))

f. Add multer configuration

// Multer Setup goes under here
// Multer handles the collection of files from the server
const multer = require("multer");
const storage = multer.diskStorage({});

const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith("image")) {
    cb(null, file.fieldname + "-" + Date.now());
  } else {
    cb("invalid image file!", false);
  }
};

const upload = multer({ storage, fileFilter });

// Cloudinary config goes under here

g. Add Cloudinary config

Import cloudinary and set it up like this using your account details from Cloudinary.

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

// Cloudinary config goes under here
cloudinary.config({
  cloud_name: "Cloudname goes here",
  api_key:  "API key goes here",
  api_secret: "API secret goes here",
  // secure: true
});

h. Create your upload function right inside the route and it up like below. Also pass multer as a middleware.

// The route we will use
app.post("/upload", upload.array("image"), (req, res) => {    
let pictureFiles = req.files;

 if (!pictureFiles) {
    res.status(400).send("No picture attached!");
 }

// Magic function to handle both multiple and single image upload
 let multiplePicturePromise = pictureFiles.map((picture, index) =>
      cloudinaryImp.uploader.upload(picture.path, {
        public_id: `${Date.now()}_${index}`,
        height: 400,
        width: 400,
        crop: "fill",
      })
    );

})

// Get the response from cloudinary
const imageResponse = await Promise.all(multiplePicturePromise);

 const imagesUrl = imageResponse.map((image) => {
   const url = image.secure_url;
     return { url };
    });

if(imagesUrl.length > 0){
  res.send({
       message: "Image upload was successful"
       images: imagesUrl
 })

i. Start the app by running npm run server on the terminal.

Remarks

Congratulations!!! You have succeeded!!!

Please follow me on twitter Bonaventure Chukwudi

Support me on Patreon