2 files changed, 10 insertions, 5 deletions
diff --git a/app/javascript/activestorage/blob_record.js b/app/javascript/activestorage/blob_record.js
index 9b7801afd5..3c6e6b6ba1 100644
--- a/app/javascript/activestorage/blob_record.js
+++ b/app/javascript/activestorage/blob_record.js
@@ -30,8 +30,10 @@ export class BlobRecord {
   requestDidLoad(event) {
     const { status, response } = this.xhr
     if (status >= 200 && status < 300) {
-      this.attributes.signed_id = response.signed_blob_id
-      this.uploadURL = response.upload_to_url
+      const { direct_upload } = response
+      delete response.direct_upload
+      this.attributes = response
+      this.directUploadData = direct_upload
       this.callback(null, this.toJSON())
     } else {
       this.requestDidError(event)
diff --git a/app/javascript/activestorage/blob_upload.js b/app/javascript/activestorage/blob_upload.js
index c72820b433..99bf0c9e30 100644
--- a/app/javascript/activestorage/blob_upload.js
+++ b/app/javascript/activestorage/blob_upload.js
@@ -3,10 +3,13 @@ export class BlobUpload {
     this.blob = blob
     this.file = blob.file
 
+    const { url, headers } = blob.directUploadData
+
     this.xhr = new XMLHttpRequest
-    this.xhr.open("PUT", blob.uploadURL, true)
-    this.xhr.setRequestHeader("Content-Type", blob.attributes.content_type)
-    this.xhr.setRequestHeader("Content-MD5", blob.attributes.checksum)
+    this.xhr.open("PUT", url, true)
+    for (const key in headers) {
+      this.xhr.setRequestHeader(key, headers[key])
+    }
     this.xhr.addEventListener("load", event => this.requestDidLoad(event))
     this.xhr.addEventListener("error", event => this.requestDidError(event))
   }