Fix timeouts when fetching images from S3 [SCI-694]

app/assets/javascripts/my_modules/image_preview.js

@@ -3,7 +3,7 @@ function initPreviewModal() {
   $('.image-preview-link').click(function(e) {
     e.preventDefault();
     var name = $(this).find('p').text();
-    var url = $(this).find('img').data('large-url');
+    var url = $(this).find('img').data('get-preview-url');
     var downloadUrl = $(this).attr('href');
     var description = $(this).data('description');
     openPreviewModal(name, url, downloadUrl, description);
@@ -12,12 +12,25 @@ function initPreviewModal() {
 
 function openPreviewModal(name, url, downloadUrl, description) {
   var modal = $('#imagePreviewModal');
-  modal.find('.image-name').text(name);
-  var link = modal.find('.image-download-link');
-  link.attr('href', downloadUrl);
-  var image = modal.find('.modal-body img');
-  image.attr('src', url);
-  image.attr('alt', name);
-  modal.find('.modal-footer .image-description').text(description);
-  modal.modal();
+  $.ajax({
+    url: url,
+    type: 'GET',
+    dataType: 'json',
+    success: function (data) {
+      modal.find('.image-name').text(name);
+      var link = modal.find('.image-download-link');
+      link.attr('href', downloadUrl);
+      link.attr('data-no-turbolink', true);
+      link.attr('data-status', 'asset-present');
+      var image = modal.find('.modal-body img');
+      image.attr('src', data['large-preview-url']);
+      image.attr('alt', name);
+      modal.find('.modal-footer .image-description').text(description);
+      modal.modal();
+    },
+    error: function (ev) {
+      // TODO
+    }
+  });
+
 }

app/assets/stylesheets/my_modules.scss

@@ -34,7 +34,7 @@
 .modal-image-preview {
   background: transparent;
   font-size: 16px;
-  padding-right: 0px !important;
+  padding-right: 0 !important;
 
   .preview-close {
     background: transparent;

app/controllers/assets_controller.rb

@@ -40,6 +40,21 @@ class AssetsController < ApplicationController
     end
   end
 
+  def large_image_url
+    respond_to do |format|
+      format.json do
+        render json: {
+          'large-preview-url' => @asset.url(:large),
+          'filename' => truncate(@asset.file_file_name,
+                                 length:
+                                   Constants::FILENAME_TRUNCATION_LENGTH),
+          'download-url' => download_asset_path(@asset),
+          'type' => (@asset.is_image? ? 'image' : 'file')
+        }
+      end
+    end
+  end
+
   def download
     if !@asset.file_present
       render_404 and return

app/views/steps/_step.html.erb

@@ -76,7 +76,7 @@
                               <%= image_tag 'medium/processing.gif' %>
                             </span>
                           <% else %>
-                            <%= image_tag asset.url(:medium), data: {large_url: asset.url(:large)} if asset.is_image? %>
+                            <%= image_tag asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(asset)} if asset.is_image? %>
                           <% end %>
                           <p><%= truncate(asset.file_file_name,
                                           length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>

config/routes.rb

@@ -282,6 +282,7 @@ Rails.application.routes.draw do
   # We cannot use 'resources :assets' because assets is a reserved route
   # in Rails (assets pipeline) and causes funky behavior
   get "files/:id/present", to: "assets#file_present", as: "file_present_asset"
+  get "files/:id/large_url", to: "assets#large_image_url", as: "large_image_url_asset"
   get "files/:id/download", to: "assets#download", as: "download_asset"
   get "files/:id/preview", to: "assets#preview", as: "preview_asset"
   post 'asset_signature' => 'assets#signature'