---
title: Cloudinary image upload
tags: others
---

# Cloudinary

Developers and marketers use Cloudinary to quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth.

- Cloudinary link: https://cloudinary.com/console/c-195c00d985c9b678dca3f0e5975f9c/welcome

## Image upload

- Document: https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_rest_api

- Code example: https://github.com/barrystone/social_app/blob/main/frontend/src/components/UpdateProfile.tsx

- Setting preset

- Setting on bellow: (setting icon => upload(bottom) )


- API:

https://api.cloudinary.com/v1_1/<your-cloud-id>/image/upload

## Signed
- Authenticated requests (protected)
- Set default upload presets as
<sign-upload-preset-name-of-the-project-you-want-apply>


- **Only one project(signed upload preset) can be implement**
- Setting on bellow: (setting icon => upload(bottom) )

https://cloudinary.com/documentation/upload_presets#default_upload_presets

- Required parameters :
- file
- api_key
- public_id : file name
- eager
- timestamp
- signature

- .env (variable needed)
- CLOUDINARY_API_KEY
- CLOUDINARY_API_SECRET

- Example: https://github.com/barrystone/social_app/blob/2a30f27fc65632c54eb05e50b3e50deb444ba03e/frontend/src/components/UpdateProfile.tsx

- signature and timestamp (nodejs-react-typescript-crypto)

import Crypto from 'crypto';

const timestamp = Math.round(Number(new Date()) / 1000);

const signature = Crypto.createHash('sha256')
.update(
`eager=w_400,h_300,c_pad|w_260,h_200,c_crop&public_id=${public_id}&timestamp=${timestamp}${process.env.REACT_APP_CLOUDINARY_API_SECRET}`
)
.digest('hex');

## Unsigned

- Unauthenticated requests (unprotected)

- Can use different unsigned upload preset on multiple project for implement

- Required parameters:

- file
- upload_preset

- Example: https://github.com/barrystone/social_app/blob/f3113cb295adf2a3fe4f1d9d4afcb188391be88e/frontend/src/components/UpdateProfile.tsx