You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
docuseal/app/javascript/elements/signature_pad.js

49 lines
1.3 KiB

import SignaturePad from 'signature_pad'
import { target, targetable } from '@github/catalyst/lib/targetable'
import { actionable } from '@github/catalyst/lib/actionable'
import { DirectUpload } from '@rails/activestorage'
export default actionable(targetable(class extends HTMLElement {
static [target.static] = [
'canvas',
'input'
]
connectedCallback () {
this.pad = new SignaturePad(this.canvas)
}
submit (e) {
e?.preventDefault()
this.canvas.toBlob((blob) => {
const file = new File([blob], 'signature.jpg', { type: 'image/jpg' })
new DirectUpload(
file,
'/direct_uploads'
).create((_error, data) => {
fetch('/api/attachments', {
method: 'POST',
body: JSON.stringify({
submission_slug: this.dataset.submissionSlug,
blob_signed_id: data.signed_id,
name: 'signatures'
}),
headers: { 'Content-Type': 'application/json' }
}).then((resp) => resp.json()).then((attachment) => {
this.input.value = attachment.uuid
this.dispatchEvent(new CustomEvent('upload', { details: attachment }))
})
})
}, 'image/jpeg', 0.95)
}
clear (e) {
e?.preventDefault()
this.pad.clear()
}
}))