How to: Host and upload photos to Cloudinary for your React app

How to host images on Cloudinary with React SDK, for free and directly transform your images without additional photo-editing tools.

So, you added the super cool functionality for users to upload their own images to your app (using local Storage if you built your app with Ruby on Rails) and it no longer works on Heroku? At first glance, it may seem to work but those images won’t persist and will not be there the next time you access your app, so you now need a different storage solution. Cloudinary to the rescue!

A note on SDKs

Cloudinary’s SDK libraries are available for most popular programming languages for seamless integration with your code. The guides provide proper installation and setup instructions.

Available SDKs:

Installing Cloudinary’s React SDK

Start by creating an account on Cloudinary and follow the steps below in your terminal.

  1. Install Cloudinary’s React SDK with npm
npm install cloudinary-react --save

2. Include the required elements of the cloudinary-react library in your code, there are 4 available:

  • CloudinaryContext — allows you to define shared parameters that are applied to all child elements.
  • Image — defines a Cloudinary Image tag.
  • Video — defines a Cloudinary Video tag.
  • Transformation — allows you to define additional transformations on the parent element.
import {Image, Video, Transformation, CloudinaryContext} from 'cloudinary-react';

3. Configure Cloudinary React elements with available configuration parameters directly to each element, like so:

<Image cloudName="demo" publicId="sample" width="300" crop="scale" />

The Cloudinary JavaScript library

import cloudinary from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: 'demo'});
const SampleImg = () => (
<img src={cloudinaryCore.url('sample')} />
);

Image Transformations

<Image publicId="front_face.png" secure="true">
<Transformation width="150" height="150" gravity="face" crop="thumb" />
<Transformation radius="20" />
<Transformation effect="sepia" />
<Transformation overlay="cloudinary_icon" gravity="south_east" x="5" y="5" width="50" opacity="60" effect="brightness:200" />
<Transformation angle="10" />
</Image>
// Auto-generated URL from above code
https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon,g_south_east,x_5,y_5,w_50,o_60,e_brightness:200/a_10/front_face.png

Transformation effects:

  • Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
  • Round the corners with a 20 pixel radius
  • Apply a sepia effect
  • Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
  • Rotate the resulting image (including the overlay) by 10 degrees
  • Convert and deliver the image in PNG format (the originally uploaded image was a JPG)

Cloudinary’s host of SDKs that likely cover most if not all of the languages you may be coding in makes it extremely accessible across all platforms. It’s thorough and easy-to-understand documentation is a huge plus. Cloudinary even has a video tutorial about how to navigate their site and make the most of all of the incredible tools they offer. All in all, Cloudinary is a great resource for your image and video hosting needs.