You’ve made it to Part 4 of our API tutorial series for Rails and React.

We are providing this tutorial to share some of the knowledge and fun that we’ve had with the Ruby on Rails framework and building database projects. Hopefully this can provide some help to those newly exploring these!

We’re breaking this down into 7 parts, click here to start at the beginning.

In this next part of the series, we’ll be adding a field for Movie Artwork using the AWS SDK S3 Ruby Gem to handle some of the heavy lifting for us. Before we can do that, we need to update our Movie model.

Add Image Field to Model

In order to do that, we’ll need to run a Rails Migration, so in your console run:

rails g migration AddArtworkToMovies artwork:string

Create AWS Bucket

Next we’ll need to create an AWS S3 bucket that will hold all of our file uploads. If you don’t already have an AWS account you can create one here.

Once you have an account created, you’ll want to go to the AWS S3 Console and click the Create bucket button in the top right.

First you’ll want to add a bucket name, choose a Region (whichever server is closest to your location), access levels (which we want public since these are publicly used images) and then click Create bucket at the bottom of the page.

Create IAM User for Access Keys

Along with your Access Key information from AWS, you’ll need to create an IAM user account in order to connect via AWS gem.

Add AWS Info to Heroku Variables

Now that you have a bucket name, secret access key and access key id created, we’ll want to add those to our Heroku Environment Variables. In your Heroku Project dashboard, click on Settings and scroll down to the Reveal Config Vars button and click it. Not add the following vars with your saved access key information.

Adding the AWS-SDK-S3 Ruby Gem

Add the following line to your Gemfile.

# Amazong Web Services S3 Upload
gem 'aws-sdk-s3', '~> 1.48'

Once you’ve added the AWS gem, go back to your console and run:

bundle install

Add Artwork field to Movie Admin Form

Now that we have the field added to the model, the AWS bucket created and access keys added to our Heroku app, we should be able to upload images via our ActiveAdmin forms.

row :artwork do |p|
  image_tag url_for(p.artwork.variant(resize: '200x300^')) if p.artwork.attached?
end

React & Rails API series:

1. Project Setup
2. Relationships
3. Router
4. Image Upload via S3 (this post)
5. Send Emails (coming soon!)
6. Search Functionality (coming soon!)
7. Pagination (coming soon!)