React JS — Uploading Images using Cloudinary
When developing applications where users upload images we, as developers, can come up against a few different problems that need to be solved. First, asking a user to take an extra step by having them leave our site and find another site to host their images, then return with the url to input, can be burdensome for them and we can imagine they will quickly lose interest in ever returning. Second, the larger our applications get and the more traffic we welcome (yay, users!), the more space in memory we take up in our servers’ database to store all of these uploads. Storing images in database tables requires servers to process huge amounts of data. This burden quickly turns in to slower programs, and then, again, loss of customers, because who wants to wait for slow loading apps!
Using Cloudinary for upload and management of images and videos directly through our apps is a winning solution. Cloudinary provides cloud based media management services that even offers the ability to manipulate images and video, should you require those functions for your program.
This article will break down each step of the process: signing up for Cloudinary, setting up the gem in the backend, installing the package in the frontend app, getting all these components syncing together making it a seamless process for your users to upload photos from their computers to your app.
In this walkthrough I will be using a Ruby on Rails backend, with the database of choice, and a React JS (Javascript) Frontend. Please note, if you need further information, Cloudinary has a great source of documentation on installation and use here: https://cloudinary.com/documentation
- Start by signing up for a free Cloudinary account: https://cloudinary.com/
- Once your account is setup and you have logged in, you’ll see that your CloudName, API Key and Secret are already setup for you and are located on your dashboard. To the right of “Account Details” on your dashboard, you’ll need to download the ‘YML’ file. Install this file into your Rails app directly in the Config folder.
- Include: [gem ‘cloudinary’] in your Gemfile and then run [bundle install] in your terminal. Ruby on Rails/Cloudinary SDK: https://cloudinary.com/documentation/rails_integration
- Next step in backend: in your model controller (ex: user#controller) , set up a custom action, for example: “image_upload”. this controller action will need to eventually find the user to save the image to, communicate with the Cloudinary gem, set the image to the user and save the user. For now, lets just set up the action with a ‘byebug’ so we can see the params that come in from our front end.
5. in config/routes.rb, set up your custom route:
Now, lets work a little on the front end: in your front end terminal run [npm i cloudinary] (more info on the node package here: https://www.npmjs.com/package/cloudinary)
6. In the designated front end component file of your choice (ex: avatar_component) set up a React class component that has access to props (that include our user (and along with it our user attributes/user props)). You’ll need to import React and any components you need from Cloudinary-React. Set state for the image attribute to an empty object to start. You’ll also need to incorporate ‘onChange’ and ‘onSubmit’ functions for your form that will be a part of the return state in the render function of this component. Please see the React/Cloudinary SDK for more information : https://cloudinary.com/documentation/react_integration — — Example:
7. In my image example, you’ll notice that I only have console.logs in the 2nd .then of my chain and also in the .catch. I do this as I build the program to see how my data comes returns from the back end to the front end. It’s a good idea to start here and then make use of the returning data that’s specific to your own program and the functionality you hoping for.
8. You will also need a render() function in this component that returns a div of 2 divs: 1. Form & 2. Image. Example:
8. Your form input needs a type ‘file’ and needs to accept ‘image/*’ (all images). CORRECTION in IMAGE: class=”form” should actually be classNAME=”form” (for correct React tag naming).
9. Stepping away from the old <img> tag, you’ll set up a call to the <Image /> component that we inherit from ‘cloudinary-react’. You’ll need to update this according to your own program and how you handle the data that comes back from fetch. You should be able to use the fetch response to render the image directly in this element. The PublicId is an attribute included in our data that we will send back from the back end with the fetch. The cloud_name will be replaced with your own cloud name from Cloudinary.
10. I have also left a bit of code (commented out in the example above) to show how to potentially make use of Cloudinary’s “Image” and ‘Transform” functions that come along with the node package that was initially installed. For more info here: https://cloudinary.com/documentation/react_image_manipulation
11. Back to our back end. From your byebug, call params. The params that come you’ll need to figure out how to exactly use according to your own model/attribute set-up. An example of what our action will look like:
12. From the byebug in line 7, find out what your ‘file_url’ is, it should contain a whole new set of params that we inherit from Cloudinary, one being ‘public_id’. Set that public_id to your user.image attribute (or your specific attr. according to program) this is the data that will be sent to your front in (render json) and what you will need to include in your image div in render as PublicId={this.state.image} (for example, but again, program specific code)
This is just the basic image upload that is available through Cloudinary. Cloudinary has unbelievable amounts of other functionality that everyone should definitely check out! Don’t forget, all the steps above need to be modified to fit with your own program/code. Any msgs for updates or corrections are greatly appreciated! Happy coding!
