diff --git a/app/javascript/application.js b/app/javascript/application.js index 5a209c92..b28d0bb2 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -100,8 +100,7 @@ window.customElements.define('template-builder', class extends HTMLElement { withFormula: this.dataset.withFormula === 'true', withConditions: this.dataset.withConditions === 'true', currencies: (this.dataset.currencies || '').split(',').filter(Boolean), - acceptFileTypes: this.dataset.acceptFileTypes, - isDirectUpload: this.dataset.isDirectUpload === 'true' + acceptFileTypes: this.dataset.acceptFileTypes }) this.app.mount(this.appElem) diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js index 7511da06..d8fbb116 100644 --- a/app/javascript/elements/file_dropzone.js +++ b/app/javascript/elements/file_dropzone.js @@ -9,10 +9,6 @@ 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()) @@ -48,61 +44,11 @@ export default actionable(targetable(class extends HTMLElement { this.classList.toggle('opacity-50') } - async uploadFiles (files) { + uploadFiles () { this.toggleLoading() - if (this.dataset.isDirectUpload === 'true') { - const { DirectUpload } = await import('@rails/activestorage') - - await Promise.all( - Array.from(files).map(async (file) => { - const upload = new DirectUpload( - file, - '/direct_uploads', - this.input - ) - - return new Promise((resolve, reject) => { - upload.create((error, blob) => { - if (error) { - console.error(error) - - return reject(error) - } else { - return resolve(blob) - } - }) - }).catch((error) => { - console.error(error) - }) - }) - ).then((blobs) => { - if (this.dataset.submitOnUpload) { - this.querySelectorAll('[name="blob_signed_ids[]"]').forEach((e) => e.remove()) - } - - blobs.forEach((blob) => { - const input = document.createElement('input') - - input.type = 'hidden' - input.name = 'blob_signed_ids[]' - input.value = blob.signed_id - - this.append(input) - }) - - if (this.dataset.submitOnUpload === 'true') { - this.closest('form').querySelector('button[type="submit"]').click() - } - }).finally(() => { - if (this.dataset.submitOnUpload !== 'true') { - this.toggleLoading() - } - }) - } else { - if (this.dataset.submitOnUpload) { - this.closest('form').querySelector('button[type="submit"]').click() - } + if (this.dataset.submitOnUpload) { + this.closest('form').querySelector('button[type="submit"]').click() } } })) diff --git a/app/javascript/form.js b/app/javascript/form.js index 6647188e..2bfd3c5a 100644 --- a/app/javascript/form.js +++ b/app/javascript/form.js @@ -11,7 +11,6 @@ window.customElements.define('submission-form', class extends HTMLElement { this.app = createApp(Form, { submitter: JSON.parse(this.dataset.submitter), canSendEmail: this.dataset.canSendEmail === 'true', - isDirectUpload: this.dataset.isDirectUpload === 'true', goToLast: this.dataset.goToLast === 'true', isDemo: this.dataset.isDemo === 'true', attribution: this.dataset.attribution !== 'false', diff --git a/app/javascript/submission_form/attachment_step.vue b/app/javascript/submission_form/attachment_step.vue index 8636f31d..284d0c44 100644 --- a/app/javascript/submission_form/attachment_step.vue +++ b/app/javascript/submission_form/attachment_step.vue @@ -51,7 +51,6 @@ @@ -86,11 +85,6 @@ export default { required: false, default: () => ({}) }, - isDirectUpload: { - type: Boolean, - required: true, - default: false - }, modelValue: { type: Array, required: false, diff --git a/app/javascript/submission_form/dropzone.vue b/app/javascript/submission_form/dropzone.vue index 5557ec86..e5a70385 100644 --- a/app/javascript/submission_form/dropzone.vue +++ b/app/javascript/submission_form/dropzone.vue @@ -70,11 +70,6 @@ export default { required: false, default: '*/*' }, - isDirectUpload: { - type: Boolean, - required: true, - default: false - }, multiple: { type: Boolean, required: false, @@ -92,11 +87,6 @@ export default { return 'el' + Math.random().toString(32).split('.')[1] } }, - mounted () { - if (this.isDirectUpload) { - import('@rails/activestorage') - } - }, methods: { onDropFiles (e) { this.uploadFiles(e.dataTransfer.files) @@ -113,72 +103,25 @@ export default { async uploadFiles (files) { this.isLoading = true - if (this.isDirectUpload) { - const { DirectUpload } = await import('@rails/activestorage') + return await Promise.all( + Array.from(files).map((file) => { + const formData = new FormData() - const blobs = await Promise.all( - Array.from(files).map(async (file) => { - const upload = new DirectUpload( - file, - '/direct_uploads', - this.$refs.input - ) + formData.append('file', file) + formData.append('submitter_slug', this.submitterSlug) + formData.append('name', 'attachments') - return new Promise((resolve, reject) => { - upload.create((error, blob) => { - if (error) { - console.error(error) - - return reject(error) - } else { - return resolve(blob) - } - }) - }).catch((error) => { - console.error(error) - }) + return fetch(this.baseUrl + '/api/attachments', { + method: 'POST', + body: formData + }).then(resp => resp.json()).then((data) => { + return data }) - ) - - return await Promise.all( - blobs.map((blob) => { - return fetch(this.baseUrl + '/api/attachments', { - method: 'POST', - body: JSON.stringify({ - name: 'attachments', - blob_signed_id: blob.signed_id, - submitter_slug: this.submitterSlug - }), - headers: { 'Content-Type': 'application/json' } - }).then(resp => resp.json()).then((data) => { - return data - }) - })).then((result) => { - this.$emit('upload', result) - }).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(this.baseUrl + '/api/attachments', { - method: 'POST', - body: formData - }).then(resp => resp.json()).then((data) => { - return data - }) - })).then((result) => { - this.$emit('upload', result) - }).finally(() => { - this.isLoading = false - }) - } + })).then((result) => { + this.$emit('upload', result) + }).finally(() => { + this.isLoading = false + }) } } } diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue index e19aa731..58e7f452 100644 --- a/app/javascript/submission_form/form.vue +++ b/app/javascript/submission_form/form.vue @@ -306,7 +306,6 @@ :key="currentField.uuid" v-model="values[currentField.uuid]" :field="currentField" - :is-direct-upload="isDirectUpload" :attachments-index="attachmentsIndex" :submitter-slug="submitterSlug" :show-field-names="showFieldNames" @@ -319,7 +318,6 @@ v-model="values[currentField.uuid]" :field="currentField" :previous-value="previousSignatureValueFor(currentField)" - :is-direct-upload="isDirectUpload" :with-typed-signature="withTypedSignature" :attachments-index="attachmentsIndex" :submitter-slug="submitterSlug" @@ -335,7 +333,6 @@ v-model="values[currentField.uuid]" :field="currentField" :previous-value="previousInitialsValue" - :is-direct-upload="isDirectUpload" :attachments-index="attachmentsIndex" :show-field-names="showFieldNames" :submitter-slug="submitterSlug" @@ -348,7 +345,6 @@ v-else-if="currentField.type === 'file'" :key="currentField.uuid" v-model="values[currentField.uuid]" - :is-direct-upload="isDirectUpload" :field="currentField" :attachments-index="attachmentsIndex" :submitter-slug="submitterSlug" @@ -578,11 +574,6 @@ export default { required: false, default: '' }, - isDirectUpload: { - type: Boolean, - required: false, - default: false - }, allowToSkip: { type: Boolean, required: false, diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue index 63cefa1b..d68e7cf0 100644 --- a/app/javascript/submission_form/image_step.vue +++ b/app/javascript/submission_form/image_step.vue @@ -38,7 +38,6 @@ :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`" :submitter-slug="submitterSlug" :accept="'image/*'" - :is-direct-upload="isDirectUpload" @upload="onImageUpload" /> @@ -62,11 +61,6 @@ export default { type: Object, required: true }, - isDirectUpload: { - type: Boolean, - required: true, - default: false - }, showFieldNames: { type: Boolean, required: false, diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue index 274a7401..72bf97e6 100644 --- a/app/javascript/submission_form/initials_step.vue +++ b/app/javascript/submission_form/initials_step.vue @@ -152,11 +152,6 @@ export default { required: false, default: true }, - isDirectUpload: { - type: Boolean, - required: true, - default: false - }, attachmentsIndex: { type: Object, required: false, @@ -202,10 +197,6 @@ export default { this.$refs.textInput?.focus() }) - if (this.isDirectUpload) { - import('@rails/activestorage') - } - if (this.$refs.canvas) { this.pad = new SignaturePad(this.$refs.canvas) @@ -293,45 +284,21 @@ export default { cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => { const file = new File([blob], 'initials.png', { type: 'image/png' }) - if (this.isDirectUpload) { - const { DirectUpload } = await import('@rails/activestorage') + const formData = new FormData() - new DirectUpload( - file, - '/direct_uploads' - ).create((_error, data) => { - fetch(this.baseUrl + '/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) + formData.append('file', file) + formData.append('submitter_slug', this.submitterSlug) + formData.append('name', 'attachments') - return resolve(attachment) - }) - }) - } else { - const formData = new FormData() + return fetch(this.baseUrl + '/api/attachments', { + method: 'POST', + body: formData + }).then((resp) => resp.json()).then((attachment) => { + this.$emit('attached', attachment) + this.$emit('update:model-value', attachment.uuid) - formData.append('file', file) - formData.append('submitter_slug', this.submitterSlug) - formData.append('name', 'attachments') - - return fetch(this.baseUrl + '/api/attachments', { - method: 'POST', - body: formData - }).then((resp) => resp.json()).then((attachment) => { - this.$emit('attached', attachment) - this.$emit('update:model-value', attachment.uuid) - - return resolve(attachment) - }) - } + return resolve(attachment) + }) }) }) } diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue index c9644f99..25215c39 100644 --- a/app/javascript/submission_form/signature_step.vue +++ b/app/javascript/submission_form/signature_step.vue @@ -176,11 +176,6 @@ export default { required: false, default: true }, - isDirectUpload: { - type: Boolean, - required: true, - default: false - }, withTypedSignature: { type: Boolean, required: false, @@ -230,10 +225,6 @@ export default { } }) - if (this.isDirectUpload) { - import('@rails/activestorage') - } - if (this.$refs.canvas) { this.pad = new SignaturePad(this.$refs.canvas) @@ -390,45 +381,21 @@ export default { cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(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' - ).create((_error, data) => { - fetch(this.baseUrl + '/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(this.baseUrl + '/api/attachments', { - method: 'POST', - body: formData - }).then((resp) => resp.json()).then((attachment) => { - this.$emit('attached', attachment) - this.$emit('update:model-value', attachment.uuid) - - return resolve(attachment) - }) - } + const formData = new FormData() + + formData.append('file', file) + formData.append('submitter_slug', this.submitterSlug) + formData.append('name', 'attachments') + + return fetch(this.baseUrl + '/api/attachments', { + method: 'POST', + body: formData + }).then((resp) => resp.json()).then((attachment) => { + this.$emit('attached', attachment) + this.$emit('update:model-value', attachment.uuid) + + return resolve(attachment) + }) }).catch((error) => { return reject(error) }) diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index 88f7551d..b0bea84a 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -115,7 +115,6 @@ :with-replace-button="withUploadButton" :editable="editable" :template="template" - :is-direct-upload="isDirectUpload" @scroll-to="scrollIntoDocument(item)" @remove="onDocumentRemove" @replace="onDocumentReplace" @@ -131,7 +130,6 @@ v-if="sortedDocuments.length && editable && withUploadButton" :accept-file-types="acceptFileTypes" :template-id="template.id" - :is-direct-upload="isDirectUpload" @success="updateFromUpload" /> @@ -148,7 +146,6 @@ v-if="!sortedDocuments.length && withUploadButton" :template-id="template.id" :accept-file-types="acceptFileTypes" - :is-direct-upload="isDirectUpload" @success="updateFromUpload" />