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))
+  }
+}