Add support for ActiveStorage direct uploads

Closes #3296

Author: mshibuya

app/views/rails_admin/main/_form_file_upload.html.erb

@@ -6,7 +6,7 @@
   <% if value = field.pretty_value %>
     <%= value %>
   <% end %>
-  <%= form.file_field(field.name, field.html_attributes.reverse_merge({ data: { fileupload: true }})) %>
+  <%= form.file_field(field.name, {data: {fileupload: true}}.deep_merge(field.html_attributes)) %>
 </div>
 <% if field.optional? && field.errors.blank? && file && field.delete_method %>
   <a class="btn btn-info btn-remove-image" data-toggle="button" href="#" role="button">

app/views/rails_admin/main/_form_multiple_file_upload.html.erb

@@ -14,7 +14,7 @@
     <% end %>
   </div>
 <% end %>
-<%= form.file_field(field.name, field.html_attributes.reverse_merge({ data: { :"multiple-fileupload" => true }, multiple: true })) %>
+<%= form.file_field(field.name, { data: { :"multiple-fileupload" => true }, multiple: true }.deep_merge(field.html_attributes)) %>
 <% if field.cache_method %>
   <%= form.hidden_field(field.cache_method) %>
 <% end %>

lib/rails_admin/config/fields/types/active_storage.rb

@@ -28,6 +28,18 @@ class ActiveStorage < RailsAdmin::Config::Fields::Types::FileUpload
             {"#{name}_attachment": :blob}
           end
 
+          register_instance_option :direct? do
+            false
+          end
+
+          register_instance_option :html_attributes do
+            {
+              required: required? && !value.present?,
+            }.merge(
+              direct? && {data: {direct_upload_url: bindings[:view].main_app.rails_direct_uploads_url}} || {},
+            )
+          end
+
           def resource_url(thumb = false)
             return nil unless value
 

lib/rails_admin/config/fields/types/multiple_active_storage.rb

@@ -58,6 +58,18 @@ def resource_url(thumb = false)
           register_instance_option :eager_load do
             {"#{name}_attachments": :blob}
           end
+
+          register_instance_option :direct? do
+            false
+          end
+
+          register_instance_option :html_attributes do
+            {
+              required: required? && !value.present?,
+            }.merge(
+              direct? && {data: {direct_upload_url: bindings[:view].main_app.rails_direct_uploads_url}} || {},
+            )
+          end
         end
       end
     end

spec/dummy_app/app/assets/javascripts/rails_admin/custom/ui.js.erb

@@ -0,0 +1,3 @@
+<% if defined?(ActiveStorage) %>
+//= require activestorage
+<% end %>

spec/dummy_app/app/javascript/rails_admin.js

@@ -1,2 +1,4 @@
 import "rails_admin/src/rails_admin/base";
 import "flatpickr/dist/l10n/fr.js";
+import * as ActiveStorage from "@rails/activestorage";
+ActiveStorage.start();

spec/dummy_app/config/importmap.rails_admin.rb

@@ -8,6 +8,7 @@
 pin '@hotwired/turbo-rails', to: 'https://ga.jspm.io/npm:@hotwired/[email protected]/app/javascript/turbo/index.js'
 pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/[email protected]/dist/esm/popper.js'
 pin '@rails/actioncable/src', to: 'https://ga.jspm.io/npm:@rails/[email protected]/src/index.js'
+pin '@rails/activestorage', to: 'https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/activestorage.esm.js'
 pin '@rails/ujs', to: 'https://ga.jspm.io/npm:@rails/[email protected]/lib/assets/compiled/rails-ujs.js'
 pin 'bootstrap', to: 'https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js'
 pin 'flatpickr', to: 'https://ga.jspm.io/npm:[email protected]/dist/flatpickr.js'

spec/dummy_app/package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@rails/webpacker": "5.4.3",
+    "@rails/activestorage": "^7.0.3-1",
     "rails_admin": "file:../../",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"

spec/integration/fields/active_storage_spec.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'ActiveStorage field', type: :request, active_record: true do
+  subject { page }
+  let(:field_test) { FactoryBot.create :field_test }
+  before do
+    # To suppress 'SQLite3::BusyException: database is locked' exception
+    @original = page.driver.browser.url_blacklist # rubocop:disable Naming/InclusiveLanguage
+    page.driver.browser.url_blacklist = ['/rails/active_storage/representations'] # rubocop:disable Naming/InclusiveLanguage
+  end
+  after { page.driver.browser.url_blacklist = @original } # rubocop:disable Naming/InclusiveLanguage
+
+  describe 'direct upload', js: true do
+    before do
+      RailsAdmin.config FieldTest do
+        edit do
+          field(:active_storage_asset) { direct true }
+        end
+      end
+    end
+
+    it 'works' do
+      visit edit_path(model_name: 'field_test', id: field_test.id)
+      attach_file 'Active storage asset', file_path('test.jpg')
+      expect_any_instance_of(ActiveStorage::DirectUploadsController).to receive(:create).and_call_original
+      click_button 'Save'
+      expect(page).to have_content 'Field test successfully updated'
+      field_test.reload
+      expect(field_test.active_storage_asset.filename).to eq 'test.jpg'
+    end
+  end
+end

spec/integration/fields/multiple_active_storage_spec.rb

@@ -12,7 +12,7 @@
     end
     # To suppress 'SQLite3::BusyException: database is locked' exception
     @original = page.driver.browser.url_blacklist # rubocop:disable Naming/InclusiveLanguage
-    page.driver.browser.url_blacklist = ['/rails/active_storage/'] # rubocop:disable Naming/InclusiveLanguage
+    page.driver.browser.url_blacklist = ['/rails/active_storage/representations'] # rubocop:disable Naming/InclusiveLanguage
   end
   after { page.driver.browser.url_blacklist = @original } # rubocop:disable Naming/InclusiveLanguage
 
@@ -45,4 +45,25 @@
       expect(field_test.active_storage_assets.map { |image| image.filename.to_s }).to eq ['test.png']
     end
   end
+
+  describe 'direct upload', js: true do
+    let(:field_test) { FactoryBot.create :field_test }
+    before do
+      RailsAdmin.config FieldTest do
+        edit do
+          configure(:active_storage_assets) { direct true }
+        end
+      end
+    end
+
+    it 'works' do
+      visit edit_path(model_name: 'field_test', id: field_test.id)
+      attach_file 'Active storage assets', [file_path('test.jpg')]
+      expect_any_instance_of(ActiveStorage::DirectUploadsController).to receive(:create).and_call_original
+      click_button 'Save'
+      expect(page).to have_content 'Field test successfully updated'
+      field_test.reload
+      expect(field_test.active_storage_assets.map { |image| image.filename.to_s }).to eq ['test.jpg']
+    end
+  end
 end

spec/rails_admin/config/fields/types/active_storage_spec.rb

@@ -93,5 +93,35 @@
         expect(field.eager_load).to eq({active_storage_asset_attachment: :blob})
       end
     end
+
+    describe '#direct' do
+      let(:view) { double }
+      let(:field) do
+        RailsAdmin.config('FieldTest').fields.detect do |f|
+          f.name == :active_storage_asset
+        end.with(view: view)
+      end
+      before do
+        allow(view).to receive_message_chain(:main_app, :rails_direct_uploads_url) { 'http://www.example.com/rails/active_storage/direct_uploads' }
+      end
+
+      context 'when false' do
+        it "doesn't put the direct upload url in html_attributes" do
+          expect(field.html_attributes[:data]&.[](:direct_upload_url)).to be_nil
+        end
+      end
+
+      context 'when true' do
+        before do
+          RailsAdmin.config FieldTest do
+            field(:active_storage_asset) { direct true }
+          end
+        end
+
+        it 'puts the direct upload url in html_attributes' do
+          expect(field.html_attributes[:data]&.[](:direct_upload_url)).to eq 'http://www.example.com/rails/active_storage/direct_uploads'
+        end
+      end
+    end
   end
 end

spec/rails_admin/config/fields/types/multiple_active_storage_spec.rb

@@ -97,5 +97,35 @@
         expect(field.eager_load).to eq({active_storage_assets_attachments: :blob})
       end
     end
+
+    describe '#direct' do
+      let(:view) { double }
+      let(:field) do
+        RailsAdmin.config('FieldTest').fields.detect do |f|
+          f.name == :active_storage_assets
+        end.with(view: view)
+      end
+      before do
+        allow(view).to receive_message_chain(:main_app, :rails_direct_uploads_url) { 'http://www.example.com/rails/active_storage/direct_uploads' }
+      end
+
+      context 'when false' do
+        it "doesn't put the direct upload url in html_attributes" do
+          expect(field.html_attributes[:data]&.[](:direct_upload_url)).to be_nil
+        end
+      end
+
+      context 'when true' do
+        before do
+          RailsAdmin.config FieldTest do
+            field(:active_storage_assets) { direct true }
+          end
+        end
+
+        it 'puts the direct upload url in html_attributes' do
+          expect(field.html_attributes[:data]&.[](:direct_upload_url)).to eq 'http://www.example.com/rails/active_storage/direct_uploads'
+        end
+      end
+    end
   end
 end

src/rails_admin/ui.js

@@ -84,21 +84,18 @@ import I18n from "./i18n";
       .each(function () {
         $(this).siblings(".control-group").hide();
       });
-    $('button[name][type="submit"]')
-      .attr("type", "button")
-      .on("click", function () {
-        var form = $(this).closest("form");
-        form.append(
-          $("<input />")
-            .attr("type", "hidden")
-            .attr("name", $(this).attr("name"))
-            .attr("value", $(this).attr("value"))
-        );
-        if ($(this).is("[formnovalidate]")) {
-          form.attr("novalidate", true);
-        }
-        form.trigger("submit");
-      });
+    $('button[name][type="submit"]').on("click", function () {
+      var form = $(this).closest("form");
+      form.append(
+        $("<input />")
+          .attr("type", "hidden")
+          .attr("name", $(this).attr("name"))
+          .attr("value", $(this).attr("value"))
+      );
+      if ($(this).is("[formnovalidate]")) {
+        form.attr("novalidate", true);
+      }
+    });
     $.each($("#filters_box").data("options"), function () {
       $.filters.append(this);
     });