diff options
author | Javan Makhmali <javan@javan.us> | 2018-02-14 14:35:34 -0500 |
---|---|---|
committer | Javan Makhmali <javan@javan.us> | 2018-02-14 14:35:34 -0500 |
commit | 55e2df15cdf86671801a22caaa4ea26d4e8497d5 (patch) | |
tree | d97b5cff03a91ab7bd86df1944b4de97c63ccb95 /app | |
parent | ba71c73836c084c95ca89021f9c9a455d8c94134 (diff) | |
download | rails-55e2df15cdf86671801a22caaa4ea26d4e8497d5.tar.gz rails-55e2df15cdf86671801a22caaa4ea26d4e8497d5.tar.bz2 rails-55e2df15cdf86671801a22caaa4ea26d4e8497d5.zip |
Extract AttachmentUpload
Diffstat (limited to 'app')
-rw-r--r-- | app/javascript/activetext/attachment_upload.js | 45 | ||||
-rw-r--r-- | app/javascript/activetext/index.js | 33 |
2 files changed, 50 insertions, 28 deletions
diff --git a/app/javascript/activetext/attachment_upload.js b/app/javascript/activetext/attachment_upload.js new file mode 100644 index 0000000000..a716f1f589 --- /dev/null +++ b/app/javascript/activetext/attachment_upload.js @@ -0,0 +1,45 @@ +import { DirectUpload } from "activestorage" + +export class AttachmentUpload { + constructor(attachment, element) { + this.attachment = attachment + this.element = element + this.directUpload = new DirectUpload(attachment.file, this.directUploadUrl, this) + } + + start() { + this.directUpload.create(this.directUploadDidComplete.bind(this)) + } + + directUploadWillStoreFileWithXHR(xhr) { + xhr.upload.addEventListener("progress", event => { + const progress = event.loaded / event.total * 100 + this.attachment.setUploadProgress(progress) + }) + } + + directUploadDidComplete(error, attributes) { + if (error) { + throw new Error(`Direct upload failed: ${error}`) + } + + this.attachment.setAttributes({ + sgid: attributes.attachable_sgid, + url: this.createBlobUrl(attributes.signed_id, attributes.filename) + }) + } + + createBlobUrl(signedId, filename) { + return this.blobUrlTemplate + .replace(":signed_id", signedId) + .replace(":filename", encodeURIComponent(filename)) + } + + get directUploadUrl() { + return this.element.dataset.directUploadUrl + } + + get blobUrlTemplate() { + return this.element.dataset.blobUrlTemplate + } +} diff --git a/app/javascript/activetext/index.js b/app/javascript/activetext/index.js index e1c59dd50d..c149eda952 100644 --- a/app/javascript/activetext/index.js +++ b/app/javascript/activetext/index.js @@ -1,34 +1,11 @@ import * as Trix from "trix" -import { DirectUpload } from "activestorage" +import { AttachmentUpload } from "./attachment_upload" addEventListener("trix-attachment-add", event => { - const { attachment } = event - if (!attachment.file) return + const { attachment, target } = event - const { directUploadUrl, blobUrlTemplate } = event.target.dataset - - const delegate = { - directUploadWillStoreFileWithXHR: (xhr) => { - xhr.upload.addEventListener("progress", event => { - const progress = event.loaded / event.total * 100 - attachment.setUploadProgress(progress) - }) - } + if (attachment.file) { + const upload = new AttachmentUpload(attachment, target) + upload.start() } - - const directUpload = new DirectUpload(attachment.file, directUploadUrl, delegate) - - directUpload.create((error, attributes) => { - if (error) { - console.warn("Failed to store file for attachment", attachment, error) - } else { - const sgid = attributes.attachable_sgid - - const url = blobUrlTemplate - .replace(":signed_id", attributes.signed_id) - .replace(":filename", encodeURIComponent(attributes.filename)) - - attachment.setAttributes({ sgid, url }) - } - }) }) |