How to upload and delete files on cloudinary

File upload is a very common feature that almost every website needs, but managing these file uploads in the backend can be a bit tedious. When a web client uploads a file to a server, it is generally submitted through a form and encoded as multipart/form-data.

So now we have gotten the file and sent it to our backend, now the question that arises is Where do we save it?🤔

This is where a CDN comes to the rescue!😀

What is a CDN?

Content Delivery Networks (CDNs) provide end-users with fast digital experiences by serving static assets like HTML pages, javascript files, stylesheets, images, and videos from the “edge” of the internet closest to them.🤯

Sounds cool, doesn't it?

But in our case we just want to store images, so wouldn't it be awesome if there was a CDN optimized for storing and delivering images and videos.🙃

That's where Cloudinary comes in the fold!

Cloudinary provides cloud-based image and video management services. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and apps.🤯🤯

Now let's get our hands dirty with Cloudinary!

Step 0:

Creating the Cloudinary account.

First things first, we need a Cloudinary account. This is quite straightforward go to their sign up page and sign up!
Once you are successfully signed up you will be taken to the dashboard where you will find your account details(This will be useful later).

Step 1:

Setting up our backend.

We are going to use NodeJS as our backend.
Set up a simple NodeJS project with ExpressJS, Cloudinary, and cors packages installed
```
npm i express cloudinary cors
```

Step 1.5:

Setting up the ExpressJS server

We are going to keep it simple with the ExpressJS part since that's not our main focus for today.

Create a index.js file and add the following code

const express = require('express');
const app = express();
var cors = require('cors');

app.use(cors());

app.post('/api/upload', async (req, res) => {

});

const port = process.env.PORT || 8000;
app.listen(port, () => {
    console.log('listening on 8000");
});

You may have noticed the post endpoint, it's where we are going to get our image file.

Step 2

Configuring Cloudinary

Remember the Account Details we saw on the dashboard of Cloudinary?

cloudinary dashboard.JPG

We are going to need the cloud name, API key, and API secret to configure our Cloudinary.

Create a cloudinary.js file and add the following code

const cloudinary = require('cloudinary').v2;
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

module.exports = { cloudinary };

We can supply these values using environment variables.

Step 3

Connecting ExpressJS with Cloudinary

We have set up our ExpressJS server and we have Configured our Cloudinary!
What's next? Connecting them together of course.

Import cloudinary into the index.js file.

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

Add the middleware for parsing json and set the limit to 5mb.

app.use(express.json({ limit: '5mb' }));

Now we have connected Cloudinary and Express, the next step is to set up the endpoint and we can start uploading files!

Step 4

Setting up the end point

Files that we receive in the backend can be in two formats, either they are sent as form-data or they can be base64 encoded and sent as a string.
Base64 encoded image makes handling the file simple for us as we can deal with it like any other long string and upload to Cloudinary quite easily.
However, we are not going to do it that way as base64 encoding makes file sizes larger than their original binary representation.
So we are going to go for the form-data approach and for this we need Multer.
Install Multer and create a config file for Multer.

npm i multer

create a multer.js file and add the following code.


const multer = require("multer");
const path = require("path");

module.exports = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => {
    let ext = path.extname(file.originalname);  
    if (ext !== ".jpg" && ext !== ".jpeg" && ext !== ".png") {
      cb(new Error("File type is not supported"), false);
      return;
    }
    cb(null, true);
  },
});

Here we have added a filter for only jpg and png files.
Now we can import this in our index.js and we can set up our endpoint.

const upload = require("./multer");

Add the following code to the "/api/upload" end point that we created earlier.

router.post("/api/upload", upload.single("image"), async (req, res) => {
  try {
    // Upload image to cloudinary
    const result = await cloudinary.uploader.upload(req.file.path);
    console.log(result)
  } catch (err) {
    console.log(err);
  }
});

Now the image has been uploaded to Cloudinary and we get the following object as the result.

{
 access_mode: "public",
 asset_id: "c3d4fdcf93d5513fd1a3b586cb54d41f",
 bytes: 18542,
 created_at: "2021-06-04T19:29:23Z",
 etag: "4e96f1110cb872407e837d4fc1440f96",
 format: "png",
 height: 816 ,
 original_filename: "opengraph",
 placeholder: false,
 public_id: "s5obodylaavkczs9lgk3",
 resource_type: "image",
 secure_url: 
  "https://res.cloudinary.com/conclave/image/upload/v1622834963/s5obodylaavkczs9lgk3.png",
 signature: "e7a2a688ed4d531e475f8769cfb2f96173143fc8",
 tags: [],
 type: "upload",
 url: "http://res.cloudinary.com/conclave/image/upload/v1622834963/s5obodylaavkczs9lgk3.png",
 version: 1622834963,
 version_id: "f2dabc64690671053103602d88b14581",
 width: 816.
}

The URL and public_id are the 2 things of interest for us.
If we have a database we will be storing both the URL and public_id.
- The URL is the thing we send to the frontend to load the image there.
- And the public_id helps us to delete the image in the future.
And we are done! Our image has been successfully uploaded into Cloudinary!! 😀

Bonus

Let's delete the image

router.delete("/api/delete/:public_id", async (req, res) => {
  try {
    // Delete image from cloudinary
    await cloudinary.uploader.destroy(public_id);
  } catch (err) {
    console.log(err);
  }
});

And as simple as the image is deleted on Cloudinary. 🔥

Cheers! and with that, we have set up a backend for uploading and deleting images on Cloudinary🥳.

You can go through the documentation for Cloudinary over here

npm cloudinary

Cloudinary node_integration

Kumaran's Blog