Upload images with ActiveStorage

1. Update Rails to 5.2 or later.
2. Run command rails active_storage:install
3. Rails would generate a new migration

# This migration comes from active_storage (originally 20170806125915)
class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
  def change
    create_table :active_storage_blobs do |t|
      t.string   :key,        null: false
      t.string   :filename,   null: false
      t.string   :content_type
      t.text     :metadata
      t.bigint   :byte_size,  null: false
      t.string   :checksum,   null: false
      t.datetime :created_at, null: false

      t.index [ :key ], unique: true
    end

    create_table :active_storage_attachments do |t|
      t.string     :name,     null: false
      t.references :record,   null: false, polymorphic: true, index: false
      t.references :blob,     null: false

      t.datetime :created_at, null: false

      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end
  end
end

4. Create storage.yml in config/ folder. Add this code:

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

In order to enable cloud storage, which is important for Heroku, we can configure cloud storage, then add

amazon:
  service: S3
  access_key_id: <%= ENV['BUCKETEER_AWS_ACCESS_KEY_ID'] %>
  secret_access_key: <%= ENV['BUCKETEER_AWS_SECRET_ACCESS_KEY'] %>
  region: <%= ENV['BUCKETEER_AWS_REGION'] %>
  bucket: <%= ENV['BUCKETEER_BUCKET_NAME'] %>

5. To config/environments/development.rb add this line

config.active_storage.service = :local

6. Configure production and test environments

# Store files on Amazon S3.
config.active_storage.service = :amazon

More information on how to configure Active Storage with Amazon and Heroku Active Storage on Heroku Using AWS S3

7. Run rails db:migrate to add new tables to the database.

8. In Post model add

has_one_attached :image

9. Now let's update the Posts controller

  private

  def post_params
    params.require(:post).permit(:message, :image)
  end

10. And the views in _post_form.html.erb

<%= f.file_field :image, accept: 'image/png,image/jpeg' %>

in index.html.erb

<div style="width:500px; height:auto;"><%= image_tag(post.image, style:"width:100%") if post.image.attached? %></div>

🖼 Enjoy!