diff options
author | Rafael Mendonça França <rafaelmfranca@gmail.com> | 2017-07-31 15:21:22 -0400 |
---|---|---|
committer | Rafael Mendonça França <rafaelmfranca@gmail.com> | 2017-07-31 15:21:22 -0400 |
commit | 9330d01ada9ce6768d14c59b99cd3860e209737a (patch) | |
tree | e4328b4e59b52dae35241f835f786641d1ff8595 /activestorage/app/javascript/activestorage/direct_upload_controller.js | |
parent | 0d58e7e478e79c2d6b2a39a4444d2a17a903b2a6 (diff) | |
parent | 3f4a7218a4a4923a0e7ce1b2eb0d2888ce30da58 (diff) | |
download | rails-9330d01ada9ce6768d14c59b99cd3860e209737a.tar.gz rails-9330d01ada9ce6768d14c59b99cd3860e209737a.tar.bz2 rails-9330d01ada9ce6768d14c59b99cd3860e209737a.zip |
Add 'activestorage/' from commit '3f4a7218a4a4923a0e7ce1b2eb0d2888ce30da58'
git-subtree-dir: activestorage
git-subtree-mainline: 0d58e7e478e79c2d6b2a39a4444d2a17a903b2a6
git-subtree-split: 3f4a7218a4a4923a0e7ce1b2eb0d2888ce30da58
Diffstat (limited to 'activestorage/app/javascript/activestorage/direct_upload_controller.js')
-rw-r--r-- | activestorage/app/javascript/activestorage/direct_upload_controller.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/activestorage/app/javascript/activestorage/direct_upload_controller.js b/activestorage/app/javascript/activestorage/direct_upload_controller.js new file mode 100644 index 0000000000..987050889a --- /dev/null +++ b/activestorage/app/javascript/activestorage/direct_upload_controller.js @@ -0,0 +1,67 @@ +import { DirectUpload } from "./direct_upload" +import { dispatchEvent } from "./helpers" + +export class DirectUploadController { + constructor(input, file) { + this.input = input + this.file = file + this.directUpload = new DirectUpload(this.file, this.url, this) + this.dispatch("initialize") + } + + start(callback) { + const hiddenInput = document.createElement("input") + hiddenInput.type = "hidden" + hiddenInput.name = this.input.name + this.input.insertAdjacentElement("beforebegin", hiddenInput) + + this.dispatch("start") + + this.directUpload.create((error, attributes) => { + if (error) { + hiddenInput.parentNode.removeChild(hiddenInput) + this.dispatchError(error) + } else { + hiddenInput.value = attributes.signed_id + } + + this.dispatch("end") + callback(error) + }) + } + + uploadRequestDidProgress(event) { + const progress = event.loaded / event.total * 100 + if (progress) { + this.dispatch("progress", { progress }) + } + } + + get url() { + return this.input.getAttribute("data-direct-upload-url") + } + + dispatch(name, detail = {}) { + detail.file = this.file + detail.id = this.directUpload.id + return dispatchEvent(this.input, `direct-upload:${name}`, { detail }) + } + + dispatchError(error) { + const event = this.dispatch("error", { error }) + if (!event.defaultPrevented) { + alert(error) + } + } + + // DirectUpload delegate + + directUploadWillCreateBlobWithXHR(xhr) { + this.dispatch("before-blob-request", { xhr }) + } + + directUploadWillStoreFileWithXHR(xhr) { + this.dispatch("before-storage-request", { xhr }) + xhr.upload.addEventListener("progress", event => this.uploadRequestDidProgress(event)) + } +} |