How to Cloudinary in React JS.
Tags: javascript, programming, react, beginners
Published: 2022-10-16 15:15:39

## 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 ](https://cloudinary.com/documentation)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
```
The package used here is [React-Toastify](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjG2fHR-eT6AhVAR_EDHfV0AO8QFnoECA8QAQ&url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-toastify&usg=AOvVaw1bVBaAwuDzB6-e9ANcV1Ve)

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;
```
Here's The mail Code Function that triggers when the button is clicked.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hosk59ad7kpp78xk4zgl.png)

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

Thanks and Regards..