Rails 5.2 (Upgrade) - Active Storage does not display image

Question

So I have upgraded from rails 5.1 to 5.2

rails app:update

It all works well, and I instantly set up the active storage configuration to be used with a new section in the web application.

I created the migrations:

rails active_storage:install
rake db:migrate

I configured conf/storage.yml - production using AWS S3:

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

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

amazon: service: S3 access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %> secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %> region: eu-west-2 bucket: whatever

Adding the required GEM to GEMFILE:

gem 'aws-sdk-s3'

Making sure that Dev environment uses the local setup:

config.active_storage.service = :local

Adding all the required lines to the model:

class Article < ApplicationRecord
  has_one_attached :main_picture
  ... 
end

I did some fancy stuff, such as validation, custom variants, etc. - but for testing purposes and getting the basics working I commented out all that stuff.

Update Controller to use permitted attributes specified in Pundit:

Controller

@article.update(permitted_attributes(@article))

Pundit

class ArticlePolicy < ApplicationPolicy

  ...

  def permitted_attributes
    if !user.nil? && user.admin
      [:title, :content, :teaser, :slug, :published, :user_id, :main_picture]
    end
  end

  ...
end

Now the upload works like a breeze - to my local environment and I even tested uploading it to AWS, but let's stick to the local environment. I can find the latest upload on the local environment in:

/storage/N1/Ay/N1AyNaBeMNGhhmPSR69XwA9a

And that is the URL when I try to display the image in my view:

http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBQQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--fd200a456532a80dfb122b2bdd9a53181b2a62aa/428KB.jpg

It appears like this in active_storage_blob table:

id,key,filename,content_type,metadata,byte_size,checksum,created_at
"55","N1AyNaBeMNGhhmPSR69XwA9a","428KB.jpg","image/jpeg","{""identified"":true,""width"":1920,""height"":1080,""analyzed"":true}","428299","48c8G3xQj5ENGgqqM08seQ==","2018-07-24 15:21:11"

Here is the various ways I tried to display the image:

= image_tag @article.main_picture
= image_tag url_for(@article.main_picture)
= image_tag @article.main_picture.variant(resize_to_fit: [100, 100]

None of these options displays the image that was successfully uploaded and stored in the DB. All I get is the image placeholder.

For the latest to work (but didn't) I added the following to the GEMFILE (as per guide ):

gem 'image_processing', '~> 1.2'

There is a similar threat complaining about this - using Rails 5.1 and adding active_storage in the Gemfile - but there is no real answer. As suggested I tried adding:

config/application.rb

require 'active_storage/engine'

Didn't help displaying the image :(

--- UPDATE: The logs as requested when accessing the URL ---

Started GET "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBQQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--fd200a456532a80dfb122b2bdd9a53181b2a62aa/428KB.jpg" for 127.0.0.1 at 2018-07-25 12:41:36 +0100
Processing by ActiveStorage::BlobsController#show as JPEG
  Parameters: {"signed_id"=>"eyjfcmfpbhmionsibwvzc2fnzsi6ikjbahbqqt09iiwizxhwijpudwxslcjwdxiioijibg9ix2lkin19--fd200a456532a80dfb122b2bdd9a53181b2a62aa", "filename"=>"428kb"}
** [Localeapp] 1532518896 - Handling translation updates
** [Localeapp] 1532518896 - polling
** [Localeapp] API CALL: get https://api.localeapp.com/v1/projects/qXa7rByH1jQ9cNrU8t46zQkk8rkq3fMka13EACmQkXZ5FFTuUn/translations.yml?updated_at=1532518849
** [Localeapp] ATTEMPT 1
** [Localeapp] RESPONSE: 200
** [Localeapp] CALLING SUCCESS HANDLER: handle_success
** [Localeapp] 1532518897 - poll success
** [Localeapp] 1532518897 - reloading I18n
Filter chain halted as :set_blob rendered or redirected
Completed 404 Not Found in 917ms (ActiveRecord: 0.0ms)


Started GET "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBQQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--fd200a456532a80dfb122b2bdd9a53181b2a62aa/428KB.jpg?disposition=attachment" for 127.0.0.1 at 2018-07-25 12:41:39 +0100
Processing by ActiveStorage::BlobsController#show as JPEG
  Parameters: {"disposition"=>"attachment", "signed_id"=>"eyjfcmfpbhmionsibwvzc2fnzsi6ikjbahbqqt09iiwizxhwijpudwxslcjwdxiioijibg9ix2lkin19--fd200a456532a80dfb122b2bdd9a53181b2a62aa", "filename"=>"428kb"}
** [Localeapp] 1532518899 - Handling translation updates
** [Localeapp] 1532518899 - polling
** [Localeapp] API CALL: get https://api.localeapp.com/v1/projects/qXa7rByH1jQ9cNrU8t46zQkk8rkq3fMka13EACmQkXZ5FFTuUn/translations.yml?updated_at=1532518897
** [Localeapp] ATTEMPT 1
** [Localeapp] RESPONSE: 200
** [Localeapp] CALLING SUCCESS HANDLER: handle_success
** [Localeapp] 1532518900 - poll success
** [Localeapp] 1532518900 - reloading I18n
Filter chain halted as :set_blob rendered or redirected
Completed 404 Not Found in 837ms (ActiveRecord: 0.0ms)

NOTE:

I added an image download button to generate the log:

= link_to "Download", rails_blob_path(@article.main_picture, disposition: "attachment")

Answer 1

Your signed_id seems invalid, it is why you got a 'Filter chain halted as :set_blob rendered or redirected'.

Adding to the response:

The problem was caused by case-sensitive URLs. The GEM "route_downcaser" was installed. Upon removing this GEM everything worked as expected.

Also, "route_downcaser" offers the option of excluded_patterns. So you can use the GEM together with active_storage but make sure you add the following to the initializer:

# config/initializers/route_downcaser.rb

RouteDowncaser.configuration do |config|
  config.redirect = true

  config.exclude_patterns = [
    /assets\//i,
    /fonts\//i,
    /active_storage\//i
  ]
end

More configuration options can be found here :)