From 62f8283587d5d86284bd8f97d20daa71e5ebcd4d Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Tue, 2 Jun 2026 13:44:52 +0300
Subject: [PATCH 1/9] adjust html to text

---
 lib/html_to_plain_text.rb | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/lib/html_to_plain_text.rb b/lib/html_to_plain_text.rb
index 1001f40c..f0040d06 100644
--- a/lib/html_to_plain_text.rb
+++ b/lib/html_to_plain_text.rb
@@ -10,7 +10,7 @@ module HtmlToPlainText
 
     doc = Nokogiri::HTML.fragment(cleaned)
 
-    doc.css('script').each(&:remove)
+    doc.xpath('.//script').each(&:remove)
 
     result = process_nodes(doc, line_length)
 
@@ -33,12 +33,9 @@ module HtmlToPlainText
     result = +''
 
     node.children.each do |child|
-      case child
-      when Nokogiri::XML::Text
+      if child.text? || child.cdata?
         result << child.text
-      when Nokogiri::XML::Comment
-        next
-      when Nokogiri::XML::Element
+      elsif child.element?
         result << process_element(child, line_length)
       end
     end

From 344a3ce198931f723185f7e1c4d39c06114e5fff Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Wed, 3 Jun 2026 13:24:08 +0300
Subject: [PATCH 2/9] adjust sanitize

---
 app/views/submissions/show.html.erb                | 2 +-
 app/views/submitter_mailer/declined_email.html.erb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 3d23b90a..709dc9a9 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -227,7 +227,7 @@
               <div class="flex items-center space-x-1 mt-1">
                 <span>
                   <%= t('reason') %>:
-                  <%= simple_format(h(submitter.submission_events.find_by(event_type: :decline_form).data['reason'])) %>
+                  <%= simple_format(h(submitter.submission_events.find_by(event_type: :decline_form).data['reason']), {}, sanitize: false) %>
                 </span>
               </div>
             <% end %>
diff --git a/app/views/submitter_mailer/declined_email.html.erb b/app/views/submitter_mailer/declined_email.html.erb
index 07b877c9..40e02391 100644
--- a/app/views/submitter_mailer/declined_email.html.erb
+++ b/app/views/submitter_mailer/declined_email.html.erb
@@ -1,4 +1,4 @@
 <p><%= t('hi_there') %>,</p>
 <p><%= t('name_declined_by_submitter_with_the_following_reason', name: @submitter.submission.name || @submitter.submission.template.name, submitter: @submitter.name || @submitter.email || @submitter.phone) %></p>
-<%= simple_format(h(@submitter.submission_events.find_by(event_type: :decline_form).data['reason'])) %>
+<%= simple_format(h(@submitter.submission_events.find_by(event_type: :decline_form).data['reason']), {}, sanitize: false) %>
 <p><%= link_to submission_url(@submitter.submission), submission_url(@submitter.submission) %></p>

From dd6516fd11fb2db7d08ffad533d646551ba0599d Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Tue, 2 Jun 2026 19:34:18 +0300
Subject: [PATCH 3/9] add cmd+scroll zooming to template builder

---
 app/javascript/template_builder/area.vue    |  3 +-
 app/javascript/template_builder/builder.vue | 76 +++++++++++++++++++--
 app/javascript/template_builder/i18n.js     | 21 ++++--
 app/javascript/template_builder/page.vue    |  2 +-
 4 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 06a3eb9b..eba4737c 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -197,7 +197,8 @@
           v-else-if="!isCheckboxInput"
           width="100%"
           height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '5cqmin' : '40px' }"
         />
       </span>
     </div>
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 5e3f46fb..d2605853 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -355,12 +355,17 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        ref="pagesContainer"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
       >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
         >
           <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
             <Dropzone
@@ -633,6 +638,39 @@
         </div>
       </div>
     </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-4 pr-3 h-9 inline-flex items-center text-sm font-semibold cursor-default">
+              {{ Math.round(zoomLevel * 100) }}%
+            </span>
+            <div
+              class="tooltip tooltip-top"
+              :data-tip="t('reset_zoom')"
+            >
+              <button
+                type="button"
+                class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+                @click="zoomLevel = 1"
+              >
+                <IconX class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
     <div
       id="docuseal_modal_container"
       class="modal-container"
@@ -664,7 +702,7 @@ import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import RevisionsModal from './revisions_modal'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
@@ -706,6 +744,7 @@ export default {
     IconEye,
     IconHistory,
     IconDeviceFloppy,
+    IconX,
     RevisionsModal
   },
   provide () {
@@ -1063,7 +1102,8 @@ export default {
       isMathLoaded: false,
       isRevisionsModalOpen: false,
       revisions: [],
-      beforeRevisionSnapshot: null
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
     }
   },
   computed: {
@@ -1313,6 +1353,8 @@ export default {
         this.pendingFieldAttachmentUuids.push(item.attachment_uuid)
       }
     })
+
+    this.$refs.pagesContainer.addEventListener('wheel', this.onPagesWheel, { passive: false })
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
@@ -1320,6 +1362,8 @@ export default {
 
     window.removeEventListener('resize', this.onWindowResize)
     window.removeEventListener('dragleave', this.onWindowDragLeave)
+
+    this.$refs.pagesContainer.removeEventListener('wheel', this.onPagesWheel)
   },
   beforeUpdate () {
     this.documentRefs = []
@@ -2018,6 +2062,30 @@ export default {
 
       this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.002))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index 53066f5c..c4259a27 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -219,7 +219,8 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}'
+  viewing_revision_from: 'Viewing revision from {date}',
+  reset_zoom: 'Reset zoom'
 }
 
 const es = {
@@ -443,7 +444,8 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}'
+  viewing_revision_from: 'Viendo revisión del {date}',
+  reset_zoom: 'Restablecer zoom'
 }
 
 const it = {
@@ -667,7 +669,8 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}'
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  reset_zoom: 'Reimposta zoom'
 }
 
 const pt = {
@@ -891,7 +894,8 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}'
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  reset_zoom: 'Redefinir zoom'
 }
 
 const fr = {
@@ -1115,7 +1119,8 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}'
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  reset_zoom: 'Réinitialiser le zoom'
 }
 
 const de = {
@@ -1339,7 +1344,8 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}'
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  reset_zoom: 'Zoom zurücksetzen'
 }
 
 const nl = {
@@ -1563,7 +1569,8 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken'
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  reset_zoom: 'Zoom terugzetten'
 }
 
 export { en, es, it, pt, fr, de, nl }
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index 29287c4f..163a386f 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -11,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="rounded"
+      class="w-full h-full rounded"
       @load="onImageLoad"
     >
     <div

From a89aef4a890eb7f1b1a3188bd7c192b2600263a5 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 4 Jun 2026 08:32:54 +0300
Subject: [PATCH 4/9] adjust zoom

---
 app/javascript/template_builder/area.vue    |  2 +-
 app/javascript/template_builder/builder.vue | 25 +++++++++------------
 app/javascript/template_builder/i18n.js     | 21 ++++++-----------
 3 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index eba4737c..8ca14aba 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -198,7 +198,7 @@
           width="100%"
           height="100%"
           class="opacity-50"
-          :style="{ maxHeight: isInlineSize ? '5cqmin' : '40px' }"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
         />
       </span>
     </div>
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index d2605853..7ddd1372 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -652,21 +652,18 @@
       >
         <div class="absolute left-0 right-0 bottom-4 flex justify-center">
           <div class="join shadow pointer-events-auto">
-            <span class="join-item bg-base-content text-white pl-4 pr-3 h-9 inline-flex items-center text-sm font-semibold cursor-default">
-              {{ Math.round(zoomLevel * 100) }}%
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
             </span>
-            <div
-              class="tooltip tooltip-top"
-              :data-tip="t('reset_zoom')"
+            <button
+              type="button"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
             >
-              <button
-                type="button"
-                class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
-                @click="zoomLevel = 1"
-              >
-                <IconX class="w-5 h-5" />
-              </button>
-            </div>
+              <IconX class="w-4 h-4 stroke-2" />
+            </button>
           </div>
         </div>
       </div>
@@ -2068,7 +2065,7 @@ export default {
       event.preventDefault()
 
       const oldZoom = this.zoomLevel
-      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.002))
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
 
       if (nextZoom === oldZoom) return
 
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index c4259a27..53066f5c 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -219,8 +219,7 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}',
-  reset_zoom: 'Reset zoom'
+  viewing_revision_from: 'Viewing revision from {date}'
 }
 
 const es = {
@@ -444,8 +443,7 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}',
-  reset_zoom: 'Restablecer zoom'
+  viewing_revision_from: 'Viendo revisión del {date}'
 }
 
 const it = {
@@ -669,8 +667,7 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}',
-  reset_zoom: 'Reimposta zoom'
+  viewing_revision_from: 'Visualizzazione revisione del {date}'
 }
 
 const pt = {
@@ -894,8 +891,7 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}',
-  reset_zoom: 'Redefinir zoom'
+  viewing_revision_from: 'Visualizando revisão de {date}'
 }
 
 const fr = {
@@ -1119,8 +1115,7 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}',
-  reset_zoom: 'Réinitialiser le zoom'
+  viewing_revision_from: 'Affichage de la révision du {date}'
 }
 
 const de = {
@@ -1344,8 +1339,7 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}',
-  reset_zoom: 'Zoom zurücksetzen'
+  viewing_revision_from: 'Ansicht der Revision vom {date}'
 }
 
 const nl = {
@@ -1569,8 +1563,7 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken',
-  reset_zoom: 'Zoom terugzetten'
+  viewing_revision_from: 'Revisie van {date} bekijken'
 }
 
 export { en, es, it, pt, fr, de, nl }

From da21c3725440fe588681a6f5220879e89a70e49e Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Thu, 4 Jun 2026 00:35:04 +0300
Subject: [PATCH 5/9] add Google Drive replace option

---
 app/javascript/template_builder/builder.vue   |   4 +
 app/javascript/template_builder/controls.vue  |  13 ++
 .../google_drive_picker_modal.vue             | 165 ++++++++++++++++++
 app/javascript/template_builder/i18n.js       |  28 ++-
 app/javascript/template_builder/preview.vue   |  15 +-
 app/javascript/template_builder/replace.vue   | 118 +++++++++++--
 app/javascript/template_builder/upload.vue    | 151 +++-------------
 spec/system/template_builder_spec.rb          |   2 +-
 8 files changed, 351 insertions(+), 145 deletions(-)
 create mode 100644 app/javascript/template_builder/google_drive_picker_modal.vue

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 7ddd1372..4fe13b4d 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -309,6 +309,8 @@
           :data-document-uuid="item.attachment_uuid"
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
           :editable="editable"
           :dynamic-documents="dynamicDocuments"
           :with-dynamic-documents="withDynamicDocuments"
@@ -456,6 +458,8 @@
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :with-replace-button="withUploadButton"
+                :with-google-drive="withGoogleDrive"
+                :authenticity-token="authenticityToken"
                 :accept-file-types="acceptFileTypes"
                 :document="document"
                 :template="template"
diff --git a/app/javascript/template_builder/controls.vue b/app/javascript/template_builder/controls.vue
index e09397ae..df976002 100644
--- a/app/javascript/template_builder/controls.vue
+++ b/app/javascript/template_builder/controls.vue
@@ -10,6 +10,9 @@
       v-if="withReplaceButton"
       :template-id="template.id"
       :accept-file-types="acceptFileTypes"
+      :authenticity-token="authenticityToken"
+      :with-google-drive="withGoogleDrive"
+      :google-drive-file-id="item.google_drive_file_id"
       @click.stop
       @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
     />
@@ -73,6 +76,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withArrows: {
       type: Boolean,
       required: false,
diff --git a/app/javascript/template_builder/google_drive_picker_modal.vue b/app/javascript/template_builder/google_drive_picker_modal.vue
new file mode 100644
index 00000000..e4a40f14
--- /dev/null
+++ b/app/javascript/template_builder/google_drive_picker_modal.vue
@@ -0,0 +1,165 @@
+<template>
+  <Teleport :to="modalContainerEl">
+    <div
+      class="modal modal-open items-start !animate-none overflow-y-auto"
+    >
+      <div
+        class="absolute top-0 bottom-0 right-0 left-0"
+        @click.prevent="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            Google Drive
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <div>
+          <form
+            v-if="showOauthButton"
+            method="post"
+            :action="oauthPath"
+            @submit="isConnectClicked = true"
+          >
+            <input
+              type="hidden"
+              name="authenticity_token"
+              :value="authenticityToken"
+              autocomplete="off"
+            >
+            <button
+              class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+              data-turbo="false"
+              type="submit"
+              :disabled="isConnectClicked"
+            >
+              <span v-if="isConnectClicked">
+                <span class="flex items-center justify-center space-x-2">
+                  <IconInnerShadowTop class="animate-spin" />
+                  <span>{{ t('submitting') }}...</span>
+                </span>
+              </span>
+              <span v-else>
+                <span class="flex items-center justify-center space-x-2">
+                  <IconBrandGoogleDrive />
+                  <span>{{ t('connect_google_drive') }}</span>
+                </span>
+              </span>
+            </button>
+          </form>
+          <div
+            v-else
+            class="relative"
+          >
+            <iframe
+              class="border border-base-300 rounded-lg"
+              style="width: 100%; height: 440px; background: white;"
+              src="/template_google_drive"
+            />
+            <div v-if="loading">
+              <div
+                class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
+                style="margin: 1px"
+              />
+              <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
+                <IconInnerShadowTop class="animate-spin" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { IconBrandGoogleDrive, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDrivePickerModal',
+  components: {
+    IconBrandGoogleDrive,
+    IconInnerShadowTop
+  },
+  inject: ['t'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    reopenAfterAuth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modalContainerEl: {
+      type: [Object, String],
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['close', 'picked', 'update:loading'],
+  data () {
+    return {
+      isConnectClicked: false,
+      showOauthButton: false
+    }
+  },
+  computed: {
+    oauthPath () {
+      const redir = this.reopenAfterAuth
+        ? `/templates/${this.templateId}/edit?google_drive_open=1`
+        : `/templates/${this.templateId}/edit`
+
+      const params = {
+        access_type: 'offline',
+        include_granted_scopes: 'true',
+        prompt: 'consent',
+        scope: [
+          'https://www.googleapis.com/auth/userinfo.email',
+          'https://www.googleapis.com/auth/drive.file'
+        ].join(' '),
+        oauth_data: new URLSearchParams({ redir }).toString()
+      }
+
+      return `/auth/google_oauth2?${new URLSearchParams(params).toString()}`
+    }
+  },
+  mounted () {
+    window.addEventListener('message', this.messageHandler)
+  },
+  beforeUnmount () {
+    window.removeEventListener('message', this.messageHandler)
+  },
+  methods: {
+    messageHandler (event) {
+      if (event.data.type === 'google-drive-files-picked') {
+        const files = event.data.files || []
+
+        if (!files.length) return
+
+        this.$emit('update:loading', true)
+        this.$emit('picked', files)
+      } else if (event.data.type === 'google-drive-picker-loaded') {
+        this.$emit('update:loading', false)
+      } else if (event.data.type === 'google-drive-picker-request-oauth') {
+        this.showOauthButton = true
+        this.$emit('update:loading', false)
+      }
+    }
+  }
+}
+</script>
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index 53066f5c..e2bb817d 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -219,7 +219,9 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}'
+  viewing_revision_from: 'Viewing revision from {date}',
+  connect_google_drive: 'Connect Google Drive',
+  submitting: 'Submitting'
 }
 
 const es = {
@@ -443,7 +445,9 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}'
+  viewing_revision_from: 'Viendo revisión del {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const it = {
@@ -667,7 +671,9 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}'
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  connect_google_drive: 'Connetti Google Drive',
+  submitting: 'Invio in corso'
 }
 
 const pt = {
@@ -891,7 +897,9 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}'
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const fr = {
@@ -1115,7 +1123,9 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}'
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  connect_google_drive: 'Connecter Google Drive',
+  submitting: 'Soumission en cours'
 }
 
 const de = {
@@ -1339,7 +1349,9 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}'
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  connect_google_drive: 'Google Drive verbinden',
+  submitting: 'Wird eingereicht'
 }
 
 const nl = {
@@ -1563,7 +1575,9 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken'
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  connect_google_drive: 'Verbind Google Drive',
+  submitting: 'Indienen'
 }
 
 export { en, es, it, pt, fr, de, nl }
diff --git a/app/javascript/template_builder/preview.vue b/app/javascript/template_builder/preview.vue
index 1fe1288d..efd21777 100644
--- a/app/javascript/template_builder/preview.vue
+++ b/app/javascript/template_builder/preview.vue
@@ -36,7 +36,10 @@
               v-if="withReplaceButton"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
-              class="opacity-0 group-hover:opacity-100"
+              :authenticity-token="authenticityToken"
+              :with-google-drive="withGoogleDrive"
+              :google-drive-file-id="item.google_drive_file_id"
+              class="opacity-0 group-hover:opacity-100 has-[label:focus]:opacity-100"
               @click.stop
               @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
             />
@@ -232,6 +235,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     dynamicDocuments: {
       type: Array,
       required: true
diff --git a/app/javascript/template_builder/replace.vue b/app/javascript/template_builder/replace.vue
index 3d0f3597..e8dc25c7 100644
--- a/app/javascript/template_builder/replace.vue
+++ b/app/javascript/template_builder/replace.vue
@@ -1,14 +1,52 @@
 <template>
-  <label
-    :for="inputId"
-    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
-    :class="{ 'opacity-100': isLoading }"
-  >
-    {{ message }}
+  <div class="inline-flex items-stretch replace-document-control">
+    <label
+      :for="inputId"
+      class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
+      :class="[{ 'opacity-100': isLoading }, showGoogleDriveDropdown ? 'rounded-r-none pr-1.5' : '']"
+    >
+      {{ message }}
+    </label>
+    <span
+      v-if="showGoogleDriveDropdown"
+      class="dropdown dropdown-end"
+      @click.stop
+    >
+      <label
+        tabindex="0"
+        class="btn btn-neutral btn-xs text-white rounded-l-none border-l border-white/30 px-1 transition-none cursor-pointer flex items-center"
+      >
+        <IconChevronDown
+          width="12"
+          stroke-width="2.5"
+        />
+      </label>
+      <ul
+        tabindex="0"
+        :style="{  minWidth: '130px', backgroundColor: backgroundColor }"
+        class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
+      >
+        <li>
+          <button
+            type="button"
+            class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+            @click.prevent="openGoogleDriveModal"
+          >
+            <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+            <span>Google Drive</span>
+          </button>
+        </li>
+      </ul>
+    </span>
     <form
       ref="form"
       class="hidden"
     >
+      <input
+        v-if="googleDriveFile"
+        name="google_drive_file_ids[]"
+        :value="googleDriveFile.id"
+      >
       <input
         :id="inputId"
         ref="input"
@@ -18,20 +56,51 @@
         @change="upload"
       >
     </form>
-  </label>
+    <GoogleDrivePickerModal
+      v-if="showGoogleDriveModal"
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
+  </div>
 </template>
 
 <script>
 import Upload from './upload'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+import { IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'ReplaceDocument',
-  inject: ['baseFetch', 't'],
+  components: {
+    IconChevronDown,
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
     templateId: {
       type: [Number, String],
       required: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    googleDriveFileId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -41,16 +110,25 @@ export default {
   emits: ['success'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isLoadingGoogleDrive: true,
+      googleDriveFile: null,
+      showGoogleDriveModal: false
     }
   },
   computed: {
     inputId () {
       return 'el' + Math.random().toString(32).split('.')[1]
     },
+    showGoogleDriveDropdown () {
+      return this.withGoogleDrive && !!this.googleDriveFileId
+    },
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     message () {
       if (this.isLoading) {
         return this.t('uploading_')
@@ -60,7 +138,27 @@ export default {
     }
   },
   methods: {
-    upload: Upload.methods.upload
+    upload: Upload.methods.upload,
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+      this.googleDriveFile = null
+      this.$el.getRootNode().activeElement?.blur()
+    },
+    onGoogleDrivePicked (files) {
+      this.googleDriveFile = files[0]
+
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFile = null
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/app/javascript/template_builder/upload.vue b/app/javascript/template_builder/upload.vue
index 0c688914..775d4d2d 100644
--- a/app/javascript/template_builder/upload.vue
+++ b/app/javascript/template_builder/upload.vue
@@ -61,87 +61,16 @@
         </span>
       </div>
     </label>
-    <Teleport
+    <GoogleDrivePickerModal
       v-if="showGoogleDriveModal"
-      :to="modalContainerEl"
-    >
-      <div
-        class="modal modal-open items-start !animate-none overflow-y-auto"
-      >
-        <div
-          class="absolute top-0 bottom-0 right-0 left-0"
-          @click.prevent="showGoogleDriveModal = false"
-        />
-        <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
-          <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-            <span class="modal-title">
-              Google Drive
-            </span>
-            <a
-              href="#"
-              class="text-xl modal-close-button"
-              @click.prevent="showGoogleDriveModal = false"
-            >&times;</a>
-          </div>
-          <div>
-            <form
-              v-if="showGoogleDriveOauthButton"
-              method="post"
-              :action="googleDriveOauthPath"
-              @submit="isConnectGoogleDriveClicked = true"
-            >
-              <input
-                type="hidden"
-                name="authenticity_token"
-                :value="authenticityToken"
-                autocomplete="off"
-              >
-              <button
-                id="gdrive_oauth_button"
-                class="btn bg-white btn-outline w-full text-base font-medium mt-4"
-                data-turbo="false"
-                type="submit"
-                :disabled="isConnectGoogleDriveClicked"
-              >
-                <span v-if="isConnectGoogleDriveClicked">
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconInnerShadowTop class="animate-spin" />
-                    <span class="">Submitting...</span>
-                  </span>
-                </span>
-                <span
-                  v-else
-                >
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconBrandGoogleDrive />
-                    <span>Connect Google Drive</span>
-                  </span>
-                </span>
-              </button>
-            </form>
-            <div
-              v-else
-              class="relative"
-            >
-              <iframe
-                class="border border-base-300 rounded-lg"
-                style="width: 100%; height: 440px; background: white;"
-                src="/template_google_drive"
-              />
-              <div v-if="isLoadingGoogleDrive">
-                <div
-                  class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
-                  style="margin: 1px"
-                />
-                <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
-                  <IconInnerShadowTop class="animate-spin" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      :reopen-after-auth="true"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
     <form
       ref="form"
       class="hidden"
@@ -167,6 +96,7 @@
 
 <script>
 import { IconUpload, IconInnerShadowTop, IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
 
 function convertImage (sourceFile, targetType, quality) {
   return new Promise((resolve, reject) => {
@@ -233,7 +163,8 @@ export default {
     IconUpload,
     IconInnerShadowTop,
     IconChevronDown,
-    IconBrandGoogleDrive
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
   },
   inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
@@ -261,11 +192,9 @@ export default {
   data () {
     return {
       isLoading: false,
-      isConnectGoogleDriveClicked: false,
-      isLoadingGoogleDrive: false,
+      isLoadingGoogleDrive: true,
       googleDriveFiles: [],
-      showGoogleDriveModal: false,
-      showGoogleDriveOauthButton: false
+      showGoogleDriveModal: false
     }
   },
   computed: {
@@ -278,65 +207,35 @@ export default {
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
-    googleDriveOauthPath () {
-      const params = {
-        access_type: 'offline',
-        include_granted_scopes: 'true',
-        prompt: 'consent',
-        scope: [
-          'https://www.googleapis.com/auth/userinfo.email',
-          'https://www.googleapis.com/auth/drive.file'
-        ].join(' '),
-        oauth_data: new URLSearchParams({
-          redir: `/templates/${this.templateId}/edit?google_drive_open=1`
-        }).toString()
-      }
-
-      const query = new URLSearchParams(params).toString()
-
-      return `/auth/google_oauth2?${query}`
-    },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     }
   },
   mounted () {
-    window.addEventListener('message', this.messageHandler)
-
     if (this.queryParams.get('google_drive_open') === '1') {
       this.openGoogleDriveModal()
 
       window.history.replaceState({}, document.title, window.location.pathname)
     }
   },
-  beforeUnmount () {
-    window.removeEventListener('message', this.messageHandler)
-  },
   methods: {
     openGoogleDriveModal () {
       this.showGoogleDriveModal = true
       this.isLoadingGoogleDrive = true
     },
-    messageHandler (event) {
-      if (event.data.type === 'google-drive-files-picked') {
-        this.googleDriveFiles = event.data.files || []
-
-        this.$nextTick(() => {
-          this.isLoadingGoogleDrive = true
+    onGoogleDrivePicked (files) {
+      this.googleDriveFiles = files
 
-          this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
-            if (resp.ok) {
-              this.showGoogleDriveModal = false
-            }
-          }).finally(() => {
-            this.isLoadingGoogleDrive = false
-          })
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFiles = []
         })
-      } else if (event.data.type === 'google-drive-picker-loaded') {
-        this.isLoadingGoogleDrive = false
-      } else if (event.data.type === 'google-drive-picker-request-oauth') {
-        this.showGoogleDriveOauthButton = true
-      }
+      })
     },
     async upload ({ path } = {}) {
       this.isLoading = true
diff --git a/spec/system/template_builder_spec.rb b/spec/system/template_builder_spec.rb
index 2f4b9456..7d41c06a 100644
--- a/spec/system/template_builder_spec.rb
+++ b/spec/system/template_builder_spec.rb
@@ -20,7 +20,7 @@ RSpec.describe 'Template Builder' do
 
       expect do
         doc.find('.replace-document-button').click
-        doc.find('.replace-document-button input[type="file"]', visible: false)
+        doc.find('.replace-document-control input[type="file"]', visible: false)
            .attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
 
         page.driver.wait_for_network_idle

From b7f8b65d9da0b49ee0a016a8f783b3486eee3b50 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 5 Jun 2026 09:39:47 +0300
Subject: [PATCH 6/9] adjust button style

---
 app/javascript/template_builder/i18n.js     |  6 +-
 app/javascript/template_builder/replace.vue | 68 ++++++++++-----------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index e2bb817d..aa3c69a7 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -673,7 +673,7 @@ const it = {
   no_revisions_yet: 'Nessuna revisione ancora',
   viewing_revision_from: 'Visualizzazione revisione del {date}',
   connect_google_drive: 'Connetti Google Drive',
-  submitting: 'Invio in corso'
+  submitting: 'Invio'
 }
 
 const pt = {
@@ -1125,7 +1125,7 @@ const fr = {
   no_revisions_yet: 'Aucune révision pour le moment',
   viewing_revision_from: 'Affichage de la révision du {date}',
   connect_google_drive: 'Connecter Google Drive',
-  submitting: 'Soumission en cours'
+  submitting: 'Soumission'
 }
 
 const de = {
@@ -1351,7 +1351,7 @@ const de = {
   no_revisions_yet: 'Noch keine Revisionen',
   viewing_revision_from: 'Ansicht der Revision vom {date}',
   connect_google_drive: 'Google Drive verbinden',
-  submitting: 'Wird eingereicht'
+  submitting: 'Übermittlung'
 }
 
 const nl = {
diff --git a/app/javascript/template_builder/replace.vue b/app/javascript/template_builder/replace.vue
index e8dc25c7..35eb0f5d 100644
--- a/app/javascript/template_builder/replace.vue
+++ b/app/javascript/template_builder/replace.vue
@@ -2,42 +2,42 @@
   <div class="inline-flex items-stretch replace-document-control">
     <label
       :for="inputId"
-      class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
-      :class="[{ 'opacity-100': isLoading }, showGoogleDriveDropdown ? 'rounded-r-none pr-1.5' : '']"
+      class="btn btn-neutral btn-xs transition-none replace-document-button"
+      :class="{ 'opacity-100': isLoading, 'pr-0': showGoogleDriveDropdown && !isLoading }"
     >
-      {{ message }}
-    </label>
-    <span
-      v-if="showGoogleDriveDropdown"
-      class="dropdown dropdown-end"
-      @click.stop
-    >
-      <label
-        tabindex="0"
-        class="btn btn-neutral btn-xs text-white rounded-l-none border-l border-white/30 px-1 transition-none cursor-pointer flex items-center"
-      >
-        <IconChevronDown
-          width="12"
-          stroke-width="2.5"
-        />
-      </label>
-      <ul
-        tabindex="0"
-        :style="{  minWidth: '130px', backgroundColor: backgroundColor }"
-        class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
-      >
-        <li>
-          <button
-            type="button"
-            class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
-            @click.prevent="openGoogleDriveModal"
+      <div class="flex items-center justify-between w-full h-full">
+        <span class="flex items-center space-x-2 w-full justify-center text-white">
+          {{ message }}
+        </span>
+        <span
+          v-if="showGoogleDriveDropdown && !isLoading"
+          class="dropdown dropdown-end inline h-full"
+          style="width: 30px"
+        >
+          <label
+            tabindex="0"
+            class="flex items-center h-full cursor-pointer text-white"
+          >
+            <IconChevronDown class="w-4 h-4 flex-shrink-0" />
+          </label>
+          <ul
+            tabindex="0"
+            :style="{ backgroundColor }"
+            class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
           >
-            <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
-            <span>Google Drive</span>
-          </button>
-        </li>
-      </ul>
-    </span>
+            <li>
+              <button
+                type="button"
+                @click.prevent="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </label>
     <form
       ref="form"
       class="hidden"

From 8e462047bad4a3a53a8433a2fd0fee5449586c22 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 5 Jun 2026 14:45:22 +0300
Subject: [PATCH 7/9] fix upload callback

---
 app/javascript/template_builder/dropzone.vue | 2 +-
 app/javascript/template_builder/replace.vue  | 2 +-
 app/javascript/template_builder/upload.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/template_builder/dropzone.vue b/app/javascript/template_builder/dropzone.vue
index 426c544b..cbe9230a 100644
--- a/app/javascript/template_builder/dropzone.vue
+++ b/app/javascript/template_builder/dropzone.vue
@@ -62,7 +62,7 @@
           name="files[]"
           :accept="acceptFileTypes"
           multiple
-          @change="upload"
+          @change="upload()"
         >
       </form>
     </label>
diff --git a/app/javascript/template_builder/replace.vue b/app/javascript/template_builder/replace.vue
index 35eb0f5d..cd828f84 100644
--- a/app/javascript/template_builder/replace.vue
+++ b/app/javascript/template_builder/replace.vue
@@ -53,7 +53,7 @@
         name="files[]"
         type="file"
         :accept="acceptFileTypes"
-        @change="upload"
+        @change="upload()"
       >
     </form>
     <GoogleDrivePickerModal
diff --git a/app/javascript/template_builder/upload.vue b/app/javascript/template_builder/upload.vue
index 775d4d2d..86c7d15b 100644
--- a/app/javascript/template_builder/upload.vue
+++ b/app/javascript/template_builder/upload.vue
@@ -88,7 +88,7 @@
         type="file"
         :accept="acceptFileTypes"
         multiple
-        @change="upload"
+        @change="upload()"
       >
     </form>
   </div>

From 3cdab30dc84db5a2a4b96e893c53e39ad5e69733 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 5 Jun 2026 16:55:55 +0300
Subject: [PATCH 8/9] remove oj

---
 Gemfile                   | 1 -
 Gemfile.lock              | 7 +------
 config/initializers/oj.rb | 3 ---
 3 files changed, 1 insertion(+), 10 deletions(-)
 delete mode 100644 config/initializers/oj.rb

diff --git a/Gemfile b/Gemfile
index 36783f0d..e2d74068 100644
--- a/Gemfile
+++ b/Gemfile
@@ -24,7 +24,6 @@ gem 'hexapdf'
 gem 'jwt', require: false
 gem 'lograge'
 gem 'numo-narray-alt', require: false
-gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false
diff --git a/Gemfile.lock b/Gemfile.lock
index 933cf9a8..d72a8bd7 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -271,7 +271,7 @@ GEM
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.19.7)
+    json (2.19.8)
     jwt (3.2.0)
       base64
     language_server-protocol (3.17.0.5)
@@ -334,9 +334,6 @@ GEM
     nokogiri (1.19.3-x86_64-linux-musl)
       racc (~> 1.4)
     numo-narray-alt (0.10.3)
-    oj (3.16.16)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
     onnxruntime (0.10.1-aarch64-linux)
       ffi
     onnxruntime (0.10.1-arm64-darwin)
@@ -346,7 +343,6 @@ GEM
     openssl (4.0.1)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.3)
     package_json (0.2.0)
     pagy (43.4.4)
       json
@@ -623,7 +619,6 @@ DEPENDENCIES
   letter_opener_web
   lograge
   numo-narray-alt
-  oj
   onnxruntime
   pagy
   pg
diff --git a/config/initializers/oj.rb b/config/initializers/oj.rb
deleted file mode 100644
index 5f609ded..00000000
--- a/config/initializers/oj.rb
+++ /dev/null
@@ -1,3 +0,0 @@
-# frozen_string_literal: true
-
-Oj.optimize_rails

From 095f25a6e93e23ee9ddd5d51cb84afac435851b2 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Mon, 8 Jun 2026 09:15:03 +0300
Subject: [PATCH 9/9] adjust image type

---
 lib/submissions/generate_audit_trail.rb        | 13 ++++++++++---
 lib/submissions/generate_result_attachments.rb |  7 +++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/lib/submissions/generate_audit_trail.rb b/lib/submissions/generate_audit_trail.rb
index d58a6c17..a76497f3 100644
--- a/lib/submissions/generate_audit_trail.rb
+++ b/lib/submissions/generate_audit_trail.rb
@@ -347,6 +347,13 @@ module Submissions
 
           field_name = grouped_value_field_names[value].presence || field['title'].presence || field['name'].to_s
 
+          field_type = field['type']
+
+          if field_type == 'image' &&
+             submitter.attachments.find { |a| a.uuid == value }.then { |a| !a.image? || a.content_type == 'image/heic' }
+            field_type = 'file'
+          end
+
           [
             composer.formatted_text_box(
               [
@@ -359,7 +366,7 @@ module Submissions
               text_align: field_name.to_s.match?(RTL_REGEXP) ? :right : :left,
               line_spacing: 1.3, padding: [0, 0, 2, 0]
             ),
-            if field['type'].in?(%w[image signature initials stamp kba]) &&
+            if field_type.in?(%w[image signature initials stamp kba]) &&
                (attachment = submitter.attachments.find { |a| a.uuid == value }) &&
                attachment.image?
 
@@ -394,7 +401,7 @@ module Submissions
 
               composer.image(io, width:, height:, margin: [5, 0, 10, 0])
               composer.formatted_text_box([{ text: '' }])
-            elsif field['type'].in?(%w[file payment image])
+            elsif field_type.in?(%w[file payment image])
               if field['type'] == 'payment'
                 unit = CURRENCY_SYMBOLS[field['preferences']['currency']] || field['preferences']['currency']
 
@@ -419,7 +426,7 @@ module Submissions
                 end,
                 padding: [0, 0, 10, 0]
               )
-            elsif field['type'] == 'checkbox'
+            elsif field_type == 'checkbox'
               composer.formatted_text_box([{ text: value.to_s.titleize }], padding: [0, 0, 10, 0])
             else
               if field['type'] == 'date'
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 3b2260ff..7b3ed4cd 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -294,8 +294,11 @@ module Submissions
           canvas.font(FONT_NAME, size: font_size)
 
           field_type = field['type']
-          field_type = 'file' if field_type == 'image' &&
-                                 !submitter.attachments.find { |a| a.uuid == value }.image?
+
+          if field_type == 'image' &&
+             submitter.attachments.find { |a| a.uuid == value }.then { |a| !a.image? || a.content_type == 'image/heic' }
+            field_type = 'file'
+          end
 
           if field_type == 'signature' && field.dig('preferences', 'with_signature_id').in?([true, false])
             with_signature_id = field['preferences']['with_signature_id']