what is cloudinary

Cloudinary is a service like AWS S3 which allows you to store, transform and deliver digital assets

How to integrate the cloudinary with nextJS front end

• You will need to install 2 packages - npm i @cloudinary/url-gen @cloudinary/react
• Then add below code

import {Cloudinary} from "@cloudinary/url-gen";
import {AdvancedVideo} from '@cloudinary/react';

// here cloudName should be changed as per the account details
const cld = new Cloudinary({
    cloud: {
      cloudName: 'djo1bg19v'
    }
  });
  const myVideo = cld.video('docs/walking_talking');
<div>
      <AdvancedVideo cldVid={myVideo} controls/>
    </div>

Cloudinary with NodeJS

• Install lib - npm install cloudinary
• CLOUDINARY_URL=cloudinary://my_key:my_secret@my_cloud_name

var cloudinary = require('cloudinary');
var cloudinary = require('cloudinary').v2;
//import { v2 as cloudinary } from 'cloudinary'

cloudinary.config({
  cloud_name: 'sample',
  api_key: '874837483274837',
  api_secret: 'a676b67565c6767a6767d6767f676fe1',
  secure: true
});

cloudinary.uploader
.upload("my_image.jpg")
.then(result=>console.log(result));

Core concepts

• There are 3 ways to protect assets - Signed URL, Token, Cookie
• Signed URL can be used to access authenticated URLs but we can not time limit it.
• Token and cookie based authentication can be used to time limit the access to assets but they are available in paid plans only.
• One of the reason why you would want to avail the cloudinary is to transform the assets
• search api can be used to search assets by tags, upload time etc
• Upload api can be used to upload assets
• Some projects you can do using cloudinary are - Image collage maker, online image editing, gallery app

Errors