How to display the variant of an image with Active Storage in a JS box?

Question

In my view, I can display my file attached to the model with Active Storage in a popup like this:

<a href="<%= rails_blob_path(@image.file, disposition: 'inline') %>" rel="example_group"><%= image_tag @image.variant('small') %></a>

It's working well.

The problem is when I want to use a variant in the link:

<a href="<%= url_for(@image.variant('high')) %>" rel="example_group"><%= image_tag @image.variant('small') %></a>

The variant code used is:

file.variant(resize:size).processed.service_url

The link seems to be good, but when I click the image, the image is not opened in my JS popup as before but opened in a new browser window. This is very strange.

I shortened the link.

https://bucket.s3.eu-west-3.amazonaws.com/variants/MmsLY3rf8yR9/38a77a69d170464c472f6d36fb3fbc28b284af0cadaa533?response-content-disposition=inline%3B%20filename%3D%22chateau.jpeg%22%3B%20filename%2A%3DUTF-8%27%27chateau-lynch.jpeg&response-content-type=image%2Fjpeg&Signature=29fe7d85fe369ea2335fa8b333d4868d8c2f2c22e1efe

Is-it a "content-disposition" issue ?

Answer 1

Well, this is what I did:

In my Image model, I added an action and used the rails_representation_url() method from url_helpers:

include Rails.application.routes.url_helpers # need this for

  include Rails.application.routes.url_helpers 
  def get_variant(version="high", disposition="attachment")
    variant = file_variant(version)
    return rails_representation_url(variant, only_path: true, disposition: disposition)
  end

In my html, I can call my method with attachment disposition:

<a href="<%= @image.get_variant('high', 'attachment') %>" rel="example_group">

I can also download the image variant directly from my controller:

def download
    redirect_to @image.get_variant('high', 'attachment')
end

If you want to only display the variant in the browser window, you can use 'inline':

redirect_to @image.get_variant('high', 'inline')

Not sure it's the best option, but it works.