Whether in small personal projects or big enterprise ones, image management can get annoyingly complicated. Where to put the files, how to upload them, where are we going to store them, are we going to use a third party service?
Today I’m going to tell you about a super easy way to upload images to Cloudinary with React (Or you can adapt it to whatever framework/library you’re using)
So, let’s get into it!
What is Cloudinary?
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, and delivery.
Ok, a bit more of information?
With Cloudinary, you can easily upload images and videos to the cloud and automate smart manipulations without installing any other software. Cloudinary then seamlessly delivers your media through a fast content delivery network (CDN), optimized with the industry’s best practices.
Does it have a free plan? Can I try it? Can I have a free account for development or small projects?
Yes, yes, and yes! Cloudinary offers a full-featured, free plan with a generous usage limit
They give you “credits”. That is equal to:
- 1,000 Transformations OR
- 1 GB Storage OR
- 1 GB Bandwidth
That means, at least for dev purposes, A LOT!
Main Features
- Media upload
- Image and Video transformations
- Optimized and responsive delivery
- Digital Asset Management (DAM)
Setting up our Cloudinary account:
Create an account at https://cloudinary.com/
Once you go through the Signup process, you will get on your dashboard.
Important: Remember to activate your account.
Click on the gear icon in the top right of your screen to go to Settings. Then “upload” tab => Scroll down to the “Upload presets” section and click on “Add upload preset”.
Here we have two important sections: Storage and Access and Upload Manipulations.
In Storage and Access section you have to put an Upload preset name and a folder name for your images (whatever name you prefer) and set the Signing Mode to “Unsigned” (just so you don’t have to go through any signing process to upload images to your account). You will have something like this:
Done that, go to Upload Manipulations.
Click on Edit on Incoming transformation section.
We are going to use two things from here: Incoming transformation and Eager Transformation.
What is an Incoming Transformation?
Any combination of transformation-related parameters for transforming the uploaded media before storing in the cloud.
What is an Eager Transformation?
A list of transformations to generate for the uploaded media during the upload process, instead of lazily creating these on-the-fly on access.
Once you click on the “Edit” button you will get a pop-up with some options:
Resize & Crop: We can put whatever size we want here and select the mode: scale, crop, fit, fill, etc. I will leave it with Scale, a 250px width and blank height (so it gets adjusted automatically to keep the aspect ratio)
Format & shape: Here I’m not going to set anything special, you can play around with these options. I’d prefer not to transform any Corner radius or something like this, because you can do it later without transforming the original one.
Look & feel: Same as above. You can apply some cool effects like Blur, Grayscale, Colorize, Sepia, etc.
Click Ok and then go to Add Eager Transformation. Here you will have same options as Incoming transformations. Let’s put some bigger width here like 500px.
Once you finish, click “ok”. And click “Save” in the right corner above. And that’s it for our account!
Time to write some code!
First, let’s create our app
npx create-react-app react-image-app
Then go to that folder with the “cd” command and run “yarn start” or “npm start” (You don’t need to use “npm run start”)
This will start our development server.
You can get rid of everything inside App.js and leave it like this:
Then, we can create a new component called UploadImage.js (You can create a component folder inside src/ and put it there)
What we need to do now is import our new component on our App.js
(That’s all for our App.js)
Our app will look like this:
Pretty ugly isn’t ?
We can add some basic styles using styled-components.
If you don’t know what Styled Components is:
Is a CSS-in-JS framework. It uses tagged template literals in JavaScript and CSS to provide you the ability to write CSS to style react components.
So, stop your dev server and run:
npm install — save styled-components
Once finished we have to:
- Import styled-component in our component to use it
- Create two styled elements one is a FormContainer and the another one is a FormElement
- Then use them in the layout
Looks somewhat better!
If you want to know more about Styled Components you can visit the official site, it has a great document section! https://styled-components.com/
Now let’s keep improving our UploadImage.js component
Next steps:
- Add onChange listener to the input file
- Create a new method called handleOnChange uploading the image
- Log upcoming data from Cloudinary
Let’s check the data coming from Cloudinary!
We received a bunch of data here. The important ones for us are:
secure_url for the incoming transformation and eager that can be an array of eager transformations in this case we have only one.
Now let’s update our component state and the layout to use these images:
- Import useState hook from react
- Create uploadedImage and isLoading for the state
- Check if loading, we show a loading message to the user.
- Then once the images are ready we show that to the user.
It’s working!
Yay!
That’s all! Now you have simple image management for your projects, using an amazing tool like Cloudinary.
This is only the basics, Cloudinary has a bunch of cool features there!
If you want to take a look to the repo, here’s the url: https://github.com/matias220510/image-upload-cloudinary
And if you like my content please follow me on Twitter: Matias Arabolaza
Do you like Nuxt and Cloudinary? Well, Maya Shavin wrote an amazing article about Image optimization using her new Cloudinary Nuxt Module.
Don’t wait a minute to check this out: https://www.mayashavin.com/articles/images-optimized-cloudinary-nuxt
Twitter: Maya Shavin
If you have any questions, please ask in the comments and share if you like it!
Resources:
https://cloudinary.com/documentation/javascript_image_and_video_upload
Top comments (0)