Bonaventure Chukwudi
Bonarhyme

Bonarhyme

How to upload multiple and single images to Cloudinary with just one function in NodeJs

How to upload multiple and single images to Cloudinary with just one function in NodeJs

Bonaventure Chukwudi's photo
Bonaventure Chukwudi

Published on Dec 5, 2021

3 min read

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

 
Share this