@rails/activestorage 7.0.8 → 7.1.0-beta1

package/README.md

@@ -6,11 +6,11 @@ Files can be uploaded from the server to the cloud or directly from the client t
 
 Image files can furthermore be transformed using on-demand variants for quality, aspect ratio, size, or any other [MiniMagick](https://github.com/minimagick/minimagick) or [Vips](https://www.rubydoc.info/gems/ruby-vips/Vips/Image) supported transformation.
 
-You can read more about Active Storage in the [Active Storage Overview](https://edgeguides.rubyonrails.org/active_storage_overview.html) guide.
+You can read more about Active Storage in the [Active Storage Overview](https://guides.rubyonrails.org/active_storage_overview.html) guide.
 
 ## Compared to other storage solutions
 
-A key difference to how Active Storage works compared to other attachment solutions in Rails is through the use of built-in [Blob](https://github.com/rails/rails/blob/main/activestorage/app/models/active_storage/blob.rb) and [Attachment](https://github.com/rails/rails/blob/main/activestorage/app/models/active_storage/attachment.rb) models (backed by Active Record). This means existing application models do not need to be modified with additional columns to associate with files. Active Storage uses polymorphic associations via the `Attachment` join model, which then connects to the actual `Blob`.
+A key difference to how Active Storage works compared to other attachment solutions in \Rails is through the use of built-in [Blob](https://github.com/rails/rails/blob/main/activestorage/app/models/active_storage/blob.rb) and [Attachment](https://github.com/rails/rails/blob/main/activestorage/app/models/active_storage/attachment.rb) models (backed by Active Record). This means existing application models do not need to be modified with additional columns to associate with files. Active Storage uses polymorphic associations via the `Attachment` join model, which then connects to the actual `Blob`.
 
 `Blob` models store attachment metadata (filename, content-type, etc.), and their identifier key in the storage service. Blob models do not store the actual binary data. They are intended to be immutable in spirit. One file, one blob. You can associate the same blob with multiple application models as well. And if you want to do transformations of a given `Blob`, the idea is that you'll simply create a new one, rather than attempt to mutate the existing one (though of course you can delete the previous version later if you don't need it).
 
@@ -144,11 +144,11 @@ Active Storage, with its included JavaScript library, supports uploading directl
 
 1. Include the Active Storage JavaScript in your application's JavaScript bundle or reference it directly.
 
-    Requiring directly without bundling through the asset pipeline in the application html with autostart:
+    Requiring directly without bundling through the asset pipeline in the application HTML with autostart:
     ```html
     <%= javascript_include_tag "activestorage" %>
     ```
-    Requiring via importmap-rails without bundling through the asset pipeline in the application html without autostart as ESM:
+    Requiring via importmap-rails without bundling through the asset pipeline in the application HTML without autostart as ESM:
     ```ruby
     # config/importmap.rb
     pin "@rails/activestorage", to: "activestorage.esm.js"

package/app/assets/javascripts/activestorage.esm.js

@@ -508,7 +508,7 @@ function toArray(value) {
 }
 
 class BlobRecord {
-  constructor(file, checksum, url) {
+  constructor(file, checksum, url, customHeaders = {}) {
     this.file = file;
     this.attributes = {
       filename: file.name,
@@ -522,6 +522,9 @@ class BlobRecord {
     this.xhr.setRequestHeader("Content-Type", "application/json");
     this.xhr.setRequestHeader("Accept", "application/json");
     this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+    Object.keys(customHeaders).forEach((headerKey => {
+      this.xhr.setRequestHeader(headerKey, customHeaders[headerKey]);
+    }));
     const csrfToken = getMetaValue("csrf-token");
     if (csrfToken != undefined) {
       this.xhr.setRequestHeader("X-CSRF-Token", csrfToken);
@@ -604,11 +607,12 @@ class BlobUpload {
 let id = 0;
 
 class DirectUpload {
-  constructor(file, url, delegate) {
+  constructor(file, url, delegate, customHeaders = {}) {
     this.id = ++id;
     this.file = file;
     this.url = url;
     this.delegate = delegate;
+    this.customHeaders = customHeaders;
   }
   create(callback) {
     FileChecksum.create(this.file, ((error, checksum) => {
@@ -616,7 +620,7 @@ class DirectUpload {
         callback(error);
         return;
       }
-      const blob = new BlobRecord(this.file, checksum, this.url);
+      const blob = new BlobRecord(this.file, checksum, this.url, this.customHeaders);
       notify(this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr);
       blob.create((error => {
         if (error) {
@@ -841,4 +845,4 @@ function autostart() {
 
 setTimeout(autostart, 1);
 
-export { DirectUpload, start };
+export { DirectUpload, DirectUploadController, DirectUploadsController, start };

package/app/assets/javascripts/activestorage.js

@@ -503,7 +503,7 @@
     }
   }
   class BlobRecord {
-    constructor(file, checksum, url) {
+    constructor(file, checksum, url, customHeaders = {}) {
       this.file = file;
       this.attributes = {
         filename: file.name,
@@ -517,6 +517,9 @@
       this.xhr.setRequestHeader("Content-Type", "application/json");
       this.xhr.setRequestHeader("Accept", "application/json");
       this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+      Object.keys(customHeaders).forEach((headerKey => {
+        this.xhr.setRequestHeader(headerKey, customHeaders[headerKey]);
+      }));
       const csrfToken = getMetaValue("csrf-token");
       if (csrfToken != undefined) {
         this.xhr.setRequestHeader("X-CSRF-Token", csrfToken);
@@ -596,11 +599,12 @@
   }
   let id = 0;
   class DirectUpload {
-    constructor(file, url, delegate) {
+    constructor(file, url, delegate, customHeaders = {}) {
       this.id = ++id;
       this.file = file;
       this.url = url;
       this.delegate = delegate;
+      this.customHeaders = customHeaders;
     }
     create(callback) {
       FileChecksum.create(this.file, ((error, checksum) => {
@@ -608,7 +612,7 @@
           callback(error);
           return;
         }
-        const blob = new BlobRecord(this.file, checksum, this.url);
+        const blob = new BlobRecord(this.file, checksum, this.url, this.customHeaders);
         notify(this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr);
         blob.create((error => {
           if (error) {
@@ -816,6 +820,8 @@
   }
   setTimeout(autostart, 1);
   exports.DirectUpload = DirectUpload;
+  exports.DirectUploadController = DirectUploadController;
+  exports.DirectUploadsController = DirectUploadsController;
   exports.start = start;
   Object.defineProperty(exports, "__esModule", {
     value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/activestorage",
-  "version": "7.0.8",
+  "version": "7.1.0-beta1",
   "description": "Attach cloud and local files in Rails applications",
   "module": "app/assets/javascripts/activestorage.esm.js",
   "main": "app/assets/javascripts/activestorage.js",

package/src/blob_record.js

@@ -1,7 +1,7 @@
 import { getMetaValue } from "./helpers"
 
 export class BlobRecord {
-  constructor(file, checksum, url) {
+  constructor(file, checksum, url, customHeaders = {}) {
     this.file = file
 
     this.attributes = {
@@ -17,6 +17,9 @@ export class BlobRecord {
     this.xhr.setRequestHeader("Content-Type", "application/json")
     this.xhr.setRequestHeader("Accept", "application/json")
     this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
+    Object.keys(customHeaders).forEach((headerKey) => {
+      this.xhr.setRequestHeader(headerKey, customHeaders[headerKey])
+    })
 
     const csrfToken = getMetaValue("csrf-token")
     if (csrfToken != undefined) {

package/src/direct_upload.js

@@ -5,11 +5,12 @@ import { BlobUpload } from "./blob_upload"
 let id = 0
 
 export class DirectUpload {
-  constructor(file, url, delegate) {
+  constructor(file, url, delegate, customHeaders = {}) {
     this.id = ++id
     this.file = file
     this.url = url
     this.delegate = delegate
+    this.customHeaders = customHeaders
   }
 
   create(callback) {
@@ -19,7 +20,7 @@ export class DirectUpload {
         return
       }
 
-      const blob = new BlobRecord(this.file, checksum, this.url)
+      const blob = new BlobRecord(this.file, checksum, this.url, this.customHeaders)
       notify(this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr)
 
       blob.create(error => {

package/src/index.js

@@ -1,6 +1,8 @@
 import { start } from "./ujs"
 import { DirectUpload } from "./direct_upload"
-export { start, DirectUpload }
+import { DirectUploadController } from "./direct_upload_controller"
+import { DirectUploadsController } from "./direct_uploads_controller"
+export { start, DirectUpload, DirectUploadController, DirectUploadsController }
 
 function autostart() {
   if (window.ActiveStorage) {