Upload images to your Rails API from React the easy way

I’ve been working on my React+Rails skills, but a few days ago, I noticed something that bothered me. So far I managed to build a few small applications that render images, but all of those images were already on the server as part of the application assets. What if I want to build an Image board or an Instagram clone?

I decided to take a look at it and the solution, as always, turned out to be a pretty simple one. It involves the use of ActiveStorage, which is a built-in solution introduced by rails 5.2 that offers a simplified way of handling file uploads to either your server or cloud services like Azure or S3. It’s super easy to use, so let’s dive in!

How do I get started?

After creating you new app with

rails new your-project --api --database=postgresql

all you need to do is run

rails active_storage:install

Under the hood

This will create a new migration file in your ./db/migrate folder. If you examine this file, you’ll see it creates two tables:

• active_storage_blobs :This table is used by rails to keep track of file upload metadata. Information about the file like size, name and the such is stored in this table