Uploading Pictures with Cloudinary and React.

Introduction.

As an upcoming Full Stack Developer and in the process of building a user interface, public interactions with users communicating, you may cross an idea with creating a feature that involves using pictures, images for users to upload to your website. Most likely, you are using React for your front end to build up and render content onto your browser. Well lucky, there is a way for you to send files to a management system that holds and contains images for you using Cloudinary. This comes in handy for images that are local only to a users computer, that way when a file is sent to Cloudinary, it comes back using a Cloudinary image URL.

Topics to go over.

In this article, I will talk about:

1. What is Cloudinary?
2. How to use Cloudinary?
3. How to use Cloudinary with React?

What is Cloudinary?

Cloudinary is used as a tech stack that allows a web developer, websites, to store images, videos in storage to manipulate with and be saved. It is a cloud-based service for user interfaces. Cloudinary is used by millions of web and application developers around the world. There are companies like Dropbox, Forbes, Taboola, and Answers.com that use Cloudinary for their websites. Cloudinary is really good image management for web developers and websites.

It was found in 2012 in Isreal by its CEO Ltai Lahan, Tal Lev-Ami and Nadav Soferman. Cloudinary is basically a visual experience using digital technology. This cloud-based service can update and edit pictures, then those pictures and videos are available for users around the world.

How to use Cloudinary?

To use Cloudinary, you will need to go over to Cloudinary’s website, I will place the link below, and create an account. Cloudinary is easy to sign up and it is free. Once you have an account, login and once you have logged in you will see an upload option next to account, click on that. Next, you will see an option to enable Unsigned uploading, you want to enable it. Then, you want to click on Add upload preset, the preset will be useful when sending a request to the Cloudinary API, so fill out the upload preset name with any name you want. Make sure to change the signing mode to Unsigned and save all your changes. Your upload preset name is important to keep up when going into your front end to do operations with the API.

Cloudinary website: https://cloudinary.com/

Using Cloudinary with React

Now, if you are here I’m sure you have very good understanding what is React and how to use it. If not I advise you to look into React and I will display a good resource for you below. Once you have your React set up, know that React and Cloudinary have a library that comes with 6 useable Components for you to use with Cloudinary and displaying content. Go ahead to your terminal and install the cloudinary-react library.

if using npm:

npm install cloudinary-react

if yarn use:

yarn add cloudinary-react

React Scrimba: https://scrimba.com/learn/learnreact

You should now see that in your package.JSON. When a user uses your website to upload a file, it takes some data from that file. To get the files from the user you will need an input tag with its type being a “file”. That input will need an onChange attribute to take an event that is happening when a user selects a file. This is when you will need to create a function that will update the state of the file or image that is selected. Your state needs to hold the image that the user selected, with this you should work with React Hooks. If you are not sure how React Hooks are used, there will be a link below on React Hooks. When using React Hooks, React library has a useState method that takes in a vale to hold the state and you can assign it two variables inside an array. The first variable for instance is the actual file that is selected, the second variable is the method that will update the state. The onChange should invoke the method that updates to state so it can know what is the data of the file that was selected by the user. Once you have that set, you will need a button that will send off the file data to the Cloudinary API using a function that will be invoked when a user clicks the button.

const [fileSelected, setFileSelected] = useState('');

Where it says cloud_name, that is where you will place your own cloud name from your Cloudinary account. You should see it on the dashboard under account details.

Cloudinary API: ‘https://api.cloudinary.com/v1_1/cloud_name/image/upload’

This function will need an instance object called formData that will be constructed with data information to send off to Cloudinary. This formData object needs values of the image that was selected which is in the state and the name of the upload preset that you created earlier in your Cloudinary account. To do that we will use the append method that will take in two values, a string of what kind of data you are passing in and the actual data.

Here is an example:

const formData = newFormData();
formData.append('file', fileSelected);
formData.append('upload_preset', 'the name of your upload preset');

The first value we want to append is the file that the user selected, and for the formData and Cloudinary to know it is a file we need to pass in the string of file, this goes for the upload preset as well, we let the formData and Cloudinary know that is the upload preset and the name of the preset. Once we have append and construct the formData object, we can send it to the API.

To do this, we need to first install and import axios. You will use axios to send a post request to the Cloudinary API, passing in the actual URL for Cloudinary API and the second argument is the formData you have created with the actual file data. Once that is done, test your functionality out, and go back to your Cloudinary account. When you make it back to your Cloudinary account, at the top you will see Media Library, that is where Cloudinary is holding all of your media and content and you will see all of the images or videos the user has selected to upload to the Cloudinary API.

So basically, what you have done is created a function that will get the updated state from useState, construct that data into an object and pass that object into the Axios post method using Cloudinary’s API to store each file that is passed in. That is how you can use Cloudinary with React.

Hope this article was very useful for you and that you are ready to build up your web application with Cloudinary and React.