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