Active Storage. Storing Files With a Rails API

Are you in the quite specific scenario of wanting to upload photos to a rails backend with a react front end but don't know how? I've got you covered with a step by step guide on working with active storage to store your audio, video, and photo files.

Let me just start this by saying that this tutorial may not cover complete best practice as I have been crunched on time and needed the quickest solutions to my problem. This blog is meant to help those of us who are newer to the world of code. With that out of the way, let's get started.

Firstly, I'm going to be using a rails api with a postgresql database and a react front end. I'll do this with the command
rails new project_name --database=postgresql --api

From inside the directory of your new project you can run your vite, create-react-app, or whatever other command you will be using to build your client side. Once your API has been built along with your client side starter, we can move on.

Now, you will want to ensure you have all your gems installed. First, uncomment the rack-cors gem, we'll get to why this is necessary later. Next we will need a gem that is not automatically given to us by ruby in newer versions, this is called active model serializers, be sure to add it to your gem file.

gem "rack-cors"gem "active_model_serializers", "~> 0.10.13"

Then run bundle install to ensure you have your gems installed. Make sure you have done this before you start your migrations or rails won't generate the serializer for each table you make(we need those).

From here you are going to want to create your database with rails db:create

Then install the rails storage method active storage. This can be done by running the command rails active_storage:install

This will add two migrations to your table. Now is where you would add the rest of your project tables, in this example case, a table for my user that will later have a profile photo. This table will have a name and an about section for the user to which we will add a picture later. I'll add this table to my database with the command rails g scaffold User name about. From here we are good to migrate with. rails db:migrate.

Once you have migrated your tables here is where we will want to jump into the model(app/models/user.rb) for our user table and we will want to add the has_one_attached macro given to us by active storage.

class User < ApplicationRecord   has_one_attached :image   end

In this scenario, image can be named whatever you would like it to be.

Next, we will hop over to our serializer for our user table(app/serializers/user_serializer.rb) and add our image attributes that we want in our table. The first step to this is including our rails app route url helper. This will help generate a url that links to our image. The first step is done like so

class UserSerializer < ActiveModel::Serializer  include Rails.application.routes.url_helpers  attributes :id, :name, :aboutend

This should automatically generate with the attributes you created when you started. Next we will want to define the route to the image, this can be done by creating a method for defining the file you want to return and the method name should match the name given when we defined the has_one_attached macro. After this method has been defined, we add the method name as an attribute.

class UserSerializer < ActiveModel::Serializer  include Rails.application.routes.url_helpers  attributes :id, :name, :about, :image  def image  rails_blob_path(object.image, only_path: true) if object.image.attached?  endend

Just a few more steps before we move to front end. We need to change the params.permit in our user controller so head on over to app/controllers/user_controller and from there find the user_params method. That should look something like

def user_params      params.require(:user).permit(:name, :about)    end

What we need to do is add the image attribute that we added up above to our params like so...

def user_params      params.require(:user).permit(:name, :about, :image)    end

Let's finish up the work on the backend by enabling cors. We can do this by going to the config/initializers/cors.rb file. That file should look something like this...

# config/initializers/cors.rb# Be sure to restart your server when you modify this file.# Avoid CORS issues when API is called from the frontend app.# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.# Read more: https://github.com/cyu/rack-cors# Rails.application.config.middleware.insert_before 0, Rack::Cors do#   allow do#     origins 'example.com'##     resource '*',#       headers: :any,#       methods: [:get, :post, :put, :patch, :delete, :options, :head]#   end# end

In that file, you will want to uncomment the 7th line(the one that starts with Rails.application) all the way down to the bottom of the file. Then you will want to change the 10th line. In the quotes where it says 'example.com', you will want to put your domain, commonly 'localhost:3000', alternatively, you can put a *, but this is not recommended. The file should look something like this

# config/initializers/cors.rb# Be sure to restart your server when you modify this file.# Avoid CORS issues when API is called from the frontend app.# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.# Read more: https://github.com/cyu/rack-corsRails.application.config.middleware.insert_before 0, Rack::Cors do   allow do     origins 'example.com'     resource '*',       headers: :any,       methods: [:get, :post, :put, :patch, :delete, :options, :head]   end end

After all of that, we have finished the backend configuration! Let's move to React now.

For react, we will need to create our data using a built in JavaScript constructor called FormData.