How to Upload Files in a React and Rails App

Upload images and videos with Cloudinary

Photo by Pero Kalimero (Unsplash)

In this guide, we will cover how to upload images/videos in a React application.

For the server, we will be setting up a Rails API to store the information of the image/video. For the actual storage of image/video, we will be including a third-party service called Cloudinary. It is a cloud-based image and video management platform.

Let’s begin by signing up with an account at Cloudinary as we will need credentials to integrate into the Rails API.

Cloudinary Setup

If you don’t have an account yet for Cloudinary, go ahead and register for one here:

Cloudinary Account Sign Up

Once you sign up, you should be redirected to the dashboard containing the account details on the top.

For our Rails API, we will need the “Cloud name,” “API Key,” and “API Secret.” For now, we’re actually finished with the set up of Cloudinary. Let’s move on to setting up our Rails API.

Rails API Setup