Fix OVE file preview from imported .eln [SCI-9263] (#6200)

app/assets/javascripts/protocols/import_export/import.js

@@ -58,12 +58,41 @@ function importProtocolFromFile(
   }
 
   function getAssetBytes(folder, stepGuid, fileRef) {
-    var stepPath = stepGuid ? stepGuid + '/' : '';
+    const stepPath = stepGuid ? stepGuid + '/' : '';
-    var filePath = folder + stepPath + fileRef;
+    const filePath = folder + stepPath + fileRef;
-    var assetBytes = zipFiles.files[cleanFilePath(filePath)].asBinary();
+    const assetBytes = zipFiles.files[cleanFilePath(filePath)].asBinary();
     return window.btoa(assetBytes);
   }
 
+  function getAssetPreview(folder, stepGuid, fileRef, fileName, fileType) {
+    if ($.inArray(fileType, ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']) > 0) {
+      return {
+        fileName: fileName,
+        fileType: fileType,
+        bytes: getAssetBytes(folder, stepGuid, fileRef)
+      };
+    } else {
+      const stepPath = stepGuid ? folder + stepGuid + '/' : folder;
+      let baseName;
+      baseName = fileRef.split('.');
+      baseName.pop();
+      baseName.join('.');
+      let previewFileRef = zipFiles.file(new RegExp(stepPath + 'previews/' + baseName));
+      if (previewFileRef.length > 0) {
+        const previewFileExt = previewFileRef[0].name.split('.').at(-1);
+        let previewFileName = fileName.split('.');
+        previewFileName.splice(-1, 1, previewFileExt);
+        previewFileName.join('.');
+        return {
+          fileName: previewFileName,
+          fileType: `image/${previewFileExt}`,
+          bytes: window.btoa(previewFileRef[0].asBinary())
+        };
+      }
+    }
+    return null;
+  }
+
   /* Template functions */
 
   function newPreviewElement(name, values) {
@@ -82,14 +111,14 @@ function importProtocolFromFile(
   }
 
   function newAssetElement(folder, stepGuid, fileRef, fileName, fileType) {
-    var html = '<li class="col-xs-12">';
+    let html = '<li class="col-xs-12">';
-    var assetBytes;
+    let assetPreview = getAssetPreview(folder, stepGuid, fileRef, fileName, fileType);
-    if ($.inArray(fileType, ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']) > 0) {
-      assetBytes = getAssetBytes(folder, stepGuid, fileRef);
 
-      html += '<img style="max-width:300px; max-height:300px;" src="data:' + fileType + ';base64,' + assetBytes + '" />';
+    if (assetPreview) {
+      html += '<img style="max-width:300px; max-height:300px;" src="data:' + assetPreview.fileType + ';base64,' + assetPreview.bytes + '" />';
       html += '<br>';
     }
+
     html += '<span>' + fileName + '</span>';
     html += '</li>';
     return $.parseHTML(html);
@@ -708,6 +737,7 @@ function importProtocolFromFile(
         var assetId = $(this).attr('id');
         var fileRef = $(this).attr('fileRef');
         var fileName = $(this).children('fileName').text();
+
         stepAssetJson.id = assetId;
         stepAssetJson.fileName = fileName;
         stepAssetJson.fileType = $(this).children('fileType').text();
@@ -723,6 +753,14 @@ function importProtocolFromFile(
           fileRef
         );
 
+        stepAssetJson.preview_image = getAssetPreview(
+          protocolFolders[index],
+          stepGuid,
+          fileRef,
+          fileName,
+          null
+        );
+
         stepAssetsJson.push(stepAssetJson);
       });
       stepJson.assets = stepAssetsJson;

app/controllers/protocols_controller.rb

@@ -697,6 +697,12 @@ class ProtocolsController < ApplicationController
               asset_file_name = asset_guid.to_s + File.extname(asset.file_name).to_s
               ostream.put_next_entry("#{step_dir}/#{asset_file_name}")
               ostream.print(asset.file.download)
+
+              next unless asset.preview_image.attached?
+
+              asset_preview_image_name = asset_guid.to_s + File.extname(asset.preview_image_file_name).to_s
+              ostream.put_next_entry("#{step_dir}/previews/#{asset_preview_image_name}")
+              ostream.print(asset.preview_image.download)
             end
           end
           ostream = step.tiny_mce_assets.save_to_eln(ostream, step_dir)

app/models/asset.rb

@@ -189,6 +189,12 @@ class Asset < ApplicationRecord
     file.blob&.filename&.sanitized
   end
 
+  def preview_image_file_name
+    return '' unless preview_image.attached?
+
+    preview_image.blob&.filename&.sanitized
+  end
+
   def render_file_name
     if file.attached? && file.metadata['asset_type']
       file.metadata['name']

app/utilities/protocols_importer_v2.rb

@@ -115,6 +115,11 @@ class ProtocolsImporterV2
                         filename: asset_json['fileName'],
                         content_type: asset_json['fileType'],
                         metadata: JSON.parse(asset_json['fileMetadata'] || '{}'))
+      if asset_json['preview_image'].present?
+        asset.preview_image.attach(io: StringIO.new(Base64.decode64(asset_json.dig('preview_image', 'bytes'))),
+                                   filename: asset_json.dig('preview_image', 'fileName'))
+      end
+
       asset.save!
       asset_ids << asset.id