DEV Community

Cover image for How to Cloudinary in React JS.
Femi Obadimu
Femi Obadimu

Posted on

How to Cloudinary in React JS.

Hey Fellas, Today we'd discuss how to cloudinary in react js

Firstly i'd love to tell you what cloudinary entails and what its used for .

*Cloudinary is an end-to-end image and video-management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations, file-organizations, to delivery all done in the cloud *

Yes, as stated here .
Say , you're working on a fullstack application and you need a medium whereby you can manage videos, images etc considering speed, optimization and quality of the assets in the application you're building from the frontend to the Cloud. Rather than clogging your backend with all these making in heavy an inefficient.

Cloudinary is the best i've seen so far and i really love it because of its level of simplicity.
Other examples are :
1.Uploadcare
2.Sirv
3.Imagekit.io
4.Cloudconvert

*Steps to set up Cloudinary *
1.Sign up / Login to Cloudinary.
2.Set up a cloudname for the account you've created.
3.Go to Settings/upload
4.Set "uploading enabled : unsigned"
5.Start Using Cloudinary

Steps to Cloudinary in React Js
You need to set up an env file to help store your secret key from the public

REACT_APP_CLOUDINARY_KEY = SECRET-KEY
Enter fullscreen mode Exit fullscreen mode

The package used here is React-Toastify

Below is a react component code, to help out

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Cloud = () => {

  const [image, setImage] = React.useState();
  return (
    <div>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={true}
        newestOnTop={false}
        closeOnClick
      />

      <div>
        <div className="col-span-3">
          <label className="block text-sm font-medium text-gray- 
           700">
            Product Image
          </label>
          <div className="mt-1 border-2 border-gray-300 border- 
          dashed rounded-md px-6 pt-5 pb-6 flex justify-center">
            <div className="space-y-1 text-center">
              {image ? (
                <img src={image.blog} alt="Mart" />
              ) : (
                <svg
                  className="mx-auto h-12 w-12 text-gray-400"
                  stroke="currentColor"
                  fill="none"
                  viewBox="0 0 48 48"
                  aria-hidden="true"
                >
               <path
                 d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 
                 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172- 
                 3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 
                0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
              <div className="flex text-sm text-gray-600">
                <label
                 htmlFor="file-upload"
                 className="relative cursor-pointer bg-white 
                 rounded-md font-medium main-clr  focus- 
                 within:outline-none focus-within:ring-2 focus- 
                 within:ring-offset-2 "
                >
                  <span className="text-center ">Upload a 
                 file</span>
                  <input
                    id="file-upload"
                    name="file-upload"
                    type="file"
                    className="sr-only"
                    onChange={(e) => {
                      e.preventDefault();
                      setImage({
                        file: e.target.files[0],
                        blog: 
                        URL.createObjectURL(e.target.files[0]),
                      });

                      console.log(e.target.files[0]);
                    }}
                  />
                </label>
                <p className="pl-1">or drag and drop</p>
              </div>
              <p className="text-xs text-gray-500">PNG, JPG not up 
              to 1MB</p>
            </div>
          </div>
        </div>

        <div className="text-center my-4">
          <button
            type="submit"
            onClick={onCloudinary}
            className="main-bg mx-3 border border-transparent 
            rounded-md shadow-sm py-2 px-4 inline-flex justify- 
            center text-sm font-medium text-white focus:outline- 
            none focus:ring-2 focus:ring-offset-2"
          >
            {" "}
            Upload
          </button>
        </div>
      </div>
    </div>
  );
};

export default Cloud;
Enter fullscreen mode Exit fullscreen mode

Here's The mail Code Function that triggers when the button is clicked.

Image description

This is all you need ..
I hope this helps you out..
fell free to reachout if you dont understand anything

Thanks and Regards..

Top comments (0)