adjust page preview

app/javascript/application.js

@@ -181,6 +181,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withConditions: this.dataset.withConditions === 'true',
       withDynamicDocuments: this.dataset.withDynamicDocuments === 'true',
       withGoogleDrive: this.dataset.withGoogleDrive === 'true',
+      pagePreviewFormat: this.dataset.pagePreviewFormat || '.jpg',
       withReplaceAndCloneUpload: true,
       withDownload: true,
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),

app/javascript/template_builder/builder.vue

@@ -383,6 +383,7 @@
                 :input-mode="inputMode"
                 :conditional-field-index="conditionalFieldIndex"
                 :formula-values-index="formulaValuesIndex"
+                :page-preview-format="pagePreviewFormat"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields || drawField || drawCustomField"
                 :with-signature-id="withSignatureId"
@@ -839,6 +840,11 @@ export default {
       required: false,
       default: () => []
     },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
     acceptFileTypes: {
       type: String,
       required: false,

app/javascript/template_builder/document.vue

@@ -150,6 +150,11 @@ export default {
       required: false,
       default: false
     },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
     withFieldsDetection: {
       type: Boolean,
       required: false,
@@ -180,7 +185,7 @@ export default {
         return this.previewImagesIndex[i] || reactive({
           metadata: { ...lazyloadMetadata },
           id: Math.random().toString(),
-          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}${this.pagePreviewFormat}`
         })
       })
     },

app/views/submissions/show.html.erb

@@ -103,7 +103,7 @@
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
           <% lazyload_metadata = document.preview_images.first&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
-            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}.jpg")) %>
+            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}#{Templates::ProcessDocument::PREVIEW_FORMAT}")) %>
             <page-container id="<%= "page-#{document.uuid}-#{index}" %>" class="block before:border before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded relative mb-4" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
               <img loading="lazy" src="<%= page.url %>" width="<%= width %>" class="rounded" height="<%= height %>" alt="<%= "#{item['name']} - #{t('page')} #{index + 1}" %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">

app/views/submit_form/show.html.erb

@@ -123,7 +123,7 @@
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
           <% lazyload_metadata = document.preview_images.last&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
-            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}.jpg")) %>
+            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}#{Templates::ProcessDocument::PREVIEW_FORMAT}")) %>
             <page-container class="block relative my-4 shadow-md" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
               <img loading="lazy" src="<%= page.url %>" width="<%= width %>" height="<%= height %>" alt="<%= "#{item['name']} - #{t('page')} #{index + 1}" %>">
               <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">

lib/templates/process_document.rb

@@ -4,6 +4,7 @@ module Templates
   module ProcessDocument
     DPI = 200
     FORMAT = '.png'
+    PREVIEW_FORMAT = '.jpg'
     ATTACHMENT_NAME = 'preview_images'
 
     BMP_REGEXP = %r{\Aimage/(?:bmp|x-bmp|x-ms-bmp)\z}
@@ -205,7 +206,7 @@ module Templates
     def generate_pdf_preview_from_file(attachment, file_path, page_number)
       doc = Pdfium::Document.open_file(file_path)
 
-      blob = build_and_upload_blob(doc, page_number, '.jpeg')
+      blob = build_and_upload_blob(doc, page_number, PREVIEW_FORMAT)
 
       ApplicationRecord.no_touching do
         ActiveStorage::Attachment.create!(