make public storage and direct upload optional

app/controllers/api/attachments_controller.rb

@@ -7,7 +7,14 @@ module Api
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
-      blob = ActiveStorage::Blob.find_signed(params[:blob_signed_id])
+      blob =
+        if (file = params[:file])
+          ActiveStorage::Blob.create_and_upload!(io: file.open,
+                                                 filename: file.original_filename,
+                                                 content_type: file.content_type)
+        else
+          ActiveStorage::Blob.find_signed(params[:blob_signed_id])
+        end
 
       attachment = ActiveStorage::Attachment.create!(
         blob:,

app/controllers/api/templates_documents_controller.rb

@@ -6,9 +6,7 @@ module Api
       @template = current_account.templates.find(params[:template_id])
 
       documents =
-        params[:blobs].map do |blob|
-          blob = ActiveStorage::Blob.find_signed(blob[:signed_id])
-
+        find_or_create_blobs.map do |blob|
           document = @template.documents.create!(blob:)
 
           Templates::ProcessDocument.call(document)
@@ -27,5 +25,19 @@ module Api
         )
       }
     end
+
+    private
+
+    def find_or_create_blobs
+      blobs = params[:blobs]&.map do |attrs|
+        ActiveStorage::Blob.find_signed(attrs[:signed_id])
+      end
+
+      blobs || params[:files].map do |file|
+        ActiveStorage::Blob.create_and_upload!(io: file.open,
+                                               filename: file.original_filename,
+                                               content_type: file.content_type)
+      end
+    end
   end
 end

app/controllers/esign_settings_controller.rb

@@ -2,21 +2,17 @@
 
 class EsignSettingsController < ApplicationController
   def create
-    blobs =
-      params[:blob_signed_ids].map do |sid|
-        ActiveStorage::Blob.find_signed(sid)
-      end
-
     pdfs =
-      blobs.map do |blob|
-        HexaPDF::Document.new(io: StringIO.new(blob.download))
+      params[:files].map do |file|
+        HexaPDF::Document.new(io: file.open)
       end
 
     certs = Accounts.load_signing_certs(current_account)
 
     trusted_certs = [certs[:cert], certs[:sub_ca], certs[:root_ca]]
 
-    render turbo_stream: turbo_stream.replace('result', partial: 'result', locals: { pdfs:, blobs:, trusted_certs: })
+    render turbo_stream: turbo_stream.replace('result', partial: 'result',
+                                                        locals: { pdfs:, files: params[:files], trusted_certs: })
   rescue HexaPDF::MalformedPDFError
     render turbo_stream: turbo_stream.replace('result', html: helpers.tag.div('Invalid PDF', id: 'result'))
   end

app/javascript/application.js

@@ -51,7 +51,8 @@ window.customElements.define('template-builder', class extends HTMLElement {
     this.appElem = document.createElement('div')
 
     this.app = createApp(TemplateBuilder, {
-      template: reactive(JSON.parse(this.dataset.template))
+      template: reactive(JSON.parse(this.dataset.template)),
+      isDirectUpload: this.dataset.isDirectUpload === 'true'
     })
 
     this.app.mount(this.appElem)

app/javascript/elements/file_dropzone.js

@@ -9,28 +9,36 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
+    if (this.dataset.isDirectUpload === 'true') {
       import('@rails/activestorage')
+    }
 
     this.addEventListener('drop', this.onDrop)
 
     this.addEventListener('dragover', (e) => e.preventDefault())
+
+    document.addEventListener('turbo:submit-end', this.toggleLoading)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.toggleLoading)
   }
 
   onDrop (e) {
     e.preventDefault()
 
+    this.input.files = e.dataTransfer.files
+
     this.uploadFiles(e.dataTransfer.files)
   }
 
   onSelectFiles (e) {
     e.preventDefault()
 
-    this.uploadFiles(this.input.files).then(() => {
-      this.input.value = ''
-    })
+    this.uploadFiles(this.input.files)
   }
 
-  toggleLoading () {
+  toggleLoading = () => {
     this.loading.classList.toggle('hidden')
     this.icon.classList.toggle('hidden')
     this.classList.toggle('opacity-50')
@@ -39,6 +47,7 @@ export default actionable(targetable(class extends HTMLElement {
   async uploadFiles (files) {
     this.toggleLoading()
 
+    if (this.dataset.isDirectUpload === 'true') {
       const { DirectUpload } = await import('@rails/activestorage')
 
       await Promise.all(
@@ -84,5 +93,10 @@ export default actionable(targetable(class extends HTMLElement {
       }).finally(() => {
         this.toggleLoading()
       })
+    } else {
+      if (this.dataset.submitOnUpload) {
+        this.closest('form').querySelector('button[type="submit"]').click()
+      }
+    }
   }
 }))

app/javascript/form.js

@@ -13,6 +13,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
       submitterUuid: this.dataset.submitterUuid,
       authenticityToken: this.dataset.authenticityToken,
       canSendEmail: this.dataset.canSendEmail === 'true',
+      isDirectUpload: this.dataset.isDirectUpload === 'true',
       values: reactive(JSON.parse(this.dataset.values)),
       attachments: reactive(JSON.parse(this.dataset.attachments)),
       fields: JSON.parse(this.dataset.fields)

app/javascript/submission_form/attachment_step.vue

@@ -47,6 +47,8 @@
     <FileDropzone
       :message="`Upload ${field.name || 'Attachments'}${field.required ? '' : ' (optional)'}`"
       :submitter-slug="submitterSlug"
+      :is-direct-upload="isDirectUpload"
+      :multiple="true"
       @upload="onUpload"
     />
   </div>
@@ -77,6 +79,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     modelValue: {
       type: Array,
       required: false,

app/javascript/submission_form/dropzone.vue

@@ -69,6 +69,11 @@ export default {
       required: false,
       default: '*/*'
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -87,7 +92,9 @@ export default {
     }
   },
   mounted () {
+    if (this.isDirectUpload) {
       import('@rails/activestorage')
+    }
   },
   methods: {
     onDropFiles (e) {
@@ -105,6 +112,7 @@ export default {
     async uploadFiles (files) {
       this.isLoading = true
 
+      if (this.isDirectUpload) {
         const { DirectUpload } = await import('@rails/activestorage')
 
         const blobs = await Promise.all(
@@ -149,6 +157,27 @@ export default {
         }).finally(() => {
           this.isLoading = false
         })
+      } else {
+        return await Promise.all(
+          Array.from(files).map((file) => {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch('/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then(resp => resp.json()).then((data) => {
+              return data
+            })
+          })).then((result) => {
+          this.$emit('upload', result)
+        }).finally(() => {
+          this.isLoading = false
+        })
+      }
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -201,6 +201,7 @@
           v-else-if="currentField.type === 'image'"
           v-model="values[currentField.uuid]"
           :field="currentField"
+          :is-direct-upload="isDirectUpload"
           :attachments-index="attachmentsIndex"
           :submitter-slug="submitterSlug"
           @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
@@ -210,6 +211,7 @@
           ref="currentStep"
           v-model="values[currentField.uuid]"
           :field="currentField"
+          :is-direct-upload="isDirectUpload"
           :attachments-index="attachmentsIndex"
           :submitter-slug="submitterSlug"
           @attached="attachments.push($event)"
@@ -217,6 +219,7 @@
         <AttachmentStep
           v-else-if="currentField.type === 'file'"
           v-model="values[currentField.uuid]"
+          :is-direct-upload="isDirectUpload"
           :field="currentField"
           :attachments-index="attachmentsIndex"
           :submitter-slug="submitterSlug"
@@ -315,6 +318,11 @@ export default {
       type: String,
       required: true
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     values: {
       type: Object,
       required: false,

app/javascript/submission_form/image_step.vue

@@ -30,6 +30,7 @@
       :message="`Upload ${field.name || 'Image'}${field.required ? '' : ' (optional)'}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
+      :is-direct-upload="isDirectUpload"
       @upload="onImageUpload"
     />
   </div>
@@ -50,6 +51,11 @@ export default {
       type: Object,
       required: true
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true

app/javascript/submission_form/signature_step.vue

@@ -56,6 +56,11 @@ export default {
       type: String,
       required: true
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -79,7 +84,10 @@ export default {
       this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
     })
 
+    if (this.isDirectUpload) {
       import('@rails/activestorage')
+    }
+
     const { default: SignaturePad } = await import('signature_pad')
 
     this.pad = new SignaturePad(this.$refs.canvas)
@@ -102,12 +110,13 @@ export default {
         return Promise.resolve({})
       }
 
-      const { DirectUpload } = await import('@rails/activestorage')
-
       return new Promise((resolve) => {
-        this.$refs.canvas.toBlob((blob) => {
+        this.$refs.canvas.toBlob(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
+          if (this.isDirectUpload) {
+            const { DirectUpload } = await import('@rails/activestorage')
+
             new DirectUpload(
               file,
               '/direct_uploads'
@@ -127,6 +136,23 @@ export default {
                 return resolve(attachment)
               })
             })
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch('/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('update:model-value', attachment.uuid)
+              this.$emit('attached', attachment)
+
+              return resolve(attachment)
+            })
+          }
         }, 'image/png')
       })
     }

app/javascript/template_builder/builder.vue

@@ -74,6 +74,7 @@
           <Upload
             v-if="sortedDocuments.length"
             :template-id="template.id"
+            :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
         </div>
@@ -83,12 +84,12 @@
           ref="documents"
           class="pr-3.5 pl-0.5"
         >
-          <template v-if="!sortedDocuments.length">
           <Dropzone
+            v-if="!sortedDocuments.length"
             :template-id="template.id"
+            :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
-          </template>
           <template v-else>
             <Document
               v-for="document in sortedDocuments"
@@ -194,6 +195,11 @@ export default {
     template: {
       type: Object,
       required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
     }
   },
   data () {

app/javascript/template_builder/dropzone.vue

@@ -33,15 +33,20 @@
           </div>
         </div>
       </div>
+      <form
+        ref="form"
+        class="hidden"
+      >
         <input
           :id="inputId"
           ref="input"
           type="file"
-        class="hidden"
+          name="files[]"
           accept="image/*, application/pdf"
           multiple
           @change="upload"
         >
+      </form>
     </label>
   </div>
 </template>
@@ -60,6 +65,11 @@ export default {
     templateId: {
       type: [Number, String],
       required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
     }
   },
   emits: ['success'],

app/javascript/template_builder/upload.vue

@@ -24,15 +24,20 @@
         Add Document
       </span>
     </label>
+    <form
+      ref="form"
+      class="hidden"
+    >
       <input
         :id="inputId"
         ref="input"
+        name="files[]"
         type="file"
-      class="hidden"
         accept="image/*, application/pdf"
         multiple
         @change="upload"
       >
+    </form>
   </div>
 </template>
 
@@ -49,6 +54,11 @@ export default {
     templateId: {
       type: [Number, String],
       required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
     }
   },
   emits: ['success'],
@@ -64,12 +74,15 @@ export default {
     }
   },
   mounted () {
+    if (this.isDirectUpload) {
       import('@rails/activestorage')
+    }
   },
   methods: {
     async upload () {
       this.isLoading = true
 
+      if (this.isDirectUpload) {
         const { DirectUpload } = await import('@rails/activestorage')
 
         const blobs = await Promise.all(
@@ -110,6 +123,17 @@ export default {
         }).finally(() => {
           this.isProcessing = false
         })
+      } else {
+        fetch(`/api/templates/${this.templateId}/documents`, {
+          method: 'POST',
+          body: new FormData(this.$refs.form)
+        }).then(resp => resp.json()).then((data) => {
+          this.$emit('success', data)
+          this.$refs.input.value = ''
+        }).finally(() => {
+          this.isLoading = false
+        })
+      }
     }
   }
 }

app/views/esign_settings/_result.html.erb

@@ -1,9 +1,9 @@
 <div id="result">
-  <% blobs.zip(pdfs).each do |blob, pdf| %>
+  <% files.zip(pdfs).each do |file, pdf| %>
     <div class="mb-4 border border-base-300 rounded-md py-2 px-3">
       <% if pdf.signatures.to_a.size == 0 %>
         <div class="text-sm">
-          <%= blob.filename %>
+          <%= file.original_filename %>
         </div>
         <p class="text-xl font-medium">
           There are no signatures...
@@ -11,7 +11,7 @@
       <% else %>
         <div class="flex items-center space-x-1 border-b border-dashed border-base-300 pb-2">
           <%= svg_icon('file_text', class: 'w-5 h-5 inline') %>
-          <span><%= blob.filename %> - <%= pluralize(pdf.signatures.to_a.size, 'Signature') %></span>
+          <span><%= file.original_filename %> - <%= pluralize(pdf.signatures.to_a.size, 'Signature') %></span>
         </div>
         <% pdf.signatures.to_a.each do |signature| %>
           <div class="mt-3">

app/views/esign_settings/index.html.erb

@@ -7,14 +7,14 @@
         Upload signed PDF file to validate its signature:
       </p>
     </div>
-    <%= form_for '', url: settings_esign_index_path, method: :post do |f| %>
+    <%= form_for '', url: settings_esign_index_path, method: :post, html: { enctype: 'multipart/form-data' } do |f| %>
       <%= f.button type: 'submit', class: 'flex' do %>
         <div class="disabled mb-3">
           <%= svg_icon('loader', class: 'w-5 h-5 animate-spin inline') %>
           Analyzing...
         </div>
       <% end %>
-      <file-dropzone data-name="verify_attachments" data-submit-on-upload="true" class="w-full">
+      <file-dropzone data-is-direct-upload="false" data-name="verify_attachments" data-submit-on-upload="true" class="w-full">
         <label for="file" class="w-full block h-32 relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed">
           <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
             <div class="flex flex-col items-center">
@@ -31,7 +31,7 @@
                 <span class="font-medium">Click to upload</span> or drag and drop
               </div>
             </div>
-            <input id="file" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="application/pdf" multiple>
+            <input id="file" name="files[]" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="application/pdf" multiple>
           </div>
         </label>
       </file-dropzone>

app/views/submit_form/show.html.erb

@@ -33,7 +33,7 @@
   <div class="mx-auto" style="max-width: 1000px">
     <div class="relative md:mx-32">
       <div id="form_container" class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border border-base-200 border p-4 rounded">
-        <submission-form data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
+        <submission-form data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
       </div>
     </div>
   </div>

app/views/templates/edit.html.erb

@@ -1 +1 @@
-<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>
+<template-builder data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>

config/environments/development.rb

@@ -21,6 +21,7 @@ Rails.application.configure do
 
   # Do not eager load code on boot.
   config.eager_load = false
+  config.hosts = nil
 
   # Show full error reports.
   config.consider_all_requests_local = true
@@ -45,7 +46,8 @@ Rails.application.configure do
   end
 
   # Store uploaded files on the local file system (see config/storage.yml for options).
-  config.active_storage.service = :local
+  config.active_storage.service = :disk
+  config.active_storage.resolve_model_to_route = :rails_storage_proxy
 
   # Don't care if the mailer can't send.
   config.action_mailer.raise_delivery_errors = true

config/environments/production.rb

@@ -46,9 +46,11 @@ Rails.application.configure do
     elsif ENV['AZURE_CONTAINER'].present?
       :azure
     else
-      :local
+      :disk
     end
 
+  config.active_storage.resolve_model_to_route = :rails_storage_proxy if ENV['ACTIVE_STORAGE_PUBLIC'] != 'true'
+
   # Mount Action Cable outside main process or domain.
   # config.action_cable.mount_path = nil
   # config.action_cable.url = "wss://example.com/cable"

config/storage.yml

@@ -1,8 +1,3 @@
-local:
-  service: Disk
-  root: <%= ENV['WORKDIR'] || '.' %>/attachments
-  public: true
-
 disk:
   service: Disk
   root: <%= ENV['WORKDIR'] || '.' %>/attachments
@@ -14,7 +9,7 @@ aws_s3:
   secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
   region: <%= ENV['AWS_REGION'] || 'us-east-1' %>
   bucket: <%= ENV['S3_ATTACHMENTS_BUCKET'] %>
-  public: true
+  public: <%= ENV['ACTIVE_STORAGE_PUBLIC'] == 'true' %>
   upload:
     cache_control: 'public, max-age=31536000'
 
@@ -23,7 +18,7 @@ google:
   credentials: <%= JSON.parse(ENV['GCS_CREDENTIALS'] || '{}') %>
   project: <%= ENV['GCS_PROJECT'] %>
   bucket: <%= ENV['GCS_BUCKET'] %>
-  public: true
+  public: <%= ENV['ACTIVE_STORAGE_PUBLIC'] == 'true' %>
   cache_control: "public, max-age=31536000"
 
 azure:
@@ -31,4 +26,4 @@ azure:
   storage_account_name: <%= ENV['AZURE_STORAGE_ACCOUNT_NAME'] %>
   storage_access_key: <%= ENV['AZURE_STORAGE_ACCESS_KEY'] %>
   container: <%= ENV['AZURE_CONTAINER'] %>
-  public: true
+  public: <%= ENV['ACTIVE_STORAGE_PUBLIC'] == 'true' %>

lib/docuseal.rb

@@ -19,6 +19,10 @@ module Docuseal
     ENV['MULTITENANT'] == 'true'
   end
 
+  def active_storage_public?
+    ENV['ACTIVE_STORAGE_PUBLIC'] == 'true'
+  end
+
   def default_url_options
     return DEFAULT_URL_OPTIONS if multitenant?
 

lib/submissions/generate_result_attachments.rb

@@ -98,7 +98,8 @@ module Submissions
                     (area['x'] * width) + (area['w'] * width) + TEXT_LEFT_MARGIN,
                     height - (area['y'] * height) - lines[..next_index].sum(&:height) + height_diff
                   ],
-                  A: { Type: :Action, S: :URI, URI: attachment.url }
+                  A: { Type: :Action, S: :URI,
+                       URI: h.rails_blob_url(attachment, **Docuseal.default_url_options) }
                 }
               )
 
@@ -260,5 +261,9 @@ module Submissions
                    .write_to_buffer('.png')
       end
     end
+
+    def h
+      Rails.application.routes.url_helpers
+    end
   end
 end