make public storage and direct upload optional

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
     })
 
-    import('@rails/activestorage')
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+
     const { default: SignaturePad } = await import('signature_pad')
 
     this.pad = new SignaturePad(this.$refs.canvas)
@@ -102,31 +110,49 @@ 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' })
 
-          new DirectUpload(
-            file,
-            '/direct_uploads'
-          ).create((_error, data) => {
-            fetch('/api/attachments', {
+          if (this.isDirectUpload) {
+            const { DirectUpload } = await import('@rails/activestorage')
+
+            new DirectUpload(
+              file,
+              '/direct_uploads'
+            ).create((_error, data) => {
+              fetch('/api/attachments', {
+                method: 'POST',
+                body: JSON.stringify({
+                  submitter_slug: this.submitterSlug,
+                  blob_signed_id: data.signed_id,
+                  name: 'attachments'
+                }),
+                headers: { 'Content-Type': 'application/json' }
+              }).then((resp) => resp.json()).then((attachment) => {
+                this.$emit('update:model-value', attachment.uuid)
+                this.$emit('attached', attachment)
+
+                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: JSON.stringify({
-                submitter_slug: this.submitterSlug,
-                blob_signed_id: data.signed_id,
-                name: 'attachments'
-              }),
-              headers: { 'Content-Type': 'application/json' }
+              body: formData
             }).then((resp) => resp.json()).then((attachment) => {
               this.$emit('update:model-value', attachment.uuid)
               this.$emit('attached', attachment)
 
               return resolve(attachment)
             })
-          })
+          }
         }, 'image/png')
       })
     }