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