Rails 6 and React integration with Active Storage image file attachments
In this post, I’ll show how to integrate a Rails 6 API with a React component to upload file attachments to Active Storage.
Part 1: Rails API
Initial project setup
I added additional gems to the Gemfile
Install the gems via: bundle install
I added a basic CORS configuration to the file: config/initializers/cors.rb. This allows the React frontend to make API requests.
I executed rails active_storage:install and rake db:migrate to create the necessary database migrations for Active Storage.
I added a migration to create a pictures table, and executed rake db:migrate.
I added the Picture model (file: app/models/picture.rb). The model implements methods for JSON serialization and defines a single Active Storage attachment. The JSON contains an attachment_url with a resized [200, 200] variant.
The controller (file: app/controllers/pictures_controller.rb) implements the index and create methods.
Last I added the picture controller routes to the file: config/routes.rb
Part 2: Testing
From the console I entered a directory containing test images to upload.
Next I setup RSpec for unit tests. I executed rails generate rspec:install to generate the configuration files.
I added a DatabaseCleaner strategy and included FactoryBot methods in the file: spec/rails_helper.rb
I added a FactoryBot factory for the picture model, file: spec/factories/pictures.rb, and copied the Rails logo into spec/fixtures/files/
Here is a sample controller test, file: spec/controllers/pictures_controller_spec.rb
I executed rspec to ensure the tests run successfully.
Part 3: React front end
I created a new React project.
I included the bootstrap CSS, file: src/index.js
I added a constants file to define the API host URL, new file: src/constants.js
I revised the main App component to include my the Pictures component, file: src/App.js
I created a basic Pictures component (file: src/Pictures.js). On mount, is loads the existing pictures from the API and renders them in a defined number of columns. It also provides a file input which submits (on change) to create a new picture via the API.
Last I added a bit of CSS to improve the pictures layout, file: src/App.css
The React front end can be started via: npm start.