Cloudinary for React
For my final project at FlatIron, I decided to do an Instagram clone but for pets called Petatude. A big part of doing an Instagram clone is being able to handle images. With rails, I came across two different approaches. The first one was using rails active storage and the second option was using an image hosting platform. I decided to go with the image hosting site Cloudinary. The reason I chose it was because of time constraints and usability. So I am going to show you how I did it. I am going to be showing how to upload a single image at a time to Cloudinary, how to save the image to your database, some error handling of the image and lastly how to transform the image.
First of all, you are going to want to sign up to Cloudinary, it is free to sign up and you get 25 credits to start off with, each credit goes a long way.
Next step is you are going to want to click on the Settings button. Then go to upload and all the way down to upload preset, where you will click on Add upload preset.
Your upload preset is how you want your image to save. If you can see in the example above the transformation says that the images saved with that preset are 500px * 500px and is saved as an economy quality. This is very basic but we will get into it a bit more.
The first thing you are going to do when you click add upload preset is to pick a name for the preset and then decide if you want your images signed or not. This is the difference between sending through your API secret or not when uploading an image. I will be showing how to do it with an unsigned image but if you want to learn more about the signed preset check out the documentation on it.
Next, you are going to click on upload manipulations and select the edit for incoming transformations.
Here is when you can send through certain criteria for the images to save as such as the width and height, quality, effects. There are so many options, I really suggest playing around with it because it is a very useful tool.
Once you click ok, you can save your presets and go back to the dashboard.
Keep in mind however the preset name because you are going to need this in the future.
Copy the image upload URL which you get from hovering over the API Base Url.
Now we are going to go into our react app…
Declare states for loading: false and set the image either to null or a preset image you have such as the example above.
Now you are going to show the image or if it is loading show something to indicate it is loading. I have used font awesome’s spinner as my loading sign.
I am going to go into more detail regarding showing the image later on.
Next, create the input and set it to file type. If you are only wanting to select images set the accept type and set an onchange function like in the example above.
Now we are going to create the onchange function for the file.
What is happening in the code above is you are first going to get the first file that the user selected. You are also going to create a FormData object which is where you will be adding all the information you are sending through in the body of the request. Where you append the (“upload_preset”, “add your own preset”) add your own preset next to it. Then we will set the image to loading to show that the image you selected is being uploaded. You are going to do an asynchronous fetch request to the URL you saved earlier from your dashboard and set the method to post. When you get the file returned back you are going to update the state of image and loading to display the image. The secure_url is what you will save in the database as the image source.
Now let's get into showing the image. The reason showing the image was a bit more complicated than just setting the preset was due to the fact that I wanted a user to be able to select filters from Cloudinary.
To do this run this line in the terminal:
Once these libraries have loaded declare them at the top of the file.
Now we are going to display the image. We want to set the cloudName to your Cloudinary name. You can find this in the URL that you copied earlier after it says v1_1.
Now you will use Cloudinary's image and pass through the publicId. You can either get this from the API request or from the source code like this.
In the transformation you can add different presets as I did with effect. Check out all the different types of editing you can do in the documentation, it is really incredible how much you can do with the images.
By now you should be able to upload an image and view it.
Lastly, we just want to ensure that if you are selecting an image in a form, the form does not get submitted while the image is loading because this can take some time depending on the quality of the image.
This is very simple just check if loading is true as follows.
You can replace this.isLoading(e) with null. I have just set the function to display an error message.
I hope this was useful and you managed to implement your own usage of Cloudinary.