Sign up to cloudinary & check your email to confirm your email address

Image and Video Upload, Storage, Optimization and CDN

Setting up the backend to accept file uploads

In your express backend, install some dependencies:

npm install cloudinary dotenv mongoose multer multer-storage-cloudinary

Make a .env file to store your secrets, and paste in the values from the cloudinary admin:

CLOUDINARY_API_KEY=xxx
CLOUDINARY_API_SECRET=yyy

Set up dotenv in your code so the env vars are loaded in:

import dotenv from 'dotenv'

dotenv.config()

Make sure to add .env to the .gitignore

Set up cloudinary:

import cloudinaryFramework from 'cloudinary'
import multer from 'multer'
import { CloudinaryStorage } from 'multer-storage-cloudinary'

const cloudinary = cloudinaryFramework.v2; 
cloudinary.config({
  cloud_name: 'dpem2z8y9', // this needs to be whatever you get from cloudinary
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
})

const storage = new CloudinaryStorage({
  cloudinary,
  params: {
    folder: 'pets',
    allowedFormats: ['jpg', 'png'],
    transformation: [{ width: 500, height: 500, crop: 'limit' }],
  },
})
const parser = multer({ storage })

Now we're ready to make the endpoint: