Add initial ActiveStorage integration

1 files changed, 32 insertions, 0 deletions

diff --git a/app/javascript/activetext/index.js b/app/javascript/activetext/index.js
index c77ed0ab26..03cb9960cb 100644
--- a/app/javascript/activetext/index.js
+++ b/app/javascript/activetext/index.js
@@ -1 +1,33 @@
 import * as Trix from "trix"
+import { DirectUpload } from "activestorage"
+
+// FIXME: Hard coded routes
+const directUploadsURL = "/rails/active_storage/direct_uploads"
+const blobsURL = "/rails/active_storage/blobs"
+
+addEventListener("trix-attachment-add", event => {
+  const { attachment } = event
+  if (!attachment.file) return
+
+  const delegate = {
+    directUploadWillStoreFileWithXHR: (xhr) => {
+      xhr.upload.addEventListener("progress", event => {
+        const progress = event.loaded / event.total * 100
+        attachment.setUploadProgress(progress)
+      })
+    }
+  }
+
+  const directUpload = new DirectUpload(attachment.file, directUploadsURL, delegate)
+
+  directUpload.create((error, attributes) => {
+    if (error) {
+      console.warn("Failed to store file for attachment", attachment, error)
+    } else {
+      console.log("Created blob for attachment", attributes, attachment)
+      const { signed_id } = attributes
+      const url = `${blobsURL}/${signed_id}/${encodeURIComponent(attachment.file.name)}`
+      attachment.setAttributes({ url, signed_id })
+    }
+  })
+})